Angular-表单验证器

1、验证器的状态

答：

b、dirty：即用修改了表单的值

c、tuched：即表单元素失去焦点

d、valid：即验证器返回null，表明输入验证通过

e、invalid：即验证器返回了一个验证错误对象，表明输入验证拒绝

f、pendding：在异步验证时加载数据

g、pristine：初始状态

h、untuched：未激活过

i、submitted：点击提交过

2、在响应式表单中验证输入

答：

a、在响应式表单中可以通过单个formControl实例或者getter函数访问formGroup对象中的某个formControl实例的方式来访问表单控件的相关信息以及操作

b、在响应式表单中通过在创建表单数据模型时向formControl构造器函数传入第二个参数来定义验证器函数（在响应式表单中由于是在组件类中添加的，因此采用的是函数形式的验证器）

3、在模板驱动表单中验证输入

答：

a、在模板驱动型表单中可以通过导出ngModel到局部模板变量中，使用该ngModel创建的formControl实例来操作其绑定的表单元素的相关信息，如：#myModel='ngModel'

b、在模板驱动型表单中通过指令的方式添加验证器，如：

// 模板中

<input required minlength="3" [(ngModel)]="name"></input>

注意：其中的required、minlength都是angular内置的验证器，对应着：RequiredValidator、MinlengthValidator，都是NG_VALIDATORS内置验证器列表提供者的内容

4、同步验证器和异步验证器

答：

>同步验证器：即会在调用此类验证器时即时返回验证结果，此验证器会接受一个表单控件实例，并返回一个验证错误对象（ValidationErrors的类型）或者验证通过值：null

a、在响应式表单中创建同步验证器：在响应式表单中创建的验证器就是一个工厂函数，会接受一个验证规则，并返回一个ValidatorFn类型的验证器函数，并作为ormControl构造器函数的第二个参数传入，也可以传入一个数据添加多个验证器。如：

function syncCustomValidator(regexp): ValidatorFn {

return (formControl: AbstractControl):ValidationErrors | null => {}

}

b、在模板驱动表单中创建同步验证器：在模板驱动型表单中创建的验证器由于是以指令的形式出现，实现了一个Validator类接口的执行，并添加到dom表单元素上，所以其创建方式如下：

@Directive({

selector: '[customValidator]',

providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]

})

export class CustomValidatorDirective implements Validator{

@Input('customValidator') customValidator: string;

validate(formControl: AbstractControl): ValidationErrors | null {}

}

注意：在创建指令型验证器时，会用NG_VALIDATORS（是一个带有可扩展验证器集合的预定义提供者）令牌来注册自定义验证器，同时是使用useExisting来引入验证器实例本身，而不是使用useClass来根据验证器实例创建新的实例

>异步验证器：此类验证器接受一个表单控件实例，并返回一个Promise或者Observable类型的验证错误结果对象(ValidationErrors)或者通过的值：null

a、在响应式表单中创建异步验证器：与同步验证器创建方式一样，只是返回的是一个AsyncValidatorFn类型的Promise或者Observable，并作为formControl构造器函数的第三个参数传入，也可传入一个数据来定义多个验证器

b、在模板驱动型表单中创建异步验证器：与同步验证器创建方式一致，只是返回的是一个AsyncValidator类型的Promise或者Observable，并添加到dom表单元素上

注意：在angular使用验证器时，会先调用同步验证器，如果验证通过在调用异步验证器，如果不通过就不会去调用异步验证器

5、多字段交叉验证

答：进行多字段交叉验证时，由于需要获取多个同级的formControl实例，需要在form元素上定义验证器，如果是响应式的表单使用了formGroup创建的表单对象，则可以作为formGroup构造器函数的第二个参数传入，如果是模板驱动型表单则可以通过定义局部模板变量的方式导出ngForm，进而操作form内的formControl实例进行验证，如：#myForm='ngForm'