重置响应式表单会触发 Angular 6 中所有必需的验证器答案

【问题标题】：resetting reactive form triggers all required validators in Angular 6重置响应式表单会触发 Angular 6 中所有必需的验证器
【发布时间】：2019-03-19 23:46:26
【问题描述】：

我是 Angular 6 的新手，在这里我尝试在提交数据后重置表单。

一切正常，但是当我在成功将数据提交到数据库后重置表单时，它会触发表单中所有必需的验证器。

我尝试了很多方法来解决这个问题，但我无法解决。

在每次提交表单后，我都想重置表单和所有验证器，然后在表单字段中输入数据以进行另一次提交。

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();
        }
       });
}

这里我已经重置了表单，它触发了所需的验证器。如果我清除了上述函数中的所有验证器，当我输入另一个表单数据时，验证不起作用。

这里我想在每次提交表单后重置所有验证器和表单，并且我想提交下一组表单数据。

谁能帮我解决这个问题。

【问题讨论】：

标签： angular typescript material-design angular6

【解决方案1】：

您需要按以下方式重置：

在您的 html 中：

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

在 .ts 中：

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

材料检查FormGroupDirective 的有效性而不是FormGroup，因此重置FormGroup 不会重置FormGroupDirective。

这里也报告了问题：https://github.com/angular/material2/issues/9347

【讨论】：

【解决方案2】：

这是一个很好的解决方案，但是反应式表单有自己的特点。

您可以通过对反应式表单使用 clearValidators() 来删除特定 formGroup/formcontrol 上的验证。

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

在此之后，您必须使用已删除的验证器更新表单控件

this.formGroup.controls.controlName.updateValueAndValidity()

这帮助我解决了同样的问题，希望对你也有帮助

【讨论】：