Angular 4:未调用自定义验证程序

Question

我已经为pan卡号验证定义了一个自定义验证器(https://en.wikipedia.org/wiki/Permanent_account_number).

function validatePan(): ValidatorFn {

 return (c: AbstractControl) => {   
            var regpan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

            if (!regpan.test(c.value)) {
                return {
                    validatepan: {
                      valid: false
                    }
                  };
            } else {
                return null;
            }
        }
}        

@Directive({
 selector: '[validatepan][ngModel], [validatepan][formControlName],    [validatepan][formControl]',
   providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => PanValidator),     multi: true }
   ]
})
export class PanValidator implements Validator{
    validator: ValidatorFn;

  constructor() {
    this.validator = validatePan();
  }

  validate(c: FormControl) {
    console.log('here');
    return this.validator(c);
  }

}

我已在模块的声明部分注册了该指令

 declarations: [
        ....
        PanValidator
   ],

我使用的指令如下

<input type="text" class="form-control" name="testpan" id="field_testpan"
            [(ngModel)]="testval.testpan"
        validatepan />

但它既没有初始化指令也没有调用validate函数.

Answer 1

我弄清楚了这个问题.当我将验证器添加到导出部分时,功能无效.

exports: [
    ....
    PanValidator
],

Answer 2

@Directive({
 selector: '[validatepan][ngModel],
   providers: [
    { provide: NG_VALIDATORS, useExisting: PanValidator, multi: true }
   ]
})

尝试像上面那样改变指令装饰器。

有关表单上验证器的更多信息链接