Angular模板式表单校验

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

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

##1  要封装的校验器在app\validators\validators.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 自定义的指令已经封装完毕，接下来需要在模板中使用他：

<!-- 使用指令校验器 mobile -->
    <div>手机：<input type="text" required mobile ngModel name="mobile"/> </div>

    <!-- 使用密码指令校验器 password -->
    <div password ngModelGroup="passwordInfo" >
        <div>密码<input ngModel required type="text" name="password"/> </div>
        <div>确认密码<input ngModel type="text" name="confirmPassword"/> </div>
    </div>

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

 <!-- 内置的指令校验器 required minlength="6" -->
    <div>昵称：<input type="text" required minlength="6" ngModel name="nickname"/> </div>

2.模板错误信息显示

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

<form #myForm="ngForm"  (ngSubmit)="createUser(myForm.value,myForm.valid)" >
   
    <!-- 昵称的错误信息显示 -->
    <div>昵称：<input type="text" required minlength="6" ngModel name="nickname"/> </div>
    <div [hidden]="!myForm.form.hasError('required','nickname')" >昵称是必填项</div>
    <div [hidden]="!myForm.form.hasError('minlength','nickname')" >昵称的最小长度是6</div>

    <!-- 手机号的校验的错误信息展示 -->
    <div>手机：<input type="text" required mobile ngModel name="mobile"/> </div>
    <div [hidden]="!myForm.form.hasError('mobile','mobile')" >手机号不合法</div>
     

    <!-- 密码校验错误信息显示 -->
    <div password ngModelGroup="passwordInfo" >
        
        <!-- 单独校验密码，错误信息显示 -->
        <div>密码<input ngModel required type="text" name="password"/> </div>
        <div [hidden]="!myForm.form.hasError('required','passwordInfo.password')" >密码是必填项</div>

        <div>确认密码<input ngModel type="text" name="confirmPassword"/> </div>
    </div>
    <div [hidden]="!myForm.form.hasError('password','passwordInfo')" >密码是不合法</div>


    <input type="submit" value="提交" />
</form>

##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）模板处理

    <!-- 手机号的校验的错误信息展示 -->
    <div>手机：<input type="text" required mobile ngModel name="mobile" (input)="ValidMobile(myForm)"/> </div>
    <div [hidden]="mobileValid||mobilePristine">
        <div [hidden]="!myForm.form.hasError('mobile','mobile')" >手机号不合法</div>
    </div>

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

3.表单提交校验

模板：

<form #myForm="ngForm"  (ngSubmit)="createUser(myForm.value,myForm.valid)" >
   
    <!-- 昵称的错误信息显示 -->
    <div>昵称：<input type="text" required minlength="6" ngModel name="nickname"/> </div>
    <div [hidden]="!myForm.form.hasError('required','nickname')" >昵称是必填项</div>
    <div [hidden]="!myForm.form.hasError('minlength','nickname')" >昵称的最小长度是6</div>

    <input type="submit" value="提交" />
</form>

控制器获取表单的合法性：

 createUser(info:any,valid:boolean){
    console.log(valid);
    console.log(info);
  }