在模板式表单校验中只能将校验器方法包装成指令，用这些指令来校验表单

1.模板校验器封装成指令，并使用它

##1  要封装的校验器在appvalidatorsvalidators.ts             import { FormGroup, FormControl } from "@angular/forms"; //密码校验器 export function passwordValidator(info:FormGroup):any{ let password:FormControl=info.get('password') as FormControl; let confirmPassword:FormControl=info.get('confirmPassword') as FormControl; if(password!=null&&confirmPassword!=null){ if(password.value===confirmPassword.value){ return null; }else{ return {"password":{description:"密码与确认密码不一致"}}; } } } //手机号校验器 export function mobileValidator(mobile:FormControl):any{ let value=(mobile.value||'')+''; let regx=/^1[3|4|5|8][0-9]d{4,8}$/; if(!regx.test(value)){ return {'mobile':true}; }else{ return null; } }
##2 对上述的两个校验器生成两个指令，分别将他们封装成指令（1） 【ng g directive directives/mobileValidator 】
import { Directive } from '@angular/core'; import { NG_VALIDATORS } from '@angular/forms'; import { mobileValidator } from '../validators/validators'; //指令是没有模板的组件 @Directive({ selector: '[mobile]', //[appMobileValidator]这个表示指令要作为属性来使用 providers:[{provide:NG_VALIDATORS,useValue:mobileValidator,multi:true}] //将mobileValidator校验器包装成指令 //NG_VALIDATORS，这是一个固定的token,所有包装成指令的校验器包装的时候使用的token就是NG_VALIDATORS //useValue:mobileValidator,mobileValidator就是要包装的校验器 //multi:true，代表当前的token可以挂多个值，比如再挂一个passwordValidator的校验器 }) export class MobileValidatorDirective { constructor() { } }
（2）【ng g directive directives/passwordValidator】
import { Directive } from '@angular/core'; import { NG_VALIDATORS } from '@angular/forms'; import { passwordValidator } from '../validators/validators'; @Directive({ selector: '[password]', providers:[{provide:NG_VALIDATORS,useValue:passwordValidator,multi:true}] }) export class PasswordValidatorDirective { constructor() { } }
##3 自定义的指令已经封装完毕，接下来需要在模板中使用他：

手机：

密码

确认密码

##4 在模板中使用内置的指令

昵称：

2.模板错误信息显示

##1，校验信息显示的初步处理

昵称：

昵称是必填项

昵称的最小长度是6

手机：

手机号不合法

密码

密码是必填项

确认密码

密码是不合法

##2 错误信息展示使用状态字段进行优化处理 （1）在后台控制声明两个变量，并处理这两个变量、private mobileValid:boolean=true; private mobilePristine:boolean=true; ValidMobile(form:NgForm){ if(form){ this.mobileValid=form.form.get("mobile").valid; this.mobilePristine=form.form.get("mobile").pristine; } }（2）模板处理

手机：

手机号不合法

由此看出对于复杂的模板，校验表单模板式处理更为复杂

3.表单提交校验

模板：

昵称：

昵称是必填项

昵称的最小长度是6

控制器获取表单的合法性： createUser(info:any,valid:boolean){ console.log(valid); console.log(info); }