Angular form error component trigger validation on form submit

Question

I'm using Angular 8.

I have the following reactive form group.

this.form = this.fb.group({
  query: ['', [
    Validators.required
  ]]
});

And in the HTML

<form [formGroup]="form" (submit)="onSubmit">
    <textarea formControlName="query" placeholder="SELECT ..."></textarea>
    <form-errors [control]="f.query"></form-errors>

    <button type="submit">Submit</button>
</form>

The form-errors is a custom template which displays error message which has following method to trigger validation check on the control.

shouldShowErrors(): boolean {
    return this.control && 
           this.control.errors && 
           (this.control.dirty || this.control.touched);
}

Thus validation is triggered when control is touched or changed.

How can I trigger validation check on submit of the form? How can I access the form inside the form-errors component by the passed control?

Answer 1

You can mark all controls as touched on submit button click like create a method for that and call it

 public markFormGroupTouched(formGroup: FormGroup) {
    Object.values(formGroup.controls).forEach(control => {
      control.markAsTouched();

      if (control.controls) {
          control.controls.forEach(c => this.markFormGroupTouched(c));
      }
    });
  }
  this.markFormGroupTouched(this.form);

demo