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 {

}

我想向它传递一个消息参数，我可以return。我试过这个，但它不起作用：

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，您也可以将其添加到您自己的自定义验证器 class 中（例如编写一个 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));

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

Angular2 how to pass a parameter into a custom form control validator?

angular2-forms

angular