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

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

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 2

只需使用它而不使用箭头函数：

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 3

控件构造函数需要ValidatorFn作为参数。Validators.compose()接受一个ValidatorFn数组并返回一个ValidatorFn。但是您没有将该ValidatorFn作为参数进行传递。您正在传递一个函数，该函数在被调用时会返回一个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);