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

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 令牌也是如此。