一、Overview
angular 入坑記錄的筆記第三篇，介紹 angular 中表單控制元件的相關概念，了解如何在 angular 中創建一個表單，以及如何針對表單控制元件進行資料校驗，
對應官方檔案地址：
- Angular 表單簡介
- 回應式表單
- 模板驅動表單
- 表單驗證
配套代碼地址：angular-practice/src/forms-overview
二、Contents
- Angular 從入坑到棄坑 - Angular 使用入門
- Angular 從入坑到挖坑 - 組件食用指南
- Angular 從入坑到挖坑 - 表單控制元件概覽
三、Knowledge Graph
四、Step by Step
4.1、表單簡介
用來處理用戶的輸入，通過從視圖中捕獲用戶的輸入事件、驗證用戶輸入的是否滿足條件，從而創建出表單模型修改組件中的資料模型，達到獲取用戶輸入資料的功能
| 模板驅動表單 | 回應式表單 | |
|---|---|---|
| 建立表單 | 由組件隱式的創建表單控制元件實體 | 在組件類中進行顯示的創建控制元件實體 |
| 表單驗證 | 指令 | 函式 |
在表單資料發生變更時，模板驅動表單通過修改 ngModel 系結的資料模型來完成資料更新，而回應式表單在表單資料發生變更時，FormControl 實體會回傳一個新的資料模型，而不是直接修改原來的資料模型
4.2、模板驅動表單
通過使用表單的專屬指令（例如 ngModel 進行雙向資料系結）將資料值和一些對于用戶的行為約束（某個欄位必須填啊、某個欄位長度超過了長度限制啊）系結到組件的模板中，從而完成與用戶的互動
4.2.1、模板驅動表單的雙向資料系結
在根模塊中引入 FormsModule，并添加到根模塊的 imports 陣列中
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 引入 FormsModule
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TemplateDrivenFormsComponent } from './template-driven-forms/template-driven-forms.component';
@NgModule({
declarations: [
AppComponent,
ReactiveFormsComponent,
DynamicFormsComponent,
TemplateDrivenFormsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule // 添加到應用模塊中
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
新建一個類檔案，用來承載組件與模板之間進行雙向資料系結的資料資訊
ng g class classes/hero
export class Hero {
/**
* ctor
* @param name 姓名
* @param age 年紀
* @param gender 性別
* @param location 住址
*/
constructor(public name: string, public age: number, public gender: string, public location: string) {
}
}
在組件的模板中創建承載資料的表單資訊，并使用 ngModel 完成組件與模板之間的資料雙向系結
<form>
<div >
<label for="name">姓名：</label>
<input type="text" name="name" id="name" [(ngModel)]="hero.name" autocomplete="off" required minlength="4">
</div>
<div >
<label for="age">年齡：</label>
<input type="number" name="age" id="age" [(ngModel)]="hero.age" required>
</div>
<div >
<label for="gender">性別：</label>
<div *ngFor="let gender of genders">
<input type="radio" name="gender" id="{{gender.id}}" value="https://www.cnblogs.com/danvic712/p/{{gender.value}}"
[(ngModel)]="hero.gender">
<label for="{{gender.id}}">
{{gender.text}}
</label>
</div>
</div>
<div >
<label for="location">住址：</label>
<select name="location" id="location" [(ngModel)]="hero.location" required>
<option value="https://www.cnblogs.com/danvic712/p/{{location}}" *ngFor="let location of locations">{{location}}</option>
</select>
</div>
<button type="submit" (click)="submit()" >Submit</button>
</form>
<p>
表單的資料資訊：{{hero | json}}
</p>
import { Component, OnInit } from '@angular/core';
import { Hero } from './../classes/hero';
@Component({
selector: 'app-template-driven-forms',
templateUrl: './template-driven-forms.component.html',
styleUrls: ['./template-driven-forms.component.scss']
})
export class TemplateDrivenFormsComponent implements OnInit {
constructor() { }
// 性別選項
public genders = [{
id: 'male', text: '男', value: true
}, {
id: 'female', text: '女', value: false
}];
/**
* 住址下拉
*/
public locations: Array<string> = ['beijing', 'shanghai', 'hangzhou', 'wuhan'];
hero = new Hero('', 18, 'true', 'beijing');
ngOnInit(): void {
}
submit() {
}
}
在使用 ngModel 進行模板系結時，angular 在 form 標簽上自動附加了一個 NgForm 指令，因為 NgForm 指令會控制表單中帶有 ngModel 指令和 name 屬性的元素，而 name 屬性則是 angular 用來注冊控制元件的 key，所以在表單中使用 ngModel 進行雙向資料系結時，必須要添加 name 屬性
4.2.2、跟蹤表單控制元件的狀態
在表單中使用 ngModel 之后，NgModel 指令通過更新控制元件的 css 類，達到反映控制元件狀態的目的
| 狀態 | 發生時的 css 類 | 沒發生的 css 類 |
|---|---|---|
| 控制元件被訪問 | ng-touched | ng-untouched |
| 控件的值發生變化 | ng-dirty | ng-pristine |
| 控制元件的值是否有效 | ng-valid | ng-invalid |
通過這些控制元件的 css 類樣式，就可以通過添加自定義的 css 樣式在用戶輸入內容不滿足條件時進行提示
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
4.2.3、資料的有效性驗證
某些時候需要對于用戶輸入的資訊做有效性驗證，此時可以在控制元件上添加上原生的 HTML 表單驗證器來設定驗證條件，當表單控制元件的資料發生變化時，angular 會通過指令的方式對資料進行驗證，從而生成錯誤資訊串列
在進行用戶輸入資料有效性驗證時，在控制元件上通過添加一個模板參考變數來暴露出 ngModel，從而在模板中獲取到指定控制元件的狀態資訊，之后就可以通過獲取錯誤資訊串列來進行反饋
<div >
<label for="name">姓名：</label>
<!--
將 ngModel 指令通過模板參考變數的形式暴露出來，從而獲取到控制元件的狀態
-->
<input type="text" name="name" id="name" [(ngModel)]="hero.name" autocomplete="off" required
minlength="4" #name="ngModel">
<!--
在用戶有改動資料 or 訪問控制元件之后才對資料的有效性進行驗證
-->
<div *ngIf="name.invalid && (name.dirty || name.touched)" >
<div *ngIf="name.errors.required">
姓名不能為空
</div>
<div *ngIf="name.errors.minlength">
姓名資訊不能少于 4 個字符長度
</div>
</div>
</div>
在資料驗證失敗的情況下，對于系統來說，表單是不允許提交的，因此可以將提交事件系結到表單的 ngSubmit 事件屬性上，通過模板參考變數的形式，在提交按鈕處進行資料有效性判斷，當無效時，禁用表單的提交按鈕
<form (ngSubmit)="submit()" #heroForm="ngForm">
<div >
<label for="name">姓名：</label>
<!--
將 ngModel 指令通過模板參考變數的形式暴露出來，從而獲取到控制元件的狀態
-->
<input type="text" name="name" id="name" [(ngModel)]="hero.name" autocomplete="off" required
minlength="4" #name="ngModel">
<!--
在用戶有改動資料 or 訪問控制元件之后才對資料的有效性進行驗證
-->
<div *ngIf="name.invalid && (name.dirty || name.touched)" >
<div *ngIf="name.errors.required">
姓名不能為空
</div>
<div *ngIf="name.errors.minlength">
姓名資訊不能少于 4 個字符長度
</div>
</div>
</div>
<div >
<label for="age">年齡：</label>
<input type="number" name="age" id="age" [(ngModel)]="hero.age" required>
</div>
<div >
<label for="gender">性別：</label>
<div *ngFor="let gender of genders">
<input type="radio" name="gender" id="{{gender.id}}" value="https://www.cnblogs.com/danvic712/p/{{gender.value}}"
[(ngModel)]="hero.gender">
<label for="{{gender.id}}">
{{gender.text}}
</label>
</div>
</div>
<div >
<label for="location">住址：</label>
<select name="location" id="location" [(ngModel)]="hero.location" required>
<option value="https://www.cnblogs.com/danvic712/p/{{location}}" *ngFor="let location of locations">{{location}}</option>
</select>
</div>
<button type="submit" [disabled]="!heroForm.form.valid" >Submit</button>
</form>
4.3、回應式表單
4.3.1、快速上手
回應式表單依賴于 ReactiveFormsModule 模塊，因此在使用前需要在根模塊中引入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 引入 ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsComponent } from './reactive-forms/reactive-forms.component';
@NgModule({
declarations: [
AppComponent,
ReactiveFormsComponent,
DynamicFormsComponent,
TemplateDrivenFormsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule // 添加到應用模塊中
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在使用回應式表單時，一個 FormControl 類的實體對應于一個表單控制元件，在使用時，通過將控制元件的實體賦值給屬性，后續則可以通過監聽這個自定義的屬性來跟蹤表單控制元件的值和狀態
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 物件
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
// 定義屬性用來承接 FormControl 實體
public name = new FormControl('');
constructor() { }
ngOnInit(): void {
}
}
當在組件中創建好控制元件實體后，通過給視圖模板上的表單控制元件添加 formControl 屬性系結，從而將控制元件實體與模板中的表單控制元件關聯起來
<form>
<div >
<label for="name">姓名：</label>
<input type="text" id="name" [formControl]='name' autocomplete="off">
</div>
</form>
<div>
name 控制元件的資料值： {{ name | json }}
</div>
通過使用 FormControl 控制元件的 value 屬性，可以獲得當前表單控制元件的一份資料值拷貝，通過 setValue 方法則可以更新表單的控制元件值
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 物件
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
// 定義屬性用來承接 FormControl 實體
public name = new FormControl('12345');
constructor() { }
ngOnInit(): void {
}
getName() {
alert(this.name.value);
}
setName() {
this.name.setValue(1111111);
}
}
4.3.2、通過 FomGroup 組合多個控制元件
一個表單不可能只有一個控制元件，通過在組件中構造 FormGroup 實體來完成對于多個表單控制元件的統一管理
在使用 FormGroup 時，同樣在組件中定義一個屬性用來承載控制元件組實體，然后將控制元件組中的每一個控制元件作為屬性值添加到實體中
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 和 FormGroup 物件
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
// 定義物件屬性來承接 FormGroup 實體
public profileForm = new FormGroup({
name: new FormControl('啦啦啦'),
age: new FormControl(12)
});
constructor() { }
ngOnInit(): void {
}
}
在視圖模板中，將承接 FormGroup 實體的屬性通過 formGroup 指令系結到 form 元素，然后將控制元件組的每一個屬性通過 formControlName 系結到具體對應的表單控制元件上
<form [formGroup]='profileForm'>
<div >
<label for="name">姓名：</label>
<input type="text" id="name" formControlName='name' autocomplete="off" required minlength="4">
</div>
<div >
<label for="age">年齡：</label>
<input type="number" id="age" formControlName='age' autocomplete="off" required step="1"
max="100" min="1">
</div>
</form>
<div>
FormGroup 表單組控制元件的值： {{ profileForm.value | json }}
</div>
當構建復雜表單時，可以在 FormGroup 中通過嵌套 FormGroup 使表單的結構更合理
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 和 FormGroup 物件
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
// 定義物件屬性來承接 FormGroup 實體
public profileForm = new FormGroup({
name: new FormControl('啦啦啦'),
age: new FormControl(12),
address: new FormGroup({
province: new FormControl('北京市'),
city: new FormControl('北京'),
district: new FormControl('朝陽區'),
street: new FormControl('三里屯街道')
})
});
constructor() { }
ngOnInit(): void {
}
submit() {
alert(JSON.stringify(this.profileForm.value));
}
}
在視圖模板中，通過使用 formGroupName 屬性將 FormGroup 控制元件組中的 FormGroup 實體系結到控制元件上
<form [formGroup]='profileForm' (ngSubmit)='submit()'>
<div >
<label for="name">姓名：</label>
<input type="text" id="name" formControlName='name' autocomplete="off" required minlength="4">
</div>
<div >
<label for="age">年齡：</label>
<input type="number" id="age" formControlName='age' autocomplete="off" required step="1"
max="100" min="1">
</div>
<div formGroupName='address'>
<div >
<label for="province">省：</label>
<input type="text" id="province" formControlName='province' autocomplete="off" required>
</div>
<div >
<label for="city">市：</label>
<input type="text" id="city" formControlName='city' autocomplete="off" required>
</div>
<div >
<label for="district">區：</label>
<input type="text" id="district" formControlName='district' autocomplete="off" required>
</div>
<div >
<label for="street">街道：</label>
<input type="text" id="street" formControlName='street' autocomplete="off" required>
</div>
</div>
<button type="submit" [disabled]="!profileForm.valid">資料提交</button>
</form>
<div>
FormGroup 表單組控制元件的值： {{ profileForm.value | json }}
</div>
對于使用了 FormGroup 的表單來說，當使用 setValue 進行資料更新時，必須保證新的資料結構與原來的結構相同，否則就會報錯
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 和 FormGroup 物件
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
// 定義物件屬性來承接 FormGroup 實體
public profileForm = new FormGroup({
name: new FormControl('啦啦啦'),
age: new FormControl(12),
address: new FormGroup({
province: new FormControl('北京市'),
city: new FormControl('北京'),
district: new FormControl('朝陽區'),
street: new FormControl('三里屯街道')
})
});
constructor() { }
ngOnInit(): void {
}
submit() {
alert(JSON.stringify(this.profileForm.value));
}
updateProfile() {
this.profileForm.setValue({
name: '423'
});
}
}
某些情況下，我們只是想要更新控制元件組中的某個控制元件的資料值，這時需要使用 patchValue 的方式進行更新
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 和 FormGroup 物件
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
// 定義物件屬性來承接 FormGroup 實體
public profileForm = new FormGroup({
name: new FormControl('啦啦啦'),
age: new FormControl(12),
address: new FormGroup({
province: new FormControl('北京市'),
city: new FormControl('北京'),
district: new FormControl('朝陽區'),
street: new FormControl('三里屯街道')
})
});
constructor() { }
ngOnInit(): void {
}
submit() {
alert(JSON.stringify(this.profileForm.value));
}
updateProfile() {
this.profileForm.patchValue({
name: '12345'
});
}
}
4.3.3、使用 FormBuilder 生成表單控制元件
當控制元件過多時，通過 FormGroup or FormControl 手動的構建表單控制元件的方式會很麻煩，因此這里可以通過依賴注入 FormBuilder 類的方式來簡化的完成表單的構建
FormBuilder 服務有三個方法：control、group 和 array，用于在組件類中分別生成 FormControl、FormGroup 和 FormArray
使用 FormBuilder 構建的控制元件，每個控制元件名對應的值都是一個陣列，第一個值為控制元件的默認值，第二項和第三項則是針對這個值設定的同步、異步驗證方法
import { Component, OnInit } from '@angular/core';
// 引入 FormBuilder 構建表單控制元件
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
/**
* ctor
* @param formBuilder 表單構造器
*/
constructor(private formBuilder: FormBuilder) { }
public profileForm = this.formBuilder.group({
name: ['啦啦啦'],
age: [12],
address: this.formBuilder.group({
province: ['北京市'],
city: ['北京'],
district: ['朝陽區'],
street: ['三里屯街道']
})
});
ngOnInit(): void {
}
}
4.3.4、資料的有效性驗證
同模板驅動表單的資料有效性驗證相同，在回應式表單中同樣可以使用原生的表單驗證器，在設定規則時，需要將模板中控制元件名對應的資料值的第二個引數改為驗證的規則
在回應式表單中，資料源來源于組件類，因此應該在組件類中直接把驗證器函式添加到對應的 FormControl 的建構式上，然后，一旦控制元件資料發生了變化，angular 就會呼叫這些函式
這里創建針對指定控制元件的 getter 方法，從而在模板中通過此方法來獲取到指定控制元件的狀態資訊
import { Component, OnInit } from '@angular/core';
// 引入 FormBuilder 構建表單控制元件
import { FormBuilder } from '@angular/forms';
// 引入 Validators 驗證器
import { Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
/**
* ctor
* @param formBuilder 表單構造器
*/
constructor(private formBuilder: FormBuilder) { }
public profileForm = this.formBuilder.group({
name: ['', [
Validators.required,
Validators.minLength(4)
]],
age: [12],
address: this.formBuilder.group({
province: ['北京市'],
city: ['北京'],
district: ['朝陽區'],
street: ['三里屯街道']
})
});
// 添加需要驗證控制元件 getter 方法，用來在模板中獲取狀態值
get name() {
return this.profileForm.get('name');
}
ngOnInit(): void {
}
}
<form [formGroup]='profileForm' (ngSubmit)='submit()'>
<div >
<label for="name">姓名：</label>
<input type="text" id="name" formControlName='name' autocomplete="off" required minlength="4">
<!--
在用戶有改動資料 or 訪問控制元件之后才對資料的有效性進行驗證
-->
<div *ngIf="name.invalid && (name.dirty || name.touched)" >
<div *ngIf="name.errors.required">
姓名不能為空
</div>
<div *ngIf="name.errors.minlength">
姓名資訊不能少于 4 個字符長度
</div>
</div>
</div>
<div >
<label for="age">年齡：</label>
<input type="number" id="age" formControlName='age' autocomplete="off" required step="1"
max="100" min="1">
</div>
<div formGroupName='address'>
<div >
<label for="province">省：</label>
<input type="text" id="province" formControlName='province' autocomplete="off" required>
</div>
<div >
<label for="city">市：</label>
<input type="text" id="city" formControlName='city' autocomplete="off" required>
</div>
<div >
<label for="district">區：</label>
<input type="text" id="district" formControlName='district' autocomplete="off" required>
</div>
<div >
<label for="street">街道：</label>
<input type="text" id="street" formControlName='street' autocomplete="off" required>
</div>
</div>
<button type="button" (click)="updateProfile()">更新資訊</button>
<button type="submit" [disabled]="!profileForm.valid">資料提交</button>
</form>
<div>
FormGroup 表單組控制元件的值： {{ profileForm.value | json }}
</div>
4.4、表單的自定義資料驗證
4.4.1、自定義驗證器
在很多的情況下，原生的驗證規則無法滿足我們的需要，此時需要創建自定義的驗證器來實作
對于回應式表單，我們可以定義一個方法，對控制元件的資料進行校驗，之后將方法作為引數添加到控制元件定義處即可
import { Component, OnInit } from '@angular/core';
// 引入 FormBuilder 構建表單控制元件
import { FormBuilder } from '@angular/forms';
// 引入 Validators 驗證器
import { Validators } from '@angular/forms';
/**
* 自定義驗證方法
* @param name 控制元件資訊
*/
function validatorName(name: FormControl) {
return name.value =https://www.cnblogs.com/danvic712/p/=='lala' ? { nameinvalid: true } : null;
}
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
/**
* ctor
* @param formBuilder 表單構造器
*/
constructor(private formBuilder: FormBuilder) { }
public profileForm = this.formBuilder.group({
name: ['', [
Validators.required,
Validators.minLength(4),
validatorName // 添加自定義驗證方法
]],
age: [12],
address: this.formBuilder.group({
province: ['北京市'],
city: ['北京'],
district: ['朝陽區'],
street: ['三里屯街道']
})
});
// 添加需要驗證控制元件 getter 方法，用來在模板中獲取狀態值
get name() {
return this.profileForm.get('name');
}
ngOnInit(): void {
}
}
在驗證方法中，當資料有效時，回傳 null，當資料無效時，則會回傳一個物件資訊，這里的 nameinvalid 就是我們在模板中獲取到的錯誤資訊的 key 值
<div >
<label for="name">姓名：</label>
<input type="text" id="name" formControlName='name' autocomplete="off" required minlength="4">
<!--
在用戶有改動資料 or 訪問控制元件之后才對資料的有效性進行驗證
-->
<div *ngIf="name.invalid && (name.dirty || name.touched)" >
<div *ngIf="name.errors.required">
姓名不能為空
</div>
<div *ngIf="name.errors.minlength">
姓名資訊不能少于 4 個字符長度
</div>
<div *ngIf="name.errors.nameinvalid">
姓名無效
</div>
</div>
</div>
在模板驅動表單中，因為不是直接使用的 FormControl 實體，因此這里應該在模板上添加一個自定義的指令來完成對于控制元件資料的校驗
使用 angular cli 創建一個用來進行表單驗證的指令
ng g directive direactives/hero-validate
在創建完成指令之后，我們需要將這個指令將該驗證器添加到已經存在的驗證器集合中，同時為了使這個指令可以與 angular 表單集成在一起，我們需要繼承 Validator 介面
import { Directive, Input } from '@angular/core';
import { AbstractControl, Validator, ValidationErrors, NG_VALIDATORS } from '@angular/forms';
@Directive({
selector: '[appHeroValidate]',
// 將指令注冊到 NG_VALIDATORS 使用 multi: true 將該驗證器添加到現存的驗證器集合中
providers: [{ provide: NG_VALIDATORS, useExisting: HeroValidateDirective, multi: true }]
})
export class HeroValidateDirective implements Validator {
constructor() { }
/**
* 對指定的控制元件執行同步驗證方法
* @param control 控制元件
*/
validate(control: AbstractControl): ValidationErrors | null {
return control.value =https://www.cnblogs.com/danvic712/p/=='lala' ? { 'nameInvalid': true } : null;
}
}
當實作了繼承的 validate 方法后，就可以在模板的控制元件上添加該指令
<div >
<label for="name">姓名：</label>
<!--
將 ngModel 指令通過模板參考變數的形式暴露出來，從而獲取到控制元件的狀態
-->
<input type="text" name="name" id="name" [(ngModel)]="hero.name" autocomplete="off" required
minlength="4" #name="ngModel" appHeroValidate>
<!--
在用戶有改動資料 or 訪問控制元件之后才對資料的有效性進行驗證
-->
<div *ngIf="name.invalid && (name.dirty || name.touched)" >
<div *ngIf="name.errors.required">
姓名不能為空
</div>
<div *ngIf="name.errors.minlength">
姓名資訊不能少于 4 個字符長度
</div>
<div *ngIf="name.errors.nameInvalid">
姓名無效
</div>
</div>
</div>
4.4.2、跨欄位的交叉驗證
有時候需要針對表單中的多個控制元件資料進行交叉驗證，此時就需要針對整個 FormGroup 進行驗證，因此這里的驗證方法需要在定義控制元件組時作為 FormGroup 的引數傳入
與單個欄位的驗證方式相似，通過實作 ValidatorFn 介面，當表單資料有效時，它回傳一個 null，否則回傳 ValidationErrors 物件
import { Component, OnInit } from '@angular/core';
// 引入 FormControl 和 FormGroup 物件
import { FormControl, FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
// 引入 FormBuilder 構建表單控制元件
import { FormBuilder } from '@angular/forms';
// 引入 Validators 驗證器
import { Validators } from '@angular/forms';
/**
* 跨欄位驗證
* @param controlGroup 控制元件組
*/
const nameAgeCrossValidator: ValidatorFn = (controlGroup: FormGroup): ValidationErrors | null => {
// 獲取子控制元件的資訊
//
const name = controlGroup.get('name');
const age = controlGroup.get('age');
return name && age && name.value =https://www.cnblogs.com/danvic712/p/=='lala' && age.value =https://www.cnblogs.com/danvic712/p/== 12 ? {'nameAgeInvalid': true } : null;
};
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.scss']
})
export class ReactiveFormsComponent implements OnInit {
/**
* ctor
* @param formBuilder 表單構造器
*/
constructor(private formBuilder: FormBuilder) { }
public profileForm = this.formBuilder.group({
name: ['', [
Validators.required,
Validators.minLength(4),
validatorName
]],
age: [12],
address: this.formBuilder.group({
province: ['北京市'],
city: ['北京'],
district: ['朝陽區'],
street: ['三里屯街道']
})
}, { validators: [nameAgeCrossValidator] }); // 添加針對控制元件組的驗證器
ngOnInit(): void {
}
}
在針對多個欄位進行交叉驗證時，在模板頁面中，則需要通過獲取整個表單的錯誤物件資訊來獲取到交叉驗證的錯誤資訊
<div >
<label for="name">姓名：</label>
<input type="text" id="name" formControlName='name' autocomplete="off" required minlength="4">
<!--
在用戶有改動資料 or 訪問控制元件之后才對資料的有效性進行驗證
-->
<div *ngIf="name.invalid && (name.dirty || name.touched)" >
<div *ngIf="name.errors.required">
姓名不能為空
</div>
<div *ngIf="name.errors.minlength">
姓名資訊不能少于 4 個字符長度
</div>
<div *ngIf="name.errors.nameinvalid">
姓名無效
</div>
</div>
</div>
<div >
<label for="age">年齡：</label>
<input type="number" id="age" formControlName='age' autocomplete="off" required step="1"
max="100" min="1">
<div *ngIf="profileForm.errors?.nameAgeInvalid && (profileForm.touched || profileForm.dirty)"
>
lala 不能是 12 歲
</div>
</div>
對于模板驅動表單，同樣是采用自定義指令的方式進行跨欄位的交叉驗證，與單個控制元件的驗證不同，此時需要將指令添加到 form 標簽上，然后使用模板參考變數來獲取錯誤資訊
import { Directive } from '@angular/core';
import { Validator, AbstractControl, ValidationErrors, ValidatorFn, FormGroup, NG_VALIDATORS } from '@angular/forms';
/**
* 跨欄位驗證
* @param controlGroup 控制元件組
*/
const nameAgeCrossValidator: ValidatorFn = (controlGroup: FormGroup): ValidationErrors | null => {
// 獲取子控制元件的資訊
//
const name = controlGroup.get('name');
const age = controlGroup.get('age');
return name && age && name.value =https://www.cnblogs.com/danvic712/p/=='lala' && age.value =https://www.cnblogs.com/danvic712/p/== 12 ? {'nameAgeInvalid': true } : null;
};
@Directive({
selector: '[appCrossFieldValidate]',
providers: [{ provide: NG_VALIDATORS, useExisting: CrossFieldValidateDirective, multi: true }]
})
export class CrossFieldValidateDirective implements Validator {
constructor() { }
validate(control: AbstractControl): ValidationErrors | null {
return nameAgeCrossValidator(control);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/144620.html
標籤：JavaScript
上一篇：js 垃圾回識訓制