Question

我对NG_VALIDATORS的使用感到困惑，我知道它是一个提供者令牌。但是它的用途是什么？它是如何形成验证器类的？

https://github.com/angular/angular/blob/4.3.3/packages/forms/src/validators.ts

Answer 1

您可以通过两种方法将验证程序添加到表单控件中。使用命令式方法将它们指定为表单控件的参数：

const ctrl = new FormControl('', Validators.required);

或通过在模板中使用验证程序特定的指令声明：

<input [formControl]='ctrl' required>

第二种情况使用NG_VALIDATORS令牌。这些令牌由验证器指令required，email和其他指令定义。它们是在表单指令创建的注入器上定义的 - NgForm，NgModel和NgModelGroup。请参阅How exactly works the services hierarchy in this Angular 2 application?以了解有关创建自己的进样器的指令的更多信息。

使用此令牌注册所有内置和自定义验证器：

export const EMAIL_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => EmailValidator),
  multi: true
};
@Directive({
  selector: '[email]...',
  providers: [EMAIL_VALIDATOR]  <-------------
})
export class EmailValidator implements Validator {

export const REQUIRED_VALIDATOR: Provider = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => RequiredValidator),
  multi: true
};
@Directive({
  selector:
      '[required]...',
  providers: [REQUIRED_VALIDATOR],  <-------------
})
export class RequiredValidator implements Validator {

Angular反应式和模板驱动的表单指令（NgForm，NgModel和NgModelGroup）使用此令牌注入验证器：

export class NgForm extends ControlContainer implements Form {
  ...    
  constructor(
      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],

export class NgModel extends NgControl implements OnChanges,
  ...
  constructor(@Optional() @Self() @Inject(NG_VALIDATORS) validators...,

export class NgModelGroup extends AbstractFormGroupDirective implements ... {
  ...
  constructor(
      @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],

NG_ASYNC_VALIDATORS令牌也是如此。

NG_VALIDATORS和验证器之间的区别（Class）

1 个答案: