angular4响应式表单与校验实现demo

 
响应式表单与校验
用户名:
用户名是必填项
用户名的最小长度是6
手机号:
手机号不合法
 
密码:
密码的最小长度是6
确认密码:
 {{formModel.getError('equal','passwordsGroup')?.descx}} 
注册
 {{formModel.status}} 

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:"密码和确认密码不匹配"}};       } }