Angular 如何使用Creative表单添加动态验证
我想在动态生成的字段上添加验证。这是我的密码Angular 如何使用Creative表单添加动态验证,angular,validation,angular-reactive-forms,Angular,Validation,Angular Reactive Forms,我想在动态生成的字段上添加验证。这是我的密码 projectForm: FormGroup; constructor(private sanitizer:DomSanitizer,private router: Router,private fb: FormBuilder,private projectService: ProjectService,private fnService:FunctionsService, private userService : UserService) {
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]
});
}
在一个函数中,我想添加新的验证,它将在
更改事件中触发
我试试这个
this.projectForm.controls['project_name'].setValidators([Validators.required])代码>
但它给了我这个错误
错误错误:未捕获(承诺中):TypeError:无法读取未定义的属性“setValidators”
有人能帮助我如何添加验证吗?使用以下代码动态添加验证:
this.myForm.controls["firstName"].setValidators([Validators.required]);
formGroup对象没有项目名称字段。您还可以在formgroup对象中动态添加formcontrol
this.projectForm.addControl("project_name", new FormControl(null));
希望它能有所帮助您的问题并不完全在于向表单中添加验证程序。更重要的是在表单中动态添加控件
不幸的是,使用方法addControl
似乎不可行。根据,在实例化表单时,只应使用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“
然后,在您的
更改中,您必须添加验证器:
if(my-selected-value === 'someValue') {
this.myForm.controls["firstName"].setValidators([Validators.required]);
this.myForm.updateValueAndValidity();
}
不要忘记更新表单的有效性。否则,在看到表单不再有效之前,您必须等待用户更新字段
您可以在Deborah Kurata的反应式表单教程中看到一个示例:
- (在另一个领域)
没有名为project\u namecontrol的控件,在发生更改时将动态创建控件。您如何添加此控件?可能存在这样的问题:您可以共享用于添加控件的代码吗?它应该类似于:let control=new FormControl();this.projectForm.addControl('project\u name',control);由于您的代码仅包含在注释中,因此当您尝试在其上添加验证程序时,很难理解为什么添加的FormControl未定义。请使用理解错误消息所需的相关代码段更新您的答案。这正是OP尝试的!this.projectForm.controls['project_name'].setValidators([Validators.required]);
。此外,它还不完整!OP还是这么问的。感谢您提供这样的描述性回答,这给了我解决问题的正确方法。