好资源导航 » 文章资讯 » angular4中关于表单的校验示例

angular4中关于表单的校验示例

2023-09-23 05:28:05 51

本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过。

一、使用响应式表单的步骤

1、在模块(一般是app.module.ts)中引入ReactiveFormsModule
2、在组件的ts文件中使用响应式表单

import{FormGroup,FormBuilder,Validators,FormControl}from'@angular/forms';
exportclassReactiveFormComponentimplementsOnInit{
privatemyForm:FormGroup;
constructor(privatefb:FormBuilder){
this.createForm();
}

ngOnInit(){
}
//创建表单元素
createForm(){
this.myForm=this.fb.group({
username:['',[Validators.required,Validators.minLength(3),Validators.maxLength(6)]],
mobile:['',[Validators.required]],
password:this.fb.group({
pass1:[''],
pass2:['']
})
});
}
//提交表单函数
postDate(){
/**
*valid:是否有效
*invalid:无效
*dirty:脏
*status:状态
*errors:显示错误
*/
if(this.myForm.valid){
console.log(this.myForm.value);
}
}
}

3、在组件的html页面中使用



用户名:

手机号码:

密码:

确认密码:

二、使用表单校验数据

1、angular中自带了三个常见的表单校验的是在Validators中的required,minLength,maxLength
2、自定义表单校验器(其实就一个函数,函数的参数是当前需要校验的行,返回一个任意对象)

**格式**
exportfunctionfnName(control:FormControl|FormGroup):any{

}

3、响应式表单字段中可以写三个值,第一个是返显到页面上的,第二个参数是校验器(可以是一组),第三个参数异步校验(常见判断手机号码,用户名是否重复注册)

三、自定义一个校验方法的步骤

1、把项目中需要用的校验器单独写一个文件

import{FormControl,FormGroup}from'@angular/forms';
/**
*自定义验证器(其实就是一个函数,一个返回任意对象的函数)
*传递的参数是当前需要验证的表单的FormControl
*通过传递的参数获取当前表单输入的值
*/
exportfunctionmobileValidator(control:FormControl):any{
console.dir(control);
//获取到输入框的值
constval=control.value;
//手机号码正则
constmobieReg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
constresult=mobieReg.test(val);
returnresult?null:{mobile:{info:'手机号码格式不正确'}};
}

2、使用自己定义的校验器

createForm(){
this.myForm=this.fb.group({
username:['',[Validators.required,Validators.minLength(3),Validators.maxLength(6)]],
mobile:['',[Validators.required,mobileValidator]],
password:this.fb.group({
pass1:[''],
pass2:['']
})
});
}

3、定义一个密码组的校验

//定义一个密码组的验证方法
exportfunctionpassValidator(controlGroup:FormGroup):any{
//获取密码输入框的值
constpass1=controlGroup.get('pass1').valueasFormControl;
constpass2=controlGroup.get('pass2').valueasFormControl;
console.log('你输入的值:',pass1,pass2);
constisEqule:boolean=(pass1===pass2);
returnisEqule?null:{passValidator:{info:'两次密码不一致'}};
}

4、使用

createForm(){
this.myForm=this.fb.group({
username:['',[Validators.required,Validators.minLength(3),Validators.maxLength(6)]],
mobile:['',[Validators.required,mobileValidator]],
password:this.fb.group({
pass1:[''],
pass2:['']
},{validator:passValidator})
});
}

四、关于前端页面中错误的显示

1、页面显示错误


用户名:



用户名必填的
用户名长度过短
用户名长度太长



手机号码:


{{myForm.getError('mobile','mobile')?.info}}




密码:



确认密码:





{{myForm.getError('passValidator','password')?.info}}

2、定义样式文件

.ng-touched:not(form),.ng-invalid:not(form){
border:1pxsolid#f00;
}

.ng-valid:not(form),.ng-untouched:not(form){
border:1pxsolid#ddd;
}
p{
color:#f00;
}

五、自定义class显示错误

1、在input输入框上写上

表示该字段无效且触碰过就添加这个class=”error”

[class.error]="myForm.get('username').invalid&&myForm.get('username').touched"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

angular4中关于表单的校验示例

热门推荐

随机推荐