Angular2 - Validators.compose

Question

我在使用 Validators.compose 函数时遇到问题（没有错误，只是没有验证）

这是我的代码：

  var validators = ()=> {
           var validatorArr = [];                
           validatorArr.push(Validators.required);
           validatorArr.push(Validators.maxLength(column.max));
           return Validators.compose(validatorArr);
    };
  var ctrl: Control = new Control(row.items[column.mapper], validators);
  row.form.addControl(column.mapper, ctrl);

当我输入 Validators.required 而不是 validators 函数时，验证有效。

Answer 1

不用箭头函数就可以使用：

new Control(row.items[column.mapper],Validators.compose([Validators.required, Validators.minLength(4)]));

或

var validators = ()=> {
     return Validators.compose([Validators.required, Validators.minLength(4)]);
}

new Control(row.items[column.mapper], validators());

Answer 2

您应该使用这段代码而不是使用回调来定义您的验证器：

var validatorArr = [];                
validatorArr.push(Validators.required);
validatorArr.push(Validators.maxLength(column.max));

var ctrl: Control = new Control(row.items[column.mapper], 
                   Validators.compose(validatorArr));
row.form.addControl(column.mapper, ctrl);

Control构造函数的第二个参数对应一个可以使用compose方法创建的函数...

Answer 3

Control 构造函数需要一个 ValidatorFn 作为参数。 Validators.compose() 接受一个数组 ValidatorFn 和 returns 一个 ValidatorFn。但是您没有将 ValidatorFn 作为参数传递。您正在传递一个函数，该函数在调用时 returns a ValidatorFn.

将您的代码替换为

var validatorArr = [];                
validatorArr.push(Validators.required);
validatorArr.push(Validators.maxLength(column.max));
var validatorFn = Validators.compose(validatorArr);

var ctrl: Control = new Control(row.items[column.mapper], validatorFn);
row.form.addControl(column.mapper, ctrl);

或者，更短：

var ctrl: Control = new Control(row.items[column.mapper], 
                                Validators.compose([Validators.required, 
                                                    Validators.maxLength(column.max)]));
row.form.addControl(column.mapper, ctrl);

Angular2 - Validators.compose

Angular2 - Validators.compose

angular2-forms

angular