angular6的響應式表單的實現(xiàn)
1：在AppModule模塊里面引入 ReactiveFormsModule
要使用響應式表單，就要從@angular/forms包中導入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：請在組件中導入 FormControl 類
FormControl類是angular響應式表單最基本的構造快，要注冊單個的表單控件，請在組件中導入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，但是當調用 FormGroup 或 FormArray 的 setValue()方法時，傳入的值就必須匹配控件組或控件數(shù)組的結構才行
6：把表單控件分組
FormControl的實例能控制單個輸入框所對應的控件，F(xiàn)ormGroup可以控制一組FormControl實例的表單狀態(tài)，當創(chuàng)建FormGroup時，其中的每一個控件都會根據(jù)名字進行跟蹤
1>：創(chuàng)建新的組件
ng g c ProfileEditor
2>：導入 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>：關聯(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)建了一個通訊層，F(xiàn)ormControlName 指令提供的 formControlName 屬性把每個輸入框和 FormGroup 中定義的表單控件綁定起來。
4>：關聯(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 標簽所發(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() 方法要針對模型的結構進行更新。patchValue() 只會更新表單模型中所定義的那些屬性。
6：使用 FormBuilder 來生成表單控件
FormBuilder 服務提供了一些便捷方法來生成表單控件。
FormBuilder在幕后也使用同樣的方式來創(chuàng)建和返回這些實例，只是用起來更簡單。 下面會重構 ProfileEditor 組件，用FormBuilder 來代替手工創(chuàng)建這些 FormControl 和 FormGroup。
Step 1 - 導入 FormBuilder 類
import { FormBuilder } from '@angular/forms';
Step 2 - 注入FormBuild 服務
constructor(private fb: FormBuilder) { }
Step 3- 生成表單控件
FormBuilder 服務有三個方法：control()、group() 和 array()。這些方法都是工廠方法，用于在組件類中分別生成
FormControl、FormGroup 和 FormArray。
你可以使用 group() 方法，用和前面一樣的名字來定義這些屬性。這里，每個控件名對應的值都是一個數(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 - 導入驗證器函數(shù)
import { Validators } from '@angular/forms';
響應式表單包含了一組開箱即用的常用驗證器函數(shù)。這些函數(shù)接收一個控件，用以驗證并根據(jù)驗證結果返回一個錯誤對象或空值。
Step 2 - 把字段設為必填
最常見的校驗項是把一個字段設為必填項。本節(jié)描述如何為 firstName 控件添加“必填項”驗證器。
在組件中，把靜態(tài)方法 Validators.required 設置為 firstName 控件值數(shù)組中的第二項。
profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
});
HTML5 有一組內置的屬性，用來進行原生驗證，包括 required、minlength、maxlength等。雖然是可選的，不過你也可以在表單的輸入元素上把它們添加為附加屬性來使用它們。這里我們把 required 屬性添加到 firstName輸入元素上。
<input type="text" formControlName="firstName" required>
這些 HTML5 驗證器屬性可以和 Angular響應式表單提供的內置驗證器組合使用。組合使用這兩種驗證器實踐，可以防止在模板檢查完之后表達式再次被修改導致的錯誤。
8：顯示表單的狀態(tài)
現(xiàn)在，你已經(jīng)往表單控件上添加了一個必填字段，它的初始值是無效的（invalid）。這種無效狀態(tài)冒泡到其父 FormGroup 中，也讓這個 FormGroup 的狀態(tài)變?yōu)闊o效的。你可以通過該 FormGroup 實例的 status 屬性來訪問其當前狀態(tài)。
<p>
Form Status: {{ profileForm.status }}
</p>
9：使用表單數(shù)組管理動態(tài)控件
FormArray 是 FormGroup 之外的另一個選擇，用于管理任意數(shù)量的匿名控件，如果你事先不知道子控件的數(shù)量，F(xiàn)ormArray是一個很好的選擇
Step 1 - 導入 FormArray
import { FormArray } from '@angular/forms';
Step 2 - 定義 FormArray
為 profileForm 添加一個 aliases 屬性，把它定義為 FormArray 類型。（FormBuilder 服務用于創(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 來訪問控件比較便捷，也容易復用
使用 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>
每當新的 alias 加進來時，F(xiàn)ormArray 就會基于這個索引號提供它的控件。這將允許你在每次計算根控件的狀態(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(''));
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例
下面小編就為大家分享一篇AngularJS動態(tài)添加數(shù)據(jù)并刪除的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了使用AngularJS中的SCE來防止XSS攻擊的方法,依靠合理地轉碼為HTML來預防跨站腳本漏洞共計,需要的朋友可以參考下2015-06-06
關于AngularJS中幾種Providers的區(qū)別總結
這篇文章主要給大家介紹了關于AngularJS中幾種Providers的區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用AngularJS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-05-05
Angular.js?實現(xiàn)帶手柄自由調整頁面大小的功能
這篇文章主要介紹了Angular.js?實現(xiàn)帶手柄自由調整頁面大小的功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
本文主要介紹AngularJS 視圖，這里整理了相關知識，并附代碼示例和實現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
詳解AngularJs中$sce與$sceDelegate上下文轉義服務
這篇文章給大家詳細介紹了AngularJs提供的嚴格上下文轉義服務$sce與$sceDelegate，文中介紹的很詳細，有需要的朋友們可以參考借鑒。2016-09-09
angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
這篇文章主要介紹了angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應及頁面table元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
Angular引入swiper后autoplay失效的解決辦法詳解
這篇文章主要介紹了Angular引入swiper后autoplay失效的解決辦法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
AngularJs Understanding Angular Templates
本文主要介紹AngularJs Understanding Angular Templates的資料，這里整理了詳細的資料及簡單示例代碼，有興趣的小伙伴的參考下2016-09-09
高效利用Angular中內置服務$http、$location等
這篇文章主要介紹了如何高效利用Angular中內置服務，大家知道的Angular內置服務有哪些，感興趣的小伙伴們可以參考一下2016-03-03