如何使用反应式表单添加动态验证

Question

我想在动态生成的字段上添加验证。这是我的代码。

projectForm: FormGroup;

constructor(private sanitizer:DomSanitizer,private router: Router,private fb: FormBuilder,private projectService: ProjectService,private fnService:FunctionsService, private  userService : UserService) {      

    this.projectForm = fb.group({
        'shirnkrap':[null, Validators.required],
        'cd_text':[null, Validators.required],
        'assignto':[null, Validators.required],
        'projecttype':[null, Validators.required]

    });
}

我想在一个函数上添加新的验证，它将在 <select>change 事件上触发。

我试试这个，

this.projectForm.controls['project_name'].setValidators([Validators.required]); 但它给了我这个错误，

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'setValidators' of undefined

有人可以帮我添加验证吗？

Answer 1

使用以下代码动态添加验证：

this.myForm.controls["firstName"].setValidators([Validators.required]);

您的 formGroup 对象没有 project_name 字段。您还可以在表单组对象中动态添加表单控件。

this.projectForm.addControl("project_name", new FormControl(null));

希望对您有所帮助

Answer 2

您的问题不完全在于向您的表单添加验证器。它更多的是动态地向您的表单添加控件。

不幸的是，看起来这不是方法 addControl 可行的东西。根据 documentation，您应该只在实例化表单时使用 addControl()。

那么，如何处理动态控件呢？有两件事是可行的：第一件事，看起来太复杂了，那就是使用 FormArray。查看此答案以获取更多信息：

第二个是直接用动态字段初始化表单：

this.projectForm = fb.group({
    'shirnkrap':[null, Validators.required],
    'cd_text':[null, Validators.required],
    'assignto':[null, Validators.required],
    'projecttype':[null, Validators.required],
    'project_name': ''
});

在您的模板中，您只需根据您的条件隐藏该字段（使用 ng-if="my-selected-value === 'someValue'"

然后，在您的 <select> 更改中，您必须添加验证器：

if(my-selected-value === 'someValue') {
    this.myForm.controls["firstName"].setValidators([Validators.required]);
    this.myForm.updateValueAndValidity();
}

不要忘记更新表单的有效性。否则，您将不得不等待用户更新字段，然后才能看到您的表单不再有效。

您可以在此处查看 Deborah Kurata 关于 Reactive Form 的教程示例：

Template with *ngIf
Form is directly built with adresses
The way she suggests to update validators（在另一个字段上）

如何使用反应式表单添加动态验证

How to add dynamic validation with reative forms

validation

angular

angular-reactive-forms