自定义验证指令Angular 6模板驱动表单的“无提供者”？答案

【问题标题】："no provider" for custom validation directive Angular 6 template-driven form?自定义验证指令Angular 6模板驱动表单的“无提供者”？
【发布时间】：2019-03-14 03:19:08
【问题描述】：

我正在关注https://angular.io/guide/form-validation#custom-validators的文档

我已经使用 ng generate 向我的项目添加了一个指令

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

@Directive({
  selector: '[appForbiddenRisInternalIdValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: 'ForbiddenRisInternalIdValidatorDirective', multi: true}]

})
export class ForbiddenRisInternalIdValidatorDirective implements Validator {

  validate(control: AbstractControl): ValidationErrors {
    console.log('Validating');
    return null;
  }

}

正如我所料，这也将它添加到了我的 app.module.ts 中。

 import { ForbiddenRisInternalIdValidatorDirective } from './validators/forbidden-ris-internal-id-validator.directive';


@NgModule({
  declarations: [
    AppComponent,
   ..........,
    ForbiddenRisInternalIdValidatorDirective
  ],

文档现在只是说要让它工作，我只需将选择器添加到表单中，并且指令的提供者部分会将此验证器添加到将在我的表单上运行的验证器列表中。

我已经在我的表单标签中尝试过了。

<form #RBoxAddEdit='ngForm' (submit)='updateBox(RBoxAddEdit)' appForbiddenRisInternalIdValidator>

我也在尝试添加验证的输入中直接尝试过。

 <input appForbiddenRisInternalIdValidator #customValidation = 'ngModel' maxlength="45" id="risinternalId"  name="risnternalId" matInput  required [(ngModel)]='boxEdit.risinternalId' placeholder="RIS ID (RBXXXX)">

但是，无论我在哪里添加它，都会出现空注入器错误。

ERROR Error: StaticInjectorError(AppModule)[ForbiddenRisInternalIdValidatorDirective]: 
  StaticInjectorError(Platform: core)[ForbiddenRisInternalIdValidatorDirective]: 
    NullInjectorError: No provider for ForbiddenRisInternalIdValidatorDirective!

我好像错过了什么。知道我错过了什么吗？

【问题讨论】：

标签： angular forms

【解决方案1】：

useExisting 字段的值应该是令牌而不是 string。

尝试改变这个：

@Directive({
  selector: '[appForbiddenRisInternalIdValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: 'ForbiddenRisInternalIdValidatorDirective',
    multi: true
  }]
})
export class ForbiddenRisInternalIdValidatorDirective implements Validator { ...
}

到这里：

@Directive({
  selector: '[appForbiddenRisInternalIdValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: ForbiddenRisInternalIdValidatorDirective,
    multi: true
  }]
})
export class ForbiddenRisInternalIdValidatorDirective implements Validator { ...
}

没有''

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：