resetting reactive form triggers all required validators in Angular 6

Question

I am new to angular 6 ,Here I am trying to reset the form after submitting the data.

Everything works fine but when I reset the form after successful data submit to

Answer 1

You would need to reset as below:

In your html:

<form [formGroup]="newMemberForm" #formDirective="ngForm"  
(submit)="CreateMember(newMemberForm.value,formDirective)" novalidate>

In .ts:

CreateMember(value,formDirective:FormGroupDirective){
 ...
 formDirective.resetForm();
 this.myForm.reset();
}

Material checks the validity of FormGroupDirective and not of FormGroup hence resetting FormGroup does not reset FormGroupDirective.

Issue reported here too: https://github.com/angular/material2/issues/9347

Answer 2

Thats great solution but, reactive forms have their own feature to do so.

You can remove validations on specific formGroup/formcontrol by using clearValidators() for reactive forms.

this.formGroup.clearValidators() or      
 this.formGroup.controls.controlName.clearValidators()

After this, you have to update form control with the removed validator

this.formGroup.controls.controlName.updateValueAndValidity()

This helped me to resolve same issue, hope it helps you too