重置反应形式会触发Angular 6中所有必需的验证器

Question

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

在这里我重置了触发所需验证器的表单。如果我清除了上述函数中的所有验证器，则当我输入其他表单数据时，验证将无法进行。

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

谁能帮我解决这个问题。

Answer 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