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

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

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

不幸的是，使用addControl 方法似乎不可行。根据documentation，您应该只在实例化表单时使用addControl()。

那么，如何处理动态控件呢？有两件事是可行的：第一件事，看起来太复杂了，那就是使用FormArray。请查看此答案以获取更多信息：How to dynamically add and remove form fields in Angular 2

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

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（在另一个领域）

Answer 2

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

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

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

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

希望对你有帮助