重置反应形式会触发Angular 6中所有必需的验证器 [英] resetting reactive form triggers all required validators in Angular 6

问题描述

我是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 .

在每次提交表单后，我要在重新输入表单字段中的数据之前再次重置表单和所有验证程序.

app.component.html

app.component.html

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

app.component.ts

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.如果我清除了上述函数内的所有校验器，则当我输入其他表单数据时，验证将无法正常工作.

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 .

推荐答案

您需要按如下所示进行重置:

You would need to reset as below:

在您的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.

Material checks the validity of FormGroupDirective and not of FormGroup hence resetting FormGroup does not reset FormGroupDirective.

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

这篇关于重置反应形式会触发Angular 6中所有必需的验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！