2017-08-07 14 views

回答

2

你有两种方式来验证添加到表单控件。通过指定它们作为参数来表单控件使用势在必行的方法:

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

或声明通过使用模板中验证特定指令:

<input [formControl]='ctrl' required> 

NG_VALIDATORS该令牌在第二种情况下使用。这些令牌由验证器指令required,email定义。并且它们在形式指令 - NgForm,NgModelNgModelGroup创建的喷油器上定义。请参阅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 { 

角反应和模板驱动的形式指令(NgFormNgModelNgModelGroup)使用注入验证:

全内置和自定义验证使用此令牌注册此令牌:

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令牌。

+0

谢谢你的回复!这是非常有用的,但我有疑问....对于反应形式,为什么我们要导入验证器类。我知道它有这些验证方法。如果NG_VALIDATORS已经注册了这些验证器,为什么有两件事情看起来像做同样的事情(不确定我是否正确)? – Jdsans

+0

您可以使用指令 - “必需”,“电子邮件”等或通过导入并将它们添加到“新的FormControl()”中来声明性地添加验证程序。我会将这些信息添加到答案 –

+0

好的,我只是看一下NG_VALIDATORS的背景,它是InjectionToken的一个实例,它基本上是一个类。因此,当我在提供者(提供者)中使用NG_VALIDATORS(这是一个类)并使用“useExisting:forwardRef((=)=> EmailValidator)”时,其中EmailValidator又是一个类。现在的问题是,这两个类NG_VALIDATORS和EmailValidators如何在提供者中彼此链接或单独链接? – Jdsans

相关问题