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函数）：

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

然后在FormControl中使用它，并将参数（例如，100）发送到验证器函数：

{{1}}

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

2 个答案: