Angular 4：未调用自定义验证器

Posted 2023-02-22

【中文标题】Angular 4：未调用自定义验证器

【英文标题】：Angular 4 : Custom validator not being called

【发布时间】：2018-01-19 12:43:25

【问题描述】：

我已经为泛卡号验证定义了一个自定义验证器（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 />

但它既没有初始化指令也没有调用验证函数。

【问题讨论】：

在您的 validatePan 函数中，您将返回一个 ValidatorFn，其类型应为 ValidatorErrors。但在你的功能中，它什么都没有。尝试在 Validaton 函数中添加返回类型的 ValidatorError；

【参考方案1】：

我最近遇到了同样的问题。最初，我只有 AppModule，我在其中声明了两者，例如。 SignupComponent 和一些我在那里用来验证电子邮件等的验证器。但是后来，我决定将 SignupComponent 和其他验证器移动到分离延迟加载的 FeatureModule 但忘记了验证器，它仍然在 AppModule 中声明。我没有收到任何错误，一些验证器甚至在工作 - 这非常令人困惑，但从未调用过他们的 validate 方法。

所以解决方案当然是在 FeatureModule 中而不是在 AppModule 中声明它们。在 Angular 中，您可以在根模块中声明服务，并且可以在任何地方访问它们，但是验证器指令（与所有指令一样）需要声明或导入到所在的模块中他们正在被使用。因此，如果您还打算在其他模块中使用它们，只需按照最佳答案中的建议从模块中导出它们（使用 exports 属性），然后在需要它们的地方导入模块。

【参考方案2】：

我能够找出问题所在。当我将验证器添加到导出部分时，该功能运行顺畅。

exports: [
    ....
    PanValidator
],

【讨论】：

我很困惑为什么会这样。我有一个 AppModule 和 MyModule 结构。简单地通过 AppModule 声明是行不通的。我必须在我的子模块中声明。这太奇怪了。

【参考方案3】：

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

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

更多关于表单验证器LINK

【讨论】：

感谢您的回复。我也试过这个。但结果相同。

@PrashanthRaghu 你能创建 plunker 吗，该链接有一个工作示例，请按照可能有所帮助