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

目录

• html文件：

• ts文件：

• 校验文件validators.ts

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

以上就是angular4响应式表单与校验实现demo的详细内容，更多关于angular4响应式表单校验的资料请关注素材鸟其它相关文章！