<form [formGroup]="formModel" (submit)="onSubmit()">  <h2>响应式表单与校验</h2>  <div><label>用户名:</label><input  type="text" formControlName="username"/></div>  <div [hidden]='!formModel.hasError("required","username")'>用户名是必填项</div>  <!-- required不是校验器的名字，而是失败后返回的对象里的key值   * 只要是required有值就认为是错误的，不论是什么值true或者是对象  * username是想要检查的字段名字  -->  <div [hidden]='!formModel.hasError("minlength","username")'>用户名的最小长度是6</div>  <div><label>手机号:</label><input  type="text" formControlName="mobile"/></div>  <div [hidden]='!formModel.hasError("mobile","mobile")'>手机号不合法</div>  <div formGroupName="passwordsGroup">    <div><label>密码:</label><input  type="password" formControlName="password"/></div>    <div [hidden]='!formModel.hasError("minlength",["passwordsGroup","password"])'>密码的最小长度是6</div>    <!-- 这里注意想要校验的字段的写法是一个数组 -->    <div><label>确认密码:</label><input  type="password" formControlName="pwconfrim"/></div>    <div [hidden]='!formModel.hasError("equal","passwordsGroup")'>      {{formModel.getError('equal','passwordsGroup')?.descx}}       <!-- 可以在校验器中的key值中定义提示语 -->    </div>  </div>  <button type="submit">注册</button></form><div>  {{formModel.status}}</div>

import { Component,OnInit } from '@angular/core';import { FormGroup,FormControl,FormBuilder,AbstractControl,Validators } from '@angular/forms';import { validators } from './validator/validators';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit{  //校验器就是一个普通的方法,名字随意定，接收一个参数，参数的类型必须是AbstractControl的类型，必须有返回值，返回值的//可以是任意结果的一个对象,对象要求key必须是string类型的,值可以是任意类型的  // xxxx(control:AbstractControl):{[key:string]:any} {  //   return null;  // }  //校验器可以单独的提取出去，写在validators.ts文件中  public val:validators;//定义一个validators类型的变量 val  formModel: FormGroup;  // constructor(){  //     this.formModel = new FormGroup({  //       username: new FormControl(),  //       moblie: new FormControl(),  //       passwordsGroup: new FormGroup({  //         password: new FormControl(),  //         pwconfrim: new FormControl()  //       })  //     });  // }  //同上的功能  //FormBuilder的group方法可以再接收一个额外的方法来做校验,用“，”分开  //['',,]第一个元素是一个初始值，第二个元素是一个校验方法，第三个元素是异步校验方法  constructor(fb:FormBuilder){    this.val = new validators();    this.formModel =fb.group({      username: ['',[Validators.required,Validators.minLength(6)]],//['']实例化了一个FormControl,Validators内置表单校验都存储在这里      mobile: ['',this.val.mobileValidator,this.val.mobileAsyncValidator],      passwordsGroup: fb.group({        password:  ['',Validators.minLength(6)],        pwconfrim:  ['']      },{validator :this.val.euqalValidator})    });}  onSubmit() {     // let isValid: boolean = this.formModel.get("username").valid;    //符合所有校验规则后，isValid就是true;    // console.log("username的校验结果是"+isValid);    // let errors:any = this.formModel.get("username").errors;    // console.log("username的错误信息是"+JSON.stringify(errors))    if(this.formModel.valid){ //所有表单都合法才打印表单的值      console.log(this.formModel.value);    }  }  ngOnInit() {  }}

import { FormControl,FormGroup } from '@angular/forms';import { Observable } from 'rxjs';export class validators{    mobileValidator(control:FormControl):any {        let myReg = /^1(3|4|5|7|8)+\d{9}$/;        let valid = myReg.test(control.value);        console.log("moblie的校验结果是"+valid)        return valid ? null : {mobile:true};//如果valid是true 返回是null      }    //异步校验器，返回的不是对象，而是一个异步校验流    mobileAsyncValidator(control:FormControl):any {        let myReg = /^1(3|4|5|7|8)+\d{9}$/;        let valid = myReg.test(control.value);        console.log("moblie的校验结果是"+valid)        return Observable.of(            valid ? null : {mobile:true}        ).delay(5000)//延迟5秒        }      euqalValidator(group:FormGroup):any {        let password :FormControl = group.get("password") as FormControl;        let pwconfrim :FormControl = group.get("pwconfrim") as FormControl;        let valid :boolean = (password.value === pwconfrim.value);        console.log("密码校验结果是"+valid);        return valid ? null : {equal:{descx:"密码和确认密码不匹配"}};      }}