Angular 支持非常強大的內置表單驗證，maxlength、minlength、required 以及 pattern。使用 Angular 的內置表單校驗能夠完成絕大多數的業務場景的校驗需求，但有時我們還需要實現更為復雜的表單校驗功能，這時可以使用 Angular 提供的表單自定義校驗（Custom Validator）。下面，我們就來了解一下如何使用 Angular 的自定義表單校驗
效果圖：
1、首先，來創建我們的注冊組件（register），并在模版中顯示一個簡單的表單
<h3 class="text-center">注冊</h3><form> <div class="form-group"> <label for="username">用戶名：</label> <input type="text" id="username" class="form-control" > </div></form>
為了使表單看上去能夠漂亮一些，在 index.html 中引入 bootstrap 樣式文件：
2、接下來確定我們的驗證需求：
我們希望用戶名只能包含數字、字母和下劃線，且不能以下劃線開頭
首先為 form 標簽添加 formGroup 指令：
<form [formGroup]="registerForm" >
并且為 input 標簽添加 formControlName 指令：
3、在代碼中定義驗證規則：
從內置表單模塊中導入以下類：
import { FormBuilder, FormGroup, Validators } from '@angular/forms';其中：
1. formBuilder 用來構建表單數據
2. formGroup 表示表單類型
3. Validators 包含了表單內置的驗證規則，如： Validators.required
定義表單屬性
registerForm: FormGroup;
定義表單驗證不通過時每一項顯示的錯誤消息（目前我們只有 username ）
formErrors = { username: '' };為每一項驗證規則定義驗證失敗時的說明文字（表單控件可能有多條驗證規則，由不通過的驗證說明構成一條錯誤消息）
validationMessage = { 'username': { 'minlength': '用戶名長度最少為3個字符', 'maxlength': '用戶名長度最多為10個字符', 'required': '請填寫用戶名' } };在構造函數中添加 fb 屬性用來構建表單
constructor(private fb: FormBuilder) { }添加構建表單的方法
buildForm(): void { // 通過 formBuilder構建表單 this.registerForm = this.fb.group({ /* 為 username 添加3項驗證規則： * 1.必填， 2.最大長度為10， 3.最小長度為3 * 其中第一個空字符串參數為表單的默認值 */ 'username': [ '', [ Validators.required, Validators.maxLength(10), Validators.minLength(3) ]] });接下來我們添加一個方法用來更新錯誤信息
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'; } } } }下面只需要在表單構建結束后初始化錯誤消息，并且在每次表單數據更改時更新錯誤消息就可以了
在 buildForm 方法中添加如下代碼
// 每次表單數據發生變化的時候更新錯誤信息 this.registerForm.valueChanges .subscribe(data => this.onValueChanged(data)); // 初始化錯誤信息 this.onValueChanged();
此時，我們已經很好的控制了錯誤信息，下面只需要在表單模版中添加錯誤信息的顯示就可以了
在 input 標簽下方添加如下代碼：
<div *ngIf="formErrors.username" class="showerr alert alert-danger" >{{ formErrors.username }}</div>添加如下代碼到表單模版的 css 中：
form { width: 90%; max-width: 45em; margin: auto; } .showerr { white-space: pre-wrap; }現在我們就可以嘗試運行了，在代碼不報錯的情況下已經能夠看到非常好的效果了
如果代碼報錯或沒有出現想象中的效果則可以參照本文結尾的完整代碼進行修改
4、雖然我們已經搭建了整個布局，但是還沒有實現我們的最終目的：實現自定義的表單驗證
接下來我們創建一個正則驗證器，新建文件 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; } }下面我們在代碼中導入此函數：
import { validateRex } from './validate-register';修改 validationMessage 屬性為：
// 為每一項表單驗證添加說明文字 validationMessage = { 'username': { 'minlength': '用戶名長度最少為3個字符', 'maxlength': '用戶名長度最多為10個字符', 'required': '請填寫用戶名', 'notdown': '用戶名不能以下劃線開頭', 'only': '用戶名只能包含數字、字母、下劃線' } };修改 buildForm 方法：
// 通過 formBuilder構建表單 this.registerForm = this.fb.group({ /* 為 username 添加 5 項驗證規則： * 1.必填， 2.最大長度為10， 3.最小長度為3， 4.不能以下劃線開頭， 5.只能包含數字、字母、下劃線 * 其中第一個空字符串參數為表單的默認值 */ 'username': [ '', [ Validators.required, Validators.maxLength(10), Validators.minLength(3), validateRex('notdown', /^(?!_)/), validateRex('only', /^[1-9a-zA-Z_]+$/) ]] });OK ! 大功告成了，趕緊運行代碼嘗試一下吧，我們可以隨時添加各種驗證規則，只需要修改 validationMessage 屬性和 buildForm 方法即可！
如果添加多個表單控件的話還需要修改 formErrors，例如添加 password 控件則修改 formErrors 為
formErrors = { username: '', password: ''};大家可自行嘗試一下！
完整代碼：
register.component.html
<h3 class="text-center">注冊</h3> <form [formGroup]="registerForm" > <div class="form-group"> <label for="username">用戶名：</label> <input formControlName="username" type="text" id="username" #username class="form-control" > <div *ngIf="formErrors.username" class="showerr alert alert-danger" >{{ formErrors.username }}</div> </div> </form>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 添加3項驗證規則： * 1.必填， 2.最大長度為10， 3.最小長度為3， 4.不能以下劃線開頭， 5.只能包含數字、字母、下劃線 * 其中第一個空字符串參數為表單的默認值 */ '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; } }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
