resetting reactive form triggers all required validators in Angular 6

问题

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 database it triggers all the required validators in the form.

I tried many ways to solve this but I couldn't solve it .

Here after each form submission I want to reset the form and all the validators before enter the data in form fields for another submission.

app.component.html

<form [formGroup]="newMemberForm" (submit)="CreateMember(newMemberForm.value)" novalidate>
....
....
</form>

app.component.ts

            this.newMemberForm = this.formBuilder.group({
                  M_Number: ['', [Validators.required]],
                  F_Number: ['', [Validators.required]],
                  M_Name: ['', [Validators.required, Validators.minLength(4)]],
                  M_Status: ['', [Validators.required]],
                  M_Dob: ['', [Validators.required]],
                  M_Sex: ['', [Validators.required]],

                });

       CreateMember(memberForm) { 
        this.dmlService.CreateNewMember(memberForm).subscribe(data => {
              if (data[0]['RESPONSE'] == 'TRUE') 
         {
         this.newMemberForm.reset();
        }
       });
}

Here I have reset the form it triggers the required validatord.If I clears all the validators inside the above function ,When I enter another form data the validations are not working.

Here I want to reset all the validator and form after each form submission and I want to submit next set of form data .

can anyone help me to solve this .

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

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

来源：https://stackoverflow.com/questions/52818584/resetting-reactive-form-triggers-all-required-validators-in-angular-6

标签

angular

typescript

material-design

angular6