Question

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

这里我已重置表单，它将触发所需的validatord。如果我清除了上述函数中的所有校验器，则当我输入其他表单数据时，验证将无法正常工作。

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

谁能帮我解决这个问题。

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

Answer 2

那是一个很好的解决方案，但是反应形式具有其自身的功能。

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

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

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

this.formGroup.controls.controlName.updateValueAndValidity()

这帮助我解决了同一问题，希望对您也有帮助

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

2 个答案: