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

html文件:

<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>

ts文件:

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() {
 }
}

校验文件validators.ts

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:"密码和确认密码不匹配"}};
      }
}
作者:xiagh原文地址:https://blog.csdn.net/xiagh/article/details/78360845

%s 个评论

要回复文章请先登录注册