如何用Angular4实现响应式表单及长尾词校验功能？

本文共计925个文字，预计阅读时间需要4分钟。

目录：文件：ts文件：验证文件validators.ts文件：ts文件：typescript// formModel.tsimport { FormGroup, FormControl } from '@angular/forms';

export class FormModel { formModel: FormGroup; constructor() { this.formModel=new FormGroup({ username: new FormControl('') }); }}验证文件validators.ts：typescript// validators.tsimport { FormControl } from '@angular/forms';

export function usernameValidator(control: FormControl): { [key: string]: any } | null { const username=control.value; if (!username) { return null; } // 添加更多的验证逻辑 return null;}

目录

• 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响应式表单校验的资料请关注自由互联其它相关文章！