Reactive Forms - mark fields as touched

Question

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.
My idea is simple:

1. user clicks submit button
2. all fields marks as touched
3. error formatter reruns and displays validation errors

If anyone have other idea how to show errors on submit, without implementing new method - please share them. Thanks!

---

My simplified form:

<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> 

And my controller:

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] + ' ';         }       }     }   } } 

Answer 1

From Angular 8 you can simply use

this.form.markAllAsTouched(); 

To mark a control and it's descendant controls as touched.

AbstractControl doc