Angular2如何将参数传递给自定义表单控件验证器？

Question

我写了一个非常简单的表单控件验证器:

import { Directive } from '@angular/core';
import { AbstractControl, NG_VALIDATORS } from '@angular/forms';

function checkboxRequiredValidator(c: AbstractControl) {
    return c.value ? null : {
        required: true
    };
}



@Directive({
    selector: '[checkbox-required-validator]',
    providers: [
        { provide: NG_VALIDATORS, multi: true, useValue: checkboxRequiredValidator }
    ]
})
export class CheckboxRequiredValidator {

}

我想传递一个消息参数给我,我可以返回.我试过这个,但它不起作用:

function checkboxRequiredValidator(c: AbstractControl, msg) {
    return c.value ? null : {
        message: msg
    };
}


@Directive({
    selector: '[checkbox-required-validator]',
    providers: [
        { provide: NG_VALIDATORS, multi: true, useValue: checkboxRequiredValidator }
    ]
})
export class CheckboxRequiredValidator {
    @Input('checkbox-required-validator') msg:  = 'default message';

}

任何帮助,将不胜感激

Answer 1

您可以将指令本身作为验证器.这样您就可以使用消息输入.

import { forwardRef } from '@angular/core';
import { Validator } from '@angular/forms';

@Directive({
  selector: '[checkbox-required-validator]',
  providers: [
    { 
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: forwardRef(() => CheckboxRequiredValidator )
    }
  ]
})
export class CheckboxRequiredValidator implements Validator {
  @Input('checkbox-required-validator') msg  = 'default message';

  validate(c: AbstractControl) {
    return c.value ? null : {
      required: this.msg
    };
  }
}

Answer 2

您可以更改现有函数并向闭包添加一个agrument,您也可以将它添加到您自己的自定义验证器类中(例如,编写一个maxVal函数):

export class MyValidators
{
        public static maxVal(maxVal: number) {
        return (c: FormControl) => {
            return c.value > maxVal ?
                { 'maxVal': { 'MaxValue': maxVal, 'actualValue': c.value } } :
                null;           
        }
    }

然后在FormControl中使用它,并将参数(例如,100)发送到验证器函数:

let fc:FormControl = new FormControl('name', MyValidators.maxVal(100));