Angular Material: Reseting reactiveform shows validation error

Question

I am using angular5 reactivemodule to show a form in my application. I had also used required validator which will subsequently make the field in red color and show an error

Answer 1

All you need to do is avoid (ngSubmit) method on your reactive form:
1. Remove (ngSubmit)="submitForm()" from your form tag
1. Change your form button type from 'submit' to 'button'
2. On this button you want to set a click action to (click)="submitForm()"
3. in the submitForm() method do:

this.checkForm.markAsPristine();
this.checkForm.markAsUntouched();

This will submit the form and reset its value without alerting validators

Answer 2

I has the same issue to reset my formGroup and I take some of Alex Oleksiiuk solution, but I agree with H Dog because submitted only works on click. Finally, this was my solution:

1. Don't use ngSubmit directive, insted use declare a variable:

Template: <form [formGroup]="formProduct" #formDirective="ngForm">

Controller: @ViewChild('formDirective') private formDirective: NgForm;

2. Set reset method

   resetForm() { this.formProduct.reset(); ...// }

3. Up to this point, the submit works and no longer show validation erros. But, if you press reset (cancel, remove, clear...) botton show again the error. To solve this, just put type="button" in your button tag.

<button mat-raised-button 
  (click)="save()"
  [disabled]="!formProduct.valid">
  Save
</button>

<button mat-raised-button
  (click)="resetFormProduct()"
  type="button" 
  color="warn">
  Clear
</button>

Answer 3

By default, Angular/Material watch formControl's error state not only by touched but also submitted status of the form, see below source code.

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
  return !!(control && control.invalid && (control.touched || (form && form.submitted)));
                                                                       ^^^^^^^^^^^^^^
}

For reason above, you also need to reset the form to unsubmitted status.

---

You can call resetForm of FormGroupDirective(getting instance by ViewChild) for it will reset both the form data and submit status.

<form #form="ngForm" [formGroup]="checkForm" (ngSubmit)="submitForm(form)">
  ...
</form>

@ViewChild('form') form;

submitForm() {
  this.form.resetForm();
  ...
}

---

You can also overwrite the default one via implementing ErrorStateMatcher with custom conditions such as ignore submitted status of the form, and apply it on material components.

<mat-form-field>
  <input matInput formControlName="name" placeholder="name" [errorStateMatcher]="errorMatcher" />
  <mat-error *ngIf="checkForm.get('name').errors?.required">
    Name is required.
  </mat-error>
</mat-form-field>

// define custom ErrorStateMatcher
export class CustomErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl, form: NgForm | FormGroupDirective | null) {
    return control && control.invalid && control.touched;
  }
}

// component code
@Component({...})
export class CustomComponent {
  // create instance of custom ErrorStateMatcher
  errorMatcher = new CustomErrorStateMatcher();
}

---

see fixed demo.