Angular中使用嵌套Form的詳細(xì)步驟
我們可以在這個(gè) FormGroup 構(gòu)造函數(shù)的屬性里，再增添一個(gè)類型為 FormGroup 的實(shí)例，形成嵌套的 form：
每一次顯式調(diào)用 new 創(chuàng)建 FormGroup 和 FormControl 實(shí)例顯得很繁瑣。其實(shí)我們可以使用 FormBuilder 通過工廠模式創(chuàng)建。
profileForm = this.fb.group({
firstName: ['Jerry'],
lastName: ['LastName'],
address: this.fb.group({
street: [''],
city: ['']
}),
});
效果：
冒號(hào)后面的參數(shù)類型是 JSON 數(shù)組，第一個(gè)參數(shù)為默認(rèn)的初始值，第二個(gè)參數(shù)為 validator，使用例子如下：
當(dāng) lastName 沒有維護(hù)值時(shí)，整個(gè) form 處于 ng-invalid 狀態(tài)，submit 按鈕無法點(diǎn)擊。
嵌套 group 的 status 狀態(tài)會(huì)冒泡到父 form.
可以通過 FormGroup.status 直接訪問其狀態(tài)。
this.profileForm.valueChanges.subscribe(
value => {
console.log('group value: ', value, ' status: ',
this.profileForm.status);
}
);
如果我們事先不知道待創(chuàng)建的 form 控件實(shí)例的準(zhǔn)確數(shù)目，使用動(dòng)態(tài)控件是一個(gè)不錯(cuò)的選擇。所謂動(dòng)態(tài)控件，即我們不需要為每一個(gè)控件顯式指定 key.
一個(gè)實(shí)際例子：
aliases: this.fb.array([
this.fb.control('')
])
創(chuàng)建一個(gè) getter 訪問器，通過代碼的方式獲得上圖創(chuàng)建的動(dòng)態(tài)控件：
get aliases() {
return this.profileForm.get('aliases') as FormArray;
}因?yàn)?this.profileForm.get('aliases') 返回的控件的類型是抽象數(shù)據(jù)類型 AbstractControl，所以你要為該方法提供一個(gè)顯式的類型聲明來訪問 FormArray 特有的語法。
動(dòng)態(tài)添加匿名組件 的方法：
addAlias() {
this.aliases.push(this.fb.control(''));
}
<div formArrayName="aliases">
<h2>Aliases</h2>
<button (click)="addAlias()" type="button">+ Add another alias</button>
<div *ngFor="let alias of aliases.controls; let i=index">
<!-- The repeated alias template -->
<label for="alias-{{ i }}">Alias:</label>
<input id="alias-{{ i }}" type="text" [formControlName]="i">
</div>
</div>最后的效果：
這些匿名控件的值，通過如下方式打印出來：
onSubmit(){
console.warn(this.profileForm.value);
}通過 formArrayName 和 formControlName 給這些匿名控件賦予了索引值，這樣可以通過索引訪問控件中的內(nèi)容：
總結(jié)
到此這篇關(guān)于Angular中使用嵌套Form的文章就介紹到這了,更多相關(guān)Angular使用嵌套Form內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了如何在angular2中獲取節(jié)點(diǎn)，詳細(xì)的介紹了幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法
本篇文章主要介紹了angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-07-07
AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動(dòng)加載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ng-app指令的功能及自動(dòng)加載機(jī)制的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了深入理解Angularjs 臟值檢測(cè)，詳細(xì)的介紹了臟值檢測(cè)的原理和實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了Angularjs 制作購物車功能實(shí)例代碼的相關(guān)資料,并附示例代碼，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了AngularJs中$cookies簡單用法,結(jié)合實(shí)例形式分析了AngularJS使用$cookies存儲(chǔ)變量相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-05-05
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。2015-05-05
angular 基于ng-messages的表單驗(yàn)證實(shí)例
本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn)
這篇文章主要介紹了angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法
這篇文章主要介紹了AngularJS在IE下取數(shù)據(jù)總是緩存問題的解決方法,分析了問題的原因及AngularJS設(shè)置禁止IE對(duì)ajax緩存的實(shí)現(xiàn)方法,需要的朋友可以參考下2016-08-08