1：在AppModule模塊里面引入 ReactiveFormsModule

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

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

2：創(chuàng)建一個新的組件

ng g c NameEditor

3：請在組件中導(dǎo)入 FormControl 類

FormControl類是angular響應(yīng)式表單最基本的構(gòu)造快，要注冊單個的表單控件，請在組件中導(dǎo)入FormControl類，并創(chuàng)建一個FormControl的新實例，把它保存在某個屬性里面。

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(''); }

4:在組件的模板中注冊一個表單控件

修改模板，為表單控件添加 formControl 綁定，formControl 是由 ReactiveFormsModule 中的 FormControlDirective 提供的。

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

使用這種模板綁定語法，把該表單控件注冊給了模板中名為 name 的輸入元素。這樣，表單控件和 DOM
元素就可以互相通訊了：視圖會反映模型的變化，模型也會反映視圖中的變化。

5：替換表單控件的值

FormControl 提供了一個setValue()方法，他會修改這個表單控件的值。

js

updateName() {this.name.setValue('Nancy');}

html

<label>Name:<input type="text" [formControl]="name"> </label> <p>Value:{{name.value}} </p> <p><button (click)="updateName()">Update Name</button> </p>

在這個例子中，你只使用單個控件FormControl，但是當(dāng)調(diào)用 FormGroup 或 FormArray 的 setValue()
方法時，傳入的值就必須匹配控件組或控件數(shù)組的結(jié)構(gòu)才行

6：把表單控件分組

FormControl的實例能控制單個輸入框所對應(yīng)的控件，FormGroup可以控制一組FormControl實例的表單狀態(tài)，當(dāng)創(chuàng)建FormGroup時，其中的每一個控件都會根據(jù)名字進(jìn)行跟蹤

1>：創(chuàng)建新的組件

ng g c ProfileEditor

2>：導(dǎo)入 FormGroup 和 FormControl 類并且創(chuàng)建 FormGroup實例

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

現(xiàn)在這些單獨的控件FormControl被收集到了一個控件組中FormGroup， FormGroup 實例擁有和 FormControl 實例相同的屬性（比如 value、untouched）和方法（比如 setValue()）。

3>：關(guān)聯(lián)FormGroup的模型和視圖

FormGroup能追蹤每個單獨控件FormControl的狀態(tài)和變化，如果其中某個控件的狀態(tài)或值變化了，父控件也會一次新的狀態(tài)變更或值變更事件

<form [formGroup]="profileForm"><label>First Name:<input type="text" formControlName="firstName"></label><label>Last Name:<input type="text" formControlName="lastName"></label></form>

profileForm通過[formGroup]指令綁定到了 form
元素，在該模型和表單中的輸入框之間創(chuàng)建了一個通訊層，FormControlName 指令提供的 formControlName 屬性把每個輸入框和 FormGroup 中定義的表單控件綁定起來。

4>：關(guān)聯(lián)FormGroup的模型和視圖

html

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

js

onSubmit () {console.warn(this.profileForm.value); }

form 標(biāo)簽所發(fā)出的 submit 事件是原生 DOM 事件，通過點擊類型為 submit 的按鈕可以觸發(fā)本事件

6：嵌套的表單組

js

profileForm = new FormGroup({firstName: new FormControl(''),lastName: new FormControl(''),address: new FormGroup({street: new FormControl(''),city: new FormControl(''),state: new FormControl(''),zip: new FormControl('')}) });

html

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

部分模型修改

html

<button (click)="updateProfile()">Update Profile</button>

js

updateProfile() {this.profileForm.patchValue({firstName: 'Nancy',address: {street: '123 Drew Street'}}); }

patchValue() 方法要針對模型的結(jié)構(gòu)進(jìn)行更新。patchValue() 只會更新表單模型中所定義的那些屬性。

6：使用 FormBuilder 來生成表單控件

FormBuilder 服務(wù)提供了一些便捷方法來生成表單控件。
FormBuilder在幕后也使用同樣的方式來創(chuàng)建和返回這些實例，只是用起來更簡單。 下面會重構(gòu) ProfileEditor 組件，用FormBuilder 來代替手工創(chuàng)建這些 FormControl 和 FormGroup。

Step 1 - 導(dǎo)入 FormBuilder 類

import { FormBuilder } from ‘@angular/forms’;

Step 2 - 注入FormBuild 服務(wù)

constructor(private fb: FormBuilder) { }

Step 3- 生成表單控件

FormBuilder 服務(wù)有三個方法：control()、group() 和 array()。這些方法都是工廠方法，用于在組件類中分別生成
FormControl、FormGroup 和 FormArray。

你可以使用 group() 方法，用和前面一樣的名字來定義這些屬性。這里，每個控件名對應(yīng)的值都是一個數(shù)組，這個數(shù)組中的第一項是其初始值。你可以只使用初始值來定義控件，但是如果你的控件還需要同步或異步驗證器，那就在這個數(shù)組中的第二項和第三項提供同步和異步驗證器。

import { Component } from '@angular/core'; import { FormBuilder } from '@angular/forms';@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css'] }) export class ProfileEditorComponent {profileForm = this.fb.group({firstName: ['張'],lastName: ['娉'],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}),});constructor(private fb: FormBuilder) { } }

7：簡單的表單驗證

如何把單個驗證器添加到表單控件中，以及如何顯示表單的整體狀態(tài)。

Step 1 - 導(dǎo)入驗證器函數(shù)

import { Validators } from '@angular/forms';

響應(yīng)式表單包含了一組開箱即用的常用驗證器函數(shù)。這些函數(shù)接收一個控件，用以驗證并根據(jù)驗證結(jié)果返回一個錯誤對象或空值。

Step 2 - 把字段設(shè)為必填

最常見的校驗項是把一個字段設(shè)為必填項。本節(jié)描述如何為 firstName 控件添加“必填項”驗證器。
在組件中，把靜態(tài)方法 Validators.required 設(shè)置為 firstName 控件值數(shù)組中的第二項。

profileForm = this.fb.group({firstName: ['', Validators.required],lastName: [''],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}), });

HTML5 有一組內(nèi)置的屬性，用來進(jìn)行原生驗證，包括 required、minlength、maxlength等。雖然是可選的，不過你也可以在表單的輸入元素上把它們添加為附加屬性來使用它們。這里我們把 required 屬性添加到 firstName
輸入元素上。

<input type="text" formControlName="firstName" required>

這些 HTML5 驗證器屬性可以和 Angular
響應(yīng)式表單提供的內(nèi)置驗證器組合使用。組合使用這兩種驗證器實踐，可以防止在模板檢查完之后表達(dá)式再次被修改導(dǎo)致的錯誤。

8：顯示表單的狀態(tài)

現(xiàn)在，你已經(jīng)往表單控件上添加了一個必填字段，它的初始值是無效的（invalid）。這種無效狀態(tài)冒泡到其父 FormGroup 中，也讓這個 FormGroup 的狀態(tài)變?yōu)闊o效的。你可以通過該 FormGroup 實例的 status 屬性來訪問其當(dāng)前狀態(tài)。

<p>Form Status: {{ profileForm.status }} </p>

9：使用表單數(shù)組管理動態(tài)控件

FormArray 是 FormGroup 之外的另一個選擇，用于管理任意數(shù)量的匿名控件，如果你事先不知道子控件的數(shù)量，FormArray是一個很好的選擇

Step 1 - 導(dǎo)入 FormArray

import { FormArray } from '@angular/forms';

Step 2 - 定義 FormArray

為 profileForm 添加一個 aliases 屬性，把它定義為 FormArray 類型。（FormBuilder 服務(wù)用于創(chuàng)建 FormArray 實例。）

profileForm = this.fb.group({firstName: ['張', Validators.required],lastName: ['以'],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}),aliases: this.fb.array([this.fb.control('')])});

Step 3 - 訪問FormArray控件

通過 getter 來訪問控件比較便捷，也容易復(fù)用
使用 getter 語法來創(chuàng)建一個名為 aliases 的類屬性

get aliases() {}

從父控件 FormGroup 中接收綽號的 FormArray 控件。

get aliases() {return this.profileForm.get('aliases') as FormArray; } addAlias() {this.aliases.push(this.fb.control('')); }

Step 3 - 在模板中顯示表單數(shù)組

在模型中定義了 aliases 的 FormArray 之后，你必須把它加入到模板中供用戶輸入，使用 formArrayName 在這個
FormArray 和模板之間建立綁定。

<div formArrayName="aliases"><h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button><div *ngFor="let address of aliases.controls; let i=index"><!-- The repeated alias template --><label>Alias:<input type="text" [formControlName]="i"></label></div> </div>

每當(dāng)新的 alias 加進(jìn)來時，FormArray 就會基于這個索引號提供它的控件。這將允許你在每次計算根控件的狀態(tài)和值時跟蹤每個控件。

全部代碼

html

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()"><label>First Name:</label><input type="text" formControlName="firstName" required><label>Last Name:</label><input type="text" formControlName="lastName"><div formGroupName="address"><h3>Address</h3><label>Streel</label><input type="text" formControlName="street"><label>City</label><input type="text" formControlName="city"><label>State</label><input type="text" formControlName="state"><label>Zip Code</label><input type="text" formControlName="zip"></div><div formArrayName="aliases"><h3>Aliases</h3><button (click)="addAlias()">Add Alias</button><div *ngFor="let address of aliases.controls; let i=index"><label>Alias</label><input type="text" [formControlName]="i" ></div></div><button type="submit" [disabled]="!profileForm.valid">Submit</button><p><button (click)="updateProfile()">Update Profile</button></p><p>Form Status: {{ profileForm.status }}</p> </form>

js

import { Component, OnInit } from '@angular/core'; import {FormControl, FormGroup, FormBuilder, Validators, FormArray} from '@angular/forms';@Component({selector: 'app-profile-editor',templateUrl: './profile-editor.component.html',styleUrls: ['./profile-editor.component.css'] }) export class ProfileEditorComponent implements OnInit {profileForm = this.fb.group({firstName: ['張', Validators.required],lastName: ['以'],address: this.fb.group({street: [''],city: [''],state: [''],zip: ['']}),aliases: this.fb.array([this.fb.control('')])});constructor(private fb: FormBuilder) {}ngOnInit() {}onSubmit () {console.warn(this.profileForm.value);}updateProfile() {this.profileForm.patchValue({firstName: 'Nancy',address: {street: '123 Drew Street'}});}get aliases () {return this.profileForm.get('aliases') as FormArray;}addAlias() {this.aliases.push(this.fb.control(''));} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的angular6的响应式表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。