angular - 重置 react 形式会触发 Angular 6 中所有必需的验证器

Question

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

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

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

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

app.component.html

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

应用程序组件.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();
        }
       });
}

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

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

谁能帮我解决这个问题。

Answer 1

您需要重新设置如下:

在您的 html 中:

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

在 .ts 中:

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

Material 检查 FormGroupDirective 而非 FormGroup 的有效性，因此重置 FormGroup 不会重置 FormGroupDirective。

此处也报告了问题:https://github.com/angular/material2/issues/9347