我正在使用Reactive Forms模块(https://angular.io/docs/ts/latest/cookbook/dynamic-form.html)阅读动态表单上的Angular 2食谱
我注意到他们定义了如何动态创建表单控件,如:
questions.forEach(question => {
group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
: new FormControl(question.value || '');
});
这开始似乎很棒,但如果您有多个或自定义验证器,那么最佳方法是什么?例如,如果我有一个已定义为
的现有表单控件this.myForm= this.formBuilder.group({
inputField: [this.myObject.inputValueField, [Validators.required,Validators.minLength(4),
forbiddenValueValidator(5000)]]
});
所以在这个例子中,我会有一个必需的输入,最小长度为4,不能等于5000,由自定义验证函数强制执行。
很抱歉,如果有任何类似的重复,但我无法找到任何真正指向解决动态/元驱动方法的多个验证器实例化新FormControl
编辑:
这是我对修复的潜在想法:
我确实认为我现在已经弄明白了,大概是这样的:
validations = {
required: true,
minLength:true,
customCalls: [forbiddenValueValidator(5000)]
};
let myValidators = [];
if(this.validations.required) {
myValidators .push(Validators.required);
}
if(this.validations.minLength) {
myValidators .push(Validators.minLength(4));
}
if(this.validations.customCalls && this.validations.customCalls.length > 0) {
for (let customCall of this.validations.customCalls) {
myValidators .push(customCall);
}
}
验证对象可以是表示问题数据的json元数据的另一部分,其余部分可以是为验证器创建数组的快速函数。然后控件的创建将如下所示:
group[question.key] = myValidators.length > 0 ? new FormControl(question.value || '', myValidators)
: new FormControl(question.value || '');