文章摘要
本文介绍了如何在Angular组件中使用校验器和FormBuilder实现表单验证功能。文章详细讲解了校验器的定义与使用方法，校验器可以作为一个方法接收AbstractControl类型的参数，并返回一个包含验证结果的对象。此外，文章还展示了如何利用FormBuilder的group方法来定义表单字段的校验规则，并通过校验器分离技术提升代码的组织性和可维护性。文章还提到了在Component的构造函数中初始化校验器，并将FormBuilder嵌入其中来处理表单提交后的验证逻辑。整体内容强调了Angular在表单验证方面的能力以及代码的可重用性。
import { Component,OnInit } from ‘@angular/core’;
import { FormGroup,FormControl,FormBuilder,AbstractControl,Validators } from ‘@angular/forms’;
import { validators } from ‘https://www.jb51.net/article/validator/validators’;
@Component({
selector: ‘app-root’,
templateUrl: ‘https://www.jb51.net/article/app.component.html’,
styleUrls: [‘https://www.jb51.net/article/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() {
}
}