在Angular 2中添加Reactive Forms Validators的动态方法?

时间:2016-10-11 15:20:33

标签: angular typescript

我正在使用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 || '');

0 个答案:

没有答案