我要评论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响应式表单校验的资料请关注代码网其它相关文章！
发表评论