angular4中关于表单的校验示例

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';export class ReactiveFormComponent implements OnInit {  private myForm: FormGroup;  constructor(private fb: FormBuilder) {    this.createForm();  }  ngOnInit() {  }  // 创建表单元素  createForm() {    this.myForm = this.fb.group({      username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],      mobile: ['', [Validators.required]],      password: this.fb.group({        pass1: [''],        pass2: ['']      })    });  }  // 提交表单函数  postDate() {    /**     * valid:是否有效     * invalid:无效     * dirty:脏     * status:状态     * errors:显示错误     */    if(this.myForm.valid){      console.log(this.myForm.value);    }  }}

<form [formGroup]="myForm" (ngSubmit)="postDate()">  <div class="form-group">    <label for="username">用户名:</label>    <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />  </div>  <div class="form-group">    <label for="mobile">手机号码:</label>    <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>  </div>  <div formGroupName="password" style="border:none;">    <div class="form-group">      <label>密码:</label>      <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />    </div>    <div class="form-group">      <label>确认密码:</label>      <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />    </div>  </div>  <div class="form-group">    <input type="submit" value="提交" class="btn btn-warning" [disabled]="!myForm.valid" />  </div></form>

**格式**export function fnName(control:FormControl|FormGroup):any{}

import { FormControl, FormGroup } from '@angular/forms';/** * 自定义验证器(其实就是一个函数,一个返回任意对象的函数) * 传递的参数是当前需要验证的表单的FormControl * 通过传递的参数获取当前表单输入的值 */export function mobileValidator(control: FormControl): any {  console.dir(control);  // 获取到输入框的值  const val = control.value;  // 手机号码正则  const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+/d{8})$/;  const result = mobieReg.test(val);  return result ? null : { mobile: { info: '手机号码格式不正确' } };}

createForm() {  this.myForm = this.fb.group({    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],    mobile: ['', [Validators.required, mobileValidator]],    password: this.fb.group({      pass1: [''],      pass2: ['']    })  });}

// 定义一个密码组的验证方法export function passValidator(controlGroup: FormGroup): any {  // 获取密码输入框的值  const pass1 = controlGroup.get('pass1').value as FormControl;  const pass2 = controlGroup.get('pass2').value as FormControl;  console.log('你输入的值:', pass1, pass2);  const isEqule: boolean = (pass1 === pass2);  return isEqule ? null : { passValidator: { info: '两次密码不一致' } };} 

createForm() {  this.myForm = this.fb.group({    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]],    mobile: ['', [Validators.required, mobileValidator]],    password: this.fb.group({      pass1: [''],      pass2: ['']    }, {validator: passValidator})  });}

<div class="form-group">  <label for="username">用户名:</label>  <input type="text" placeholder="请输入用户名" class="form-control" id="username" formControlName="username" />  <!-- 当输入框没有访问的时候或者合法的时候不显示 -->  <div [hidden]="myForm.get('username').valid || myForm.get('username').untouched">    <p [hidden]="!myForm.hasError('required','username')">用户名必填的</p>    <p [hidden]="!myForm.hasError('minlength','username')">用户名长度过短</p>    <p [hidden]="!myForm.hasError('maxlength','username')">用户名长度太长</p>  </div></div><div class="form-group">  <label for="mobile">手机号码:</label>  <input type="text" placeholder="请输入手机号码" class="form-control" id="mobile" formControlName="mobile"/>  <div [hidden]="myForm.get('mobile').valid || myForm.get('mobile').untouched">    <p [hidden]="!myForm.hasError('mobile', 'mobile')">{{myForm.getError('mobile', 'mobile')?.info}}</p>  </div></div><div formGroupName="password" style="border:none;">  <div class="form-group">    <label>密码:</label>    <input type="password" class="form-control" placeholder="请输入密码" formControlName="pass1" />  </div>  <div class="form-group">    <label>确认密码:</label>    <input type="password" class="form-control" placeholder="请再次输入密码" formControlName="pass2" />  </div>  <!-- 对于group可以不在外面加一层判断 -->  <div>    <p [hidden]="!myForm.hasError('passValidator','password')">      {{myForm.getError('passValidator','password')?.info}}    </p>  </div></div>

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

 [class.error]="myForm.get('username').invalid && myForm.get('username').touched"