Angular 支持非常强大的内置表单验证，maxlength、minlength、required 以及 pattern。使用 Angular 的内置表单校验能够完成绝大多数的业务场景的校验需求，但有时我们还需要实现更为复杂的表单校验功能，这时可以使用 Angular 提供的表单自定义校验（Custom Validator）。下面，我们就来了解一下如何使用 Angular 的自定义表单校验
效果图：
1、首先，来创建我们的注册组件（register），并在模版中显示一个简单的表单
注册
为了使表单看上去能够漂亮一些，在 index.html 中引入 bootstrap 样式文件：
复制代码 代码如下:
2、接下来确定我们的验证需求：
我们希望用户名只能包含数字、字母和下划线，且不能以下划线开头
首先为 form 标签添加 formGroup 指令：
register.component.css:
form {
width: 90%;
max-width: 45em;
margin: auto;
}
.showerr {
white-space: pre-wrap;
}
register.component.ts:
import { Component, onInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { validateRex } from './validate-register';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements onInit {
// 定义表单
registerForm: FormGroup;
// 表单验证不通过时显示的错误消息
formErrors = {
username: ''
};
// 为每一项表单验证添加说明文字
validationMessage = {
'username': {
'minlength': '用户名长度最少为3个字符',
'maxlength': '用户名长度最多为10个字符',
'required': '请填写用户名',
'notdown': '用户名不能以下划线开头',
'only': '用户名只能包含数字、字母、下划线'
}
};
// 添加 fb 属性，用来创建表单
constructor(private fb: FormBuilder) { }
ngonInit() {
// 初始化时构建表单
this.buildForm();
}
// 构建表单方法
buildForm(): void {
// 通过 formBuilder构建表单
this.registerForm = this.fb.group({
'username': [ '', [
Validators.required,
Validators.maxLength(10),
Validators.minLength(3),
validateRex('notdown', /^(?!_)/),
validateRex('only', /^[1-9a-zA-Z_]+$/)
]]
});
// 每次表单数据发生变化的时候更新错误信息
this.registerForm.valueChanges
.subscribe(data => this.onValueChanged(data));
// 初始化错误信息
this.onValueChanged();
}
// 每次数据发生改变时触发此方法
onValueChanged(data?: any) {
// 如果表单不存在则返回
if (!this.registerForm) return;
// 获取当前的表单
const form = this.registerForm;
// 遍历错误消息对象
for (const field in this.formErrors) {
// 清空当前的错误消息
this.formErrors[field] = '';
// 获取当前表单的控件
const control = form.get(field);
// 当前表单存在此空间控件 && 此控件没有被修改 && 此控件验证不通过
if (control && control.dirty && !control.valid) {
// 获取验证不通过的控件名，为了获取更详细的不通过信息
const messages = this.validationMessage[field];
// 遍历当前控件的错误对象，获取到验证不通过的属性
for (const key in control.errors) {
// 把所有验证不通过项的说明文字拼接成错误消息
this.formErrors[field] += messages[key] + 'n';
}
}
}
}
}
validate-register.ts:
import { ValidatorFn, AbstractControl } from '@angular/forms';
export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
// 获取当前控件的内容
const str = control.value;
// 设置我们自定义的严重类型
const res = {};
res[type] = {str}
// 如果验证通过则返回 null 否则返回一个对象（包含我们自定义的属性）
return validateRex.test(str) ? null : res;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
