Question

我正在关注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
  ],

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

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

<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!

似乎我缺少了一些东西。知道我错过了什么吗？

Answer 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。

自定义验证指令“无提供程序” Angular 6模板驱动的形式？

1 个答案: