本篇文章帶大家了解一下angular中的表單，聊聊響應(yīng)式表單與模板驅(qū)動(dòng)表單，介紹一下響應(yīng)式表單怎么驗(yàn)證表單輸入，希望對(duì)大家有所幫助！

一、angular表單簡(jiǎn)介

Angular 提供了兩種不同的方法來通過表單處理用戶輸入：響應(yīng)式表單和模板驅(qū)動(dòng)表單。 兩者都從視圖中捕獲用戶輸入事件、驗(yàn)證用戶輸入、創(chuàng)建表單模型、修改數(shù)據(jù)模型，并提供跟蹤這些更改的途徑?！鞠嚓P(guān)教程推薦：《angular教程》】

1.1 響應(yīng)式表單與模板驅(qū)動(dòng)表單的差異

• 響應(yīng)式表單提供對(duì)底層表單對(duì)象模型直接、顯式的訪問。它們與模板驅(qū)動(dòng)表單相比，更加健壯：它們的可擴(kuò)展性、可復(fù)用性和可測(cè)試性都更高。如果表單是你的應(yīng)用程序的關(guān)鍵部分，或者你已經(jīng)在使用響應(yīng)式表單來構(gòu)建應(yīng)用，那就使用響應(yīng)式表單。
• 模板驅(qū)動(dòng)表單依賴模板中的指令來創(chuàng)建和操作底層的對(duì)象模型。它們對(duì)于向應(yīng)用添加一個(gè)簡(jiǎn)單的表單非常有用，比如電子郵件列表注冊(cè)表單。它們很容易添加到應(yīng)用中，但在擴(kuò)展性方面不如響應(yīng)式表單。如果你有可以只在模板中管理的非?；镜谋韱涡枨蠛瓦壿嫞敲茨０弪?qū)動(dòng)表單就很合適。

1.2 建立表單模型

響應(yīng)式表單和模板驅(qū)動(dòng)型表單都會(huì)跟蹤用戶與之交互的表單輸入元素和組件模型中的表單數(shù)據(jù)之間的值變更。這兩種方法共享同一套底層構(gòu)建塊，只在如何創(chuàng)建和管理常用表單控件實(shí)例方面有所不同。

1.3 常用表單基礎(chǔ)類

響應(yīng)式表單和模板驅(qū)動(dòng)表單都建立在下列基礎(chǔ)類之上。

• FormControl 實(shí)例用于追蹤單個(gè)表單控件的值和驗(yàn)證狀態(tài)。
• FormGroup 用于追蹤一個(gè)表單控件組的值和狀態(tài)。
• FormArray 用于追蹤表單控件數(shù)組的值和狀態(tài)。
• ControlValueAccessor 用于在 Angular 的 FormControl 實(shí)例和原生 DOM 元素之間創(chuàng)建一個(gè)橋梁。

二、 響應(yīng)式表單

響應(yīng)式表單使用顯式的、不可變的方式，管理表單在特定的時(shí)間點(diǎn)上的狀態(tài)。對(duì)表單狀態(tài)的每一次變更都會(huì)返回一個(gè)新的狀態(tài)，這樣可以在變化時(shí)維護(hù)模型的整體性。響應(yīng)式表單是圍繞 Observable 流構(gòu)建的，表單的輸入和值都是通過這些輸入值組成的流來提供的，它可以同步訪問。

2.1 添加基礎(chǔ)表單控件

使用表單控件有三個(gè)步驟。

• 在你的應(yīng)用中注冊(cè)響應(yīng)式表單模塊。該模塊聲明了一些你要用在響應(yīng)式表單中的指令。

• 生成一個(gè)新的 FormControl 實(shí)例，并把它保存在組件中。

• 在模板中注冊(cè)這個(gè) FormControl。

要使用響應(yīng)式表單控件，就要從 @angular/forms 包中導(dǎo)入 ReactiveFormsModule，并把它添加到你的 NgModule 的 imports 數(shù)組中。

import { ReactiveFormsModule } from '@angular/forms';  @NgModule({   imports: [     // other imports ...     ReactiveFormsModule   ], }) export class AppModule { }

要注冊(cè)一個(gè)表單控件，就要導(dǎo)入 FormControl 類并創(chuàng)建一個(gè) FormControl 的新實(shí)例，將其保存為類的屬性。

import { Component } from '@angular/core'; import { FormControl } from '@angular/forms';  @Component({   selector: 'app-name-editor',   templateUrl: './name-editor.component.html',   styleUrls: ['./name-editor.component.css'] }) export class NameEditorComponent {   name = new FormControl(''); }

可以用 FormControl 的構(gòu)造函數(shù)設(shè)置初始值，這個(gè)例子中它是空字符串。通過在你的組件類中創(chuàng)建這些控件，你可以直接對(duì)表單控件的狀態(tài)進(jìn)行監(jiān)聽、修改和校驗(yàn)。

在組件類中創(chuàng)建了控件之后，你還要把它和模板中的一個(gè)表單控件關(guān)聯(lián)起來。修改模板，為表單控件添加 formControl 綁定，formControl 是由 ReactiveFormsModule 中的 FormControlDirective 提供的。

<label>   Name:   <input type="text" [formControl]="name"> </label>

2.2 顯示表單控件的值

你可以用下列方式顯示它的值：

• 通過可觀察對(duì)象 valueChanges，你可以在模板中使用 AsyncPipe 或在組件類中使用 subscribe() 方法來監(jiān)聽表單值的變化。
• 使用 value 屬性。它能讓你獲得當(dāng)前值的一份快照。

<label>   Name:   <input type="text" [formControl]="name"> </label> <p>Value: {{ name.value }}</p>

  public name = new FormControl('test');    public testValueChange() {     this.name.valueChanges.subscribe({       next: value => {         console.log("name value is: " + value);       }     })   }

2.3 替換表單控件的值

響應(yīng)式表單還有一些方法可以用編程的方式``修改控件的值，它讓你可以靈活的修改控件的值而不需要借助用戶交互。FormControl 提供了一個(gè) setValue() 方法，它會(huì)修改這個(gè)表單控件的值，并且驗(yàn)證與控件結(jié)構(gòu)相對(duì)應(yīng)的值的結(jié)構(gòu)。比如，當(dāng)從后端 API 或服務(wù)接收到了表單數(shù)據(jù)時(shí)，可以通過 setValue() 方法來把原來的值替換為新的值。

updateName() {   this.name.setValue('Nancy' + new Date().getTime()); }

<p>   <button (click)="updateName()">Update Name</button> </p>

2.4 把表單控件分組

表單中通常會(huì)包含幾個(gè)相互關(guān)聯(lián)的控件。響應(yīng)式表單提供了兩種把多個(gè)相關(guān)控件分組到同一個(gè)輸入表單中的方法。

• 表單組定義了一個(gè)帶有一組控件的表單，你可以把它們放在一起管理。表單組的基礎(chǔ)知識(shí)將在本節(jié)中討論。你也可以通過嵌套表單組來創(chuàng)建更復(fù)雜的表單。
• 表單數(shù)組定義了一個(gè)動(dòng)態(tài)表單，你可以在運(yùn)行時(shí)添加和刪除控件。你也可以通過嵌套表單數(shù)組來創(chuàng)建更復(fù)雜的表單

要將表單組添加到此組件中，請(qǐng)執(zhí)行以下步驟。

• 創(chuàng)建一個(gè) FormGroup 實(shí)例。

• 把這個(gè) FormGroup 模型關(guān)聯(lián)到視圖。

• 保存表單數(shù)據(jù)。

在組件類中創(chuàng)建一個(gè)名叫 profileForm 的屬性，并設(shè)置為 FormGroup 的一個(gè)新實(shí)例。要初始化這個(gè) FormGroup，請(qǐng)為構(gòu)造函數(shù)提供一個(gè)由控件組成的對(duì)象，對(duì)象中的每個(gè)名字都要和表單控件的名字一一對(duì)應(yīng)。

import { FormControl, FormGroup } from '@angular/forms';   profileForm = new FormGroup({     firstName: new FormControl(''),     lastName: new FormControl(''),   });   // 可以整個(gè)獲取值   public onSubmit() {     // TODO: Use EventEmitter with form value     console.warn(this.profileForm.value);// {firstName: "", lastName: ""}   }       // 可以借助 valueChanges 整個(gè)可觀察對(duì)象整個(gè)獲取值      this.profileForm.valueChanges.subscribe( {       next: value => {         console.log("name value is: " + JSON.stringify(value)); // dashboard.component.ts:53 name value is: {"firstName":"dddd","lastName":"bb"}       }     })      // 可以通過后期單個(gè)控件單獨(dú)獲取值     this.profileForm.get('firstName').valueChanges.subscribe({       next: value => {         console.log("First Name is: " + value); // First Name is: aa       }

ps: 這個(gè) FormGroup 用對(duì)象的形式提供了它的模型值，這個(gè)值來自組中每個(gè)控件的值。 FormGroup 實(shí)例擁有和 FormControl 實(shí)例相同的屬性（比如 value、untouched）和方法（比如 setValue()）。

這個(gè)表單組還能跟蹤其中每個(gè)控件的狀態(tài)及其變化，所以如果其中的某個(gè)控件的狀態(tài)或值變化了，父控件也會(huì)發(fā)出一次新的狀態(tài)變更或值變更事件。該控件組的模型來自它的所有成員。在定義了這個(gè)模型之后，你必須更新模板，來把該模型反映到視圖中。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">     <label>     First Name:     <input type="text" formControlName="firstName">   </label>    <label>     Last Name:     <input type="text" formControlName="lastName">   </label>    <button type="submit" [disabled]="!profileForm.valid">Submit</button> </form>

2.5 創(chuàng)建嵌套的表單組

表單組可以同時(shí)接受單個(gè)表單控件實(shí)例和其它表單組實(shí)例作為其子控件。這可以讓復(fù)雜的表單模型更容易維護(hù)，并在邏輯上把它們分組到一起。
要制作更復(fù)雜的表單，請(qǐng)遵循如下步驟。

• 創(chuàng)建一個(gè)嵌套的表單組

• 板中對(duì)這個(gè)嵌套表單分組。

要在 profileForm 中創(chuàng)建一個(gè)嵌套組，就要把一個(gè)嵌套的 address 元素添加到此表單組的實(shí)例中。

  public profileForm = new FormGroup({     firstName: new FormControl(''),     lastName: new FormControl(''),     address: new FormGroup({       street: new FormControl(''),       city: new FormControl(''),       state: new FormControl(''),       zip: new FormControl('')     })   });     // 可以借助 valueChanges 整個(gè)可觀察對(duì)象整個(gè)獲取值     this.profileForm.valueChanges.subscribe( {       next: value => {         console.log("name value is: " + JSON.stringify(value));// name value is: {"firstName":"","lastName":"","address":{"street":"b","city":"","state":"","zip":""}}       }     });      // 可以通過后期單個(gè)控件單獨(dú)獲取值     this.profileForm.get('firstName').valueChanges.subscribe({       next: value => {         console.log("First Name is: " + value);       }     });      // 可以獲取form組件某個(gè)form組的整個(gè)值     this.profileForm.get('address').valueChanges.subscribe(({       next: value => {         console.log('address value is: ' + JSON.stringify(value));// address value is: {"street":"b","city":"","state":"","zip":""}       }     }));      // 可以獲取form組件某個(gè)form組的某個(gè)formcontrol實(shí)例的值     this.profileForm.get('address').get('street').valueChanges.subscribe(({       next: value => {         console.log('street value is: ' + value);// street value is: b       }     }));

在修改了組件類中的模型之后，還要修改模板，來把這個(gè) FormGroup 實(shí)例對(duì)接到它的輸入元素。

      <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">          <label>           First Name:           <input type="text" formControlName="firstName">         </label>          <label>           Last Name:           <input type="text" formControlName="lastName">         </label>         <div formGroupName="address">           <h3>Address</h3>            <label>             Street:             <input type="text" formControlName="street">           </label>            <label>             City:             <input type="text" formControlName="city">           </label>            <label>             State:             <input type="text" formControlName="state">           </label>            <label>             Zip Code:             <input type="text" formControlName="zip">           </label>         </div>         <button type="submit" [disabled]="!profileForm.valid">Submit</button>       </form>

2.6 更新部分?jǐn)?shù)據(jù)模型

當(dāng)修改包含多個(gè) FormGroup 實(shí)例的值時(shí)，你可能只希望更新模型中的一部分，而不是完全替換掉。

有兩種更新模型值的方式：

• 使用 setValue() 方法來為單個(gè)控件設(shè)置新值。 setValue() 方法會(huì)嚴(yán)格遵循表單組的結(jié)構(gòu)，并整體性替換控件的值。
• 使用 patchValue() 方法可以用對(duì)象中所定義的任何屬性為表單模型進(jìn)行替換。

setValue() 方法的嚴(yán)格檢查可以幫助你捕獲復(fù)雜表單嵌套中的錯(cuò)誤，而 patchValue() 在遇到那些錯(cuò)誤時(shí)可能會(huì)默默的失敗。

  public updateProfile() {       // profileForm 模型中只有 firstName 和 street 被修改了。注意，street 是在 address 屬性的對(duì)象中被修改的。這種結(jié)構(gòu)是必須的，因?yàn)?patchValue() 方法要針對(duì)模型的結(jié)構(gòu)進(jìn)行更新。patchValue() 只會(huì)更新表單模型中所定義的那些屬性。     this.profileForm.patchValue({       firstName: 'Nancy' + new Date().getTime(),       address: {         street: '123 Drew Street' + new Date().getTime()       }     });      // ERROR Error: Must supply a value for form control with name: 'lastName'.     // setValue() 方法會(huì)嚴(yán)格遵循表單組的結(jié)構(gòu)     this.profileForm.setValue({       firstName: 'Nancy' + new Date().getTime(),       address: {         street: '123 Drew Street' + new Date().getTime()       }     });   }

2.7 創(chuàng)建動(dòng)態(tài)表單

FormArray 是 FormGroup 之外的另一個(gè)選擇，用于管理任意數(shù)量的匿名控件。像 FormGroup 實(shí)例一樣，你也可以往 FormArray 中動(dòng)態(tài)插入和移除控件，并且 FormArray 實(shí)例的值和驗(yàn)證狀態(tài)也是根據(jù)它的子控件計(jì)算得來的。 不過，你不需要為每個(gè)控件定義一個(gè)名字作為 key，因此，如果你事先不知道子控件的數(shù)量，這就是一個(gè)很好的選擇。

要定義一個(gè)動(dòng)態(tài)表單，請(qǐng)執(zhí)行以下步驟。

• 導(dǎo)入 FormArray 類。

• 定義一個(gè) FormArray 控件。

• 使用 getter 方法訪問 FormArray 控件。

• 在模板中顯示這個(gè)表單數(shù)組

通過把一組（從零項(xiàng)到多項(xiàng)）控件定義在一個(gè)數(shù)組中來初始化一個(gè) FormArray。為 profileForm 添加一個(gè) aliases 屬性，把它定義為 FormArray 類型。

import { FormControl, FormGroup, FormArray } from '@angular/forms';    public profileForm = new FormGroup({     firstName: new FormControl(''),     lastName: new FormControl(''),     address: new FormGroup({       street: new FormControl(''),       city: new FormControl(''),       state: new FormControl(''),       zip: new FormControl('')     }),     aliases: new FormArray([       new FormControl('1')     ])   });   public aliases = (<FormArray>this.profileForm.get('aliases'));    public addAlias() {     (<FormArray>this.profileForm.get('aliases')).push(new FormControl('1'));   }        // 獲取整個(gè) formArray 的數(shù)據(jù)     this.profileForm.get('aliases').valueChanges.subscribe({       next: value => {         console.log('aliases values is: ' + JSON.stringify(value)); // aliases values is: ["1","3"]       }     });      // 獲取 formArray 中單個(gè) formControl 的數(shù)據(jù)     (<FormArray>this.profileForm.get('aliases')).controls[0].valueChanges.subscribe({       next: value => {         console.log('aliases[0] values is: ' + value); // aliases[0] values is: 0       }     })

要想為表單模型添加 aliases，你必須把它加入到模板中供用戶輸入。和 FormGroupNameDirective 提供的 formGroupName 一樣，F(xiàn)ormArrayNameDirective 也使用 formArrayName 在這個(gè) FormArray 實(shí)例和模板之間建立綁定

      <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">          <label>           First Name:           <input type="text" formControlName="firstName">         </label>          <label>           Last Name:           <input type="text" formControlName="lastName">         </label>         <div formGroupName="address">           <h3>Address</h3>            <label>             Street:             <input type="text" formControlName="street">           </label>            <label>             City:             <input type="text" formControlName="city">           </label>            <label>             State:             <input type="text" formControlName="state">           </label>            <label>             Zip Code:             <input type="text" formControlName="zip">           </label>         </div>         <div formArrayName="aliases">           <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>            <div *ngFor="let alias of aliases.controls; let i=index">             <!-- The repeated alias template -->             <label>               Alias:               <input type="text" [formControlName]="i">             </label>           </div>         </div>       </form>

2.8 響應(yīng)式表單 API 匯總

三、模板驅(qū)動(dòng)表單

在模板驅(qū)動(dòng)表單中，表單模型是隱式的，而不是顯式的。指令 NgModel 為指定的表單元素創(chuàng)建并管理一個(gè) FormControl 實(shí)例。
下面的組件使用模板驅(qū)動(dòng)表單為單個(gè)控件實(shí)現(xiàn)了同樣的輸入字段。

import { Component } from '@angular/core';  @Component({   selector: 'app-template-favorite-color',   template: `     Favorite Color: <input type="text" [(ngModel)]="favoriteColor">   ` }) export class FavoriteColorComponent {   favoriteColor = ''; }

四、響應(yīng)式表單驗(yàn)證表單輸入

在組件類中直接把驗(yàn)證器函數(shù)添加到表單控件模型上（FormControl）。然后，一旦控件發(fā)生了變化，Angular 就會(huì)調(diào)用這些函數(shù)。

4.1 驗(yàn)證器（Validator）函數(shù)

驗(yàn)證器函數(shù)可以是同步函數(shù)，也可以是異步函數(shù)。

• 同步驗(yàn)證器：這些同步函數(shù)接受一個(gè)控件實(shí)例，然后返回一組驗(yàn)證錯(cuò)誤或 null。你可以在實(shí)例化一個(gè) FormControl 時(shí)把它作為構(gòu)造函數(shù)的第二個(gè)參數(shù)傳進(jìn)去。
• 異步驗(yàn)證器 ：這些異步函數(shù)接受一個(gè)控件實(shí)例并返回一個(gè) Promise 或 Observable，它稍后會(huì)發(fā)出一組驗(yàn)證錯(cuò)誤或 null。在實(shí)例化 FormControl 時(shí)，可以把它們作為第三個(gè)參數(shù)傳入。

出于性能方面的考慮，只有在所有同步驗(yàn)證器都通過之后，Angular 才會(huì)運(yùn)行異步驗(yàn)證器。當(dāng)每一個(gè)異步驗(yàn)證器都執(zhí)行完之后，才會(huì)設(shè)置這些驗(yàn)證錯(cuò)誤。

4.2 內(nèi)置驗(yàn)證器函數(shù)

在模板驅(qū)動(dòng)表單中用作屬性的那些內(nèi)置驗(yàn)證器，比如 required 和 minlength，也都可以作為 Validators 類中的函數(shù)使用

 public profileForm = new FormGroup({     firstName: new FormControl('', [       Validators.required     ]),   });      this.profileForm.get('firstName').valueChanges.subscribe({       next: value => {         console.log("First Name is: " + value);         console.log(this.profileForm.get('firstName').errors);// { required: true } | null       }     });

      <form [formGroup]="profileForm">          <label>           First Name:           <input type="text" formControlName="firstName">           <div *ngIf="firstName.errors?.required">             Name is required.           </div>         </label>     </form>

4.3 定義自定義驗(yàn)證器

內(nèi)置的驗(yàn)證器并不是總能精確匹配應(yīng)用中的用例，因此有時(shí)你需要?jiǎng)?chuàng)建一個(gè)自定義驗(yàn)證器。

  public profileForm = new FormGroup({     firstName: new FormControl('', [       Validators.required,       this.forbiddenNameValidator(/bob/i)     ])   });    public forbiddenNameValidator(nameRe: RegExp): ValidatorFn {     return (control: AbstractControl): {[key: string]: any} | null => {       const forbidden = nameRe.test(control.value);       return forbidden ? {forbiddenName: {value: control.value}} : null;     };   }    get firstName() { return this.profileForm.get('firstName'); }          this.profileForm.get('firstName').valueChanges.subscribe({       next: value => {         console.log("First Name is: " + value); // First Name is: bob         console.log(JSON.stringify(this.profileForm.get('firstName').errors));// {"forbiddenName":{"value":"bob"}} | null       }     });

4.4 跨字段交叉驗(yàn)證

跨字段交叉驗(yàn)證器是一種自定義驗(yàn)證器，可以對(duì)表單中不同字段的值進(jìn)行比較，并針對(duì)它們的組合進(jìn)行接受或拒絕。

下列交叉驗(yàn)證的例子說明了如何進(jìn)行如下操作：

• 根據(jù)兩個(gè)兄弟控件的值驗(yàn)證響應(yīng)式表單或模板驅(qū)動(dòng)表單的輸入，
• 當(dāng)用戶與表單交互過，且驗(yàn)證失敗后，就會(huì)顯示描述性的錯(cuò)誤信息

要想在單個(gè)自定義驗(yàn)證器中計(jì)算這兩個(gè)控件，你就必須在它們共同的祖先控件中執(zhí)行驗(yàn)證： FormGroup。你可以在 FormGroup 中查詢它的子控件，從而讓你能比較它們的值。要想給 FormGroup 添加驗(yàn)證器，就要在創(chuàng)建時(shí)把一個(gè)新的驗(yàn)證器傳給它的第二個(gè)參數(shù)。

    this.profileForm.valueChanges.subscribe( {       next: value => {         console.log(JSON.stringify(this.profileForm.errors));// {"identityRevealed":true} | null       }     });    public profileForm = new FormGroup({     firstName: new FormControl('', [       Validators.required,     ]),     lastName: new FormControl(''),   }, { validators: this.identityRevealedValidator});    public identityRevealedValidator(control: FormGroup): ValidationErrors | null{     const firstName = control.get('firstName');     const lastName = control.get('lastName');     return firstName && lastName && firstName.value === lastName.value ? { identityRevealed: true } : null;   };

4.5 創(chuàng)建異步驗(yàn)證器

異步驗(yàn)證器實(shí)現(xiàn)了 AsyncValidatorFn 和 AsyncValidator 接口。它們與其同步版本非常相似，但有以下不同之處。

• validate() 函數(shù)必須返回一個(gè) Promise 或可觀察對(duì)象，
• 返回的可觀察對(duì)象必須是有盡的，這意味著它必須在某個(gè)時(shí)刻完成（complete）。要把無盡的可觀察對(duì)象轉(zhuǎn)換成有盡的，可以在管道中加入過濾操作符，比如 first、last、take 或 takeUntil。

異步驗(yàn)證在同步驗(yàn)證完成后才會(huì)發(fā)生，并且只有在同步驗(yàn)證成功時(shí)才會(huì)執(zhí)行。如果更基本的驗(yàn)證方法已經(jīng)發(fā)現(xiàn)了無效輸入，那么這種檢查順序就可以讓表單避免使用昂貴的異步驗(yàn)證流程（例如 HTTP 請(qǐng)求）。

4.6 觸發(fā)某個(gè)formControlName

    let formControl = this.profileForm.get('firstName');     formControl.updateValueAndValidity();