Angular开发(二十四)-angular表单的校验

表单的校验，本文档中分为模板驱动和模型驱动表单

一、模板驱动的校验

• 1、采用第三方的组件进行校验
• 2、npm install ng2-validation --save

• 3、配置app.module.ts

  import { FormsModule, ReactiveFormsModule } from '@angular/forms';import {CustomFormsModule} from "ng2-validation";...imports: [    FormsModule,    CustomFormsModule,    ReactiveFormsModule  ],...

• 4、组件的ts文件

  private myForm1:any= {    username:"",    mobile:""  };

• 5、组件的html代码

  <form role="form" #myForm="ngForm">    <div class="form-group">        <label>用户名:</label>        <input type="text" placeholder="请输入用户名" [(ngModel)]="myForm1.username" name="username" #username="ngModel" [rangeLength]="[5,9]" class="form-control" required />        <p class="text-danger" *ngIf="username.errors?.rangeLength">输入字符长度在5-9之间</p>    </div>    <div class="form-group">        <label>手机号码:</label>        <input type="text" placeholder="请输入手机号码" class="form-control" [(ngModel)]="myForm1.mobile" name="mobile" #mobile="ngModel" phone="CN" [rangeLength]="[11,11]" />        <p class="text-danger" *ngIf="mobile.errors?.phone || mobile.errors?.rangeLength">手机格式有误</p>    </div>    <div class="form-group">        <input type="submit" class="btn btn-primary" value="提交" />    </div></form>

• 6、想要更多的验证方式请到github博客上查找需要的
• 7、运行效果
  

二、模型驱动(响应式表单)的校验方式

• 1、响应式表单不清楚的可以查看博客响应式表单

• 2、组件的ts代码

  ...private myform2:FormGroup;  constructor(private fb:FormBuilder) { }  ngOnInit() {    this.myform2 = this.fb.group({      username1: ["",[Validators.required,Validators.minLength(3),Validators.maxLength(9)]],      mobile1:["",[Validators.required,this.mobileValidator]]    })  }  //定义一个手机号码的校验器  mobileValidator(control:FormControl):any{    var reg = /^1[34578]\d{9}$/;    let valid = reg.test(control.value);    //如果验证通过就返回null否则就返回手机号码格式有误    return valid ? null:{moblie:"手机号码格式有误"};  }...

• 3、组件的html代码

  <form role="form" [formGroup]="myform2">    <div class="form-group">        <label>用户名:</label>        <input type="text" placeholder="请输入用户名" class="form-control" formControlName="username1" />        <p [hidden]="myform2.get('username1').untouched || !myform2.hasError('required','username1')" class="text-danger">用户名必填</p>        <p [hidden]="myform2.get('username1').untouched || (!myform2.hasError('minlength','username1') ? !myform2.hasError('maxlength','username1'):null)" class="text-danger">用户名长度有误</p>    </div>    <div class="form-group">        <label>手机号码:</label>        <input type="text" placeholder="请输入手机号码" class="form-control" formControlName="mobile1" />        <p class="text-danger" [hidden]="myform2.get('mobile1').untouched || !myform2.hasError('required','mobile1')">手机号码必填</p>        <p class="text-danger" [hidden]="myform2.get('mobile1').untouched || myform2.hasError('mobileValidator','mobile1')">手机号码格式有误</p>    </div>    <div class="form-group">        <input type="submit" class="btn btn-success" value="提交" />    </div></form>

• 4、样式文件

  .ng-invalid:not(form) {    border: 1px solid #f00;}.ng-untouched:not(form) {    border: 1px solid #ddd;}

• 5、运行效果
  

三、本节案例下载地址demo