how to clear validation errors for Angular Material mat-error

Question

I'm trying to reset a form after I've added a value.

Form Code Snippet

<form [formGroup]="addAttributeForm" fxLayout="column">
    <mat-form-field>
      <input matInput formControlName="title" placeholder="Title" required>
      <mat-error>This field is required</mat-error>
    </mat-form-field>
</form>

In the component

onSubmit(form: FormGroup) {
  // do work
  form.reset();
}

What I'm observing:

1. The form values are set to empty.
2. But the validation messages are still displayed from mat-error.
3. I've tried form.markAsPristine(), form.markAsUntouched() and combining all three.

How can I reset the form so the mat-error is not displayed?

Solution 1

The form group has no "knowledge" about whether the actual HTML form has been submitted or not. It only keeps track of the form values/validity/enabled state. So resetting the form group does reset the values but not any state regarding whether the form has been submitted.

To do this, you need to get a hold of the FormGroupDirective and call resetForm() on it.

Form Code Snippet

<form [formGroup]="addAttributeForm" fxLayout="column">
  <!-- ... -->
</form>

In the component

@ViewChild(FormGroupDirective) formDirective: FormGroupDirective;

onSubmit(form: FormGroup) {
  // do work
  this.formDirective.resetForm();
}

Solution 2

This solution works with me. You need to do next:

formReset(form: FormGroup) {

    form.reset();

    Object.keys(form.controls).forEach(key => {
      form.get(key).setErrors(null) ;
    });
}

This reset the form and clear all error.

Comments

[Richard G]

Hi Will I tried this but it doesn't clear the validation errors, I'm not sure why resetting the html form would make a difference? What I'm trying to do is use a form to add items into a list, each time one is added, clear the form (and any validation errors) so it's ready for the next item to be entered. The problem is when the form is cleared, the mat-errors shows the 'required field' errors. What I'm trying to work out is what combination of form state will hide the mat-errors again as if the form controls were all back to pristine....

[Will Howell]

Hm I might be missing something in my answer, but I'm pretty sure of the concept. The html form holds submitted state, which is what mat-error takes into account when deciding to show (more context here: github.com/angular/material2/issues/4190#issuecomment-311488‌​176). I'll try to get a reproduction for you.

[Will Howell]

@RichardG see this example stackblitz.com/edit/…

[ackuser]

I don't understand how don't do it automatically...very weird, still you can use .setErrors(null); to clean the errors but still I get some cases in which the behaviour is not the same as in the original...Reset is reset, I mean don't get why these decisions in ng material

[MaxXx1313]

This approach clears all validation errors, though the form might not be valid.