在ASP.NET Boilerplate中未触发Angular 10自定义模板验证器

编程问答 2022-06-12

问题描述

我有一个使用.NET Core 3.x和Angular 10构建的ASP.NET Boilerplate项目。在Angular部分中，我尝试创建自己的自定义模板验证器。

但是由于某种原因它没有触发。我将验证器基于框架中已经存在的验证器：equal-validator.directive.ts

这就是我自己的验证器中的内容。

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

@Directive({
    selector: '[validateBsn]',providers: [
        { provide: NG_VALIDATORS,useExisting: forwardRef(() => BsnValidator),multi: true }
    ]
})
export class BsnValidator implements Validator {

    constructor() {
        console.log('validator loaded');
    }

    validate(control: AbstractControl): ValidationErrors {
        console.log('test');
        return {
            validateBsn: true
        };
    }
}

然后在shared.module.ts内（也加载了另一个验证器），我添加了以下内容：

import { EqualValidator } from './directives/equal-validator.directive';
import { BsnValidator } from './directives/bsn-validator.directive';

@NgModule({
    imports: [
        ... left out intentionally
    ],declarations: [
        ... left out the others intentionally
        BsnValidator,EqualValidator
    ],exports: [
        ... left out the others intentionally
        BsnValidator,EqualValidator
    ]
})

然后在我的HTML中，将验证器添加到输入中：

<input type="text" id="bsn" validateBsn 
class="form-control" [(ngModel)]="user.bsn" 
name="bsn" minlength="1" maxlength="150"  />

但是，每当我加载页面时，似乎永远不会触发验证器。我没有看到在验证器中添加的console.log消息。

理想情况下，我希望它在模糊时触发。而且，当我提交表格时，我什么也没看到。

我在做什么错？我忘了在某处添加东西吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-directiveangular-validationaspnetboilerplateaspnetzero