一、使用响应式表单的步骤
1、在模块(一般是app.module.ts)中引入ReactiveFormsModule
2、在组件的ts文件中使用响应式表单import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-form-validate',
templateUrl: './form-validate.page.html',
styleUrls: ['./form-validate.page.scss'],
})
export class FormValidatePage implements OnInit {
public myForm: FormGroup;
constructor(private fb: 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);
}
else
{
//如果验证失败:主动循环触发验证错误信息显示在界面上
for (const i in this.myForm.controls) {
this.myForm.controls[i].markAsTouched();
this.myForm.controls[i].updateValueAndValidity();
}
}
}
}
3、在组件的html页面中使用
用户名:
class="form-control" id="username" formControlName="username" />
用户名必填的
用户名长度过短
用户名长度太长
手机号码:
{{myForm.getError('mobile', 'mobile')?.info}}
密码:
确认密码:
{{myForm.getError('passValidator','password')?.info}}
二、自定义一个校验方法的步骤
1、把项目中需要用的校验器单独写一个文件import { FormControl, FormGroup } from '@angular/forms';
/**
* 自定义验证器(其实就是一个函数,一个返回任意对象的函数)
* 传递的参数是当前需要验证的表单的FormControl
* 通过传递的参数获取当前表单输入的值
*/
//手机号校验
export function mobileValidator(control: FormControl): any {
console.dir(control);
// 获取到输入框的值
const val = control.value;
// 手机号码正则
const mobieReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
const result = mobieReg.test(val);
return result ? null : { mobile: { info: '手机号码格式不正确' } };
}
//定义一个密码组的校验
export function passValidator(controlGroup: FormGroup): any {
// 获取密码输入框的值
const pass1 = controlGroup.get('pass1').value as FormControl;
const pass2 = controlGroup.get('pass2').value as FormControl;
console.log('你输入的值:', pass1, pass2);
const isEqule: boolean = (pass1 === pass2);
return isEqule ? null : { passValidator: { info: '两次密码不一致' } };
}
2、使用自己定义的校验器=>mobileValidatorcreateForm() {
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})
});
}
三、动态调整验证规则
为了演示 “动态调整验证规则” 的功能,我新增了两个控件:radio – 用于让用户设置是否开启手机登录。
tel – 当用户开启手机登录功能,用于让用户输入手机号码。当用户开启手机登录功能,手机号码对应控件的验证规则,必须是必填且格式为合法的手机号码。当用户不开启手机登录功能时,手机号码对应控件将不是必填的。
新增 radio 控件
开启手机登录
formControlName="enableMobile">
是
formControlName="enableMobile">
否
新增 tel 控件
[ngClass]="{'has-error': (mobile.touched || mobile.dirty) && !mobile.valid }">
for="mobileId">手机号码
id="mobileId"
type="text"
placeholder="请输入手机号码"
formControlName="mobile"/>
&& mobile.errors">
请输入手机号码
手机号码格式不正确
动态调整验证规则功能ngOnInit(): void {
... this.signupForm.get('enableMobile').valueChanges
.subscribe(value => this.checkMobile(value));
}
checkMobile(enableMobile: string): void { const mobileControl = this.signupForm.get('mobile');
enableMobile === "1" ?
mobileControl.setValidators([Validators.required,
Validators.pattern('1(3|4|5|7|8)\\d{9}')]) :
mobileControl.clearValidators();
mobileControl.updateValueAndValidity();
}
原文链接 http://www.nbsite.cn/qdjs/168