title: Reactive Forms - mark fields as touched
body: <p>I am having trouble finding out how to mark all form's fields as touched.
  The main problem is that if I do not touch fields and try to submit form - validation error in not shown up. I have placeholder for that piece of code in my controller.<br>
  My idea is simple: </p>
  
  <ol>
  <li>user clicks submit button</li>
  <li>all fields marks as touched</li>
  <li>error formatter reruns and displays validation errors</li>
  </ol>
  
  <p>If anyone have other idea how to show errors on submit, without implementing new method - please share them. Thanks!</p>
  
  <hr>
  
  <p><strong>My simplified form:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"&gt;
      &lt;input type="text" id="title" class="form-control" formControlName="title"&gt;
      &lt;span class="help-block" *ngIf="formErrors.title"&gt;{{ formErrors.title }}&lt;/span&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>And my controller:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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 =&gt; 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 &amp;&amp; control.touched &amp;&amp; !control.valid) {
          const messages = this.validationMessages[field];
          for (const key in control.errors) {
            if (!control.errors.hasOwnProperty(key)) {
              continue;
            }
            this.formErrors[field] += messages[key] + ' ';
          }
        }
      }
    }
  }
  </code></pre>