重置反应形式会触发 Angular 6 中所有必需的验证器 [英] resetting reactive form triggers all required validators in Angular 6
问题描述
我是 angular 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();
}
});
}
这里我重置了表单,它触发了所需的验证器.如果我清除了上述函数中的所有验证器,当我输入另一个表单数据时,验证不起作用.
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 中:
In your 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
.
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屋!