[angular] 반응 양식-필드를 터치 한 것으로 표시

모든 양식의 필드를 터치 한 것으로 표시하는 방법을 찾는 데 문제가 있습니다. 주요 문제는 필드를 만지지 않고 양식을 제출하려고하면 유효성 검사 오류가 표시되지 않는다는 것입니다. 컨트롤러에 해당 코드에 대한 자리 표시자가 있습니다.
내 생각은 간단합니다.

1. 사용자가 제출 버튼을 클릭
2. 모든 필드는 터치로 표시됩니다.
3. 오류 포맷터가 다시 실행되고 유효성 검사 오류를 표시합니다.

누군가가 새로운 방법을 구현하지 않고 제출시 오류를 표시하는 방법을 알고 있다면 공유하십시오. 감사!

내 단순화 된 양식 :

<form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="text" id="title" class="form-control" formControlName="title">
    <span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span>
    <button>Submit</button>
</form>

그리고 내 컨트롤러 :

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
  selector   : 'pastebin-root',
  templateUrl: './app.component.html',
  styleUrls  : ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  formErrors = {
    'title': ''
  };
  validationMessages = {
    'title': {
      'required': 'Title is required.'
    }
  };

  constructor(private fb: FormBuilder) {
  }

  ngOnInit(): void {
    this.buildForm();
  }

  onSubmit(form: any): void {
    // somehow touch all elements so onValueChanged will generate correct error messages

    this.onValueChanged();
    if (this.form.valid) {
      console.log(form);
    }
  }

  buildForm(): void {
    this.form = this.fb.group({
      'title': ['', Validators.required]
    });
    this.form.valueChanges
      .subscribe(data => this.onValueChanged(data));
  }

  onValueChanged(data?: any) {
    if (!this.form) {
      return;
    }

    const form = this.form;

    for (const field in this.formErrors) {
      if (!this.formErrors.hasOwnProperty(field)) {
        continue;
      }

      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.touched && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          if (!control.errors.hasOwnProperty(key)) {
            continue;
          }
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }
}