動態(tài)表單(React Forms)是一種動態(tài)構(gòu)建表單的技術(shù)，用于解決有時候手動編寫和維護(hù)表單所需工作量和時間會過大的問題。特別是在需要編寫大量表單時。表單都很相似，而且隨著業(yè)務(wù)和監(jiān)管需求的迅速變化，表單也要隨之變化，這樣維護(hù)的成本過高，如果我們有了原始的JSON數(shù)據(jù)就可以動態(tài)的生成表單，那就太方便了。

通過動態(tài)表單，我們可以建立一個有Angular表單控件樹的組件類(component class)，并且將他們綁定到內(nèi)置表單元素上。

一個FormControl的構(gòu)造函數(shù)接受三個可選參數(shù)：初始值、驗(yàn)證器數(shù)組、異步驗(yàn)證器數(shù)組。

動態(tài)表單類的核心概念：

AbstractControl是三個具體類：FormControl、FormGroup、FormArray的抽象類，它提供了通用的行為和屬性，比如?observable：

組件必須把數(shù)據(jù)模型(data model)的值轉(zhuǎn)為表單模型(form model)，這里有兩個重要的含義：

1、開發(fā)者必須理解如何把數(shù)據(jù)模型的屬性映射到表單模型的屬性。

2、用戶改變的是表單模型的DOM，而不是數(shù)據(jù)模型的數(shù)據(jù)，表單控件永遠(yuǎn)不會更新數(shù)據(jù)模型(data model)。

表單和數(shù)據(jù)模型結(jié)構(gòu)不會完全匹配。你經(jīng)常在特定屏幕上顯示數(shù)據(jù)模型的子集。但是，如果表單模式的形狀接近數(shù)據(jù)模型的形狀，這樣做會更容易。

使用setValue和patchValue填充表單模型

setValue

使用setValue，可以可以通過傳遞其屬性與FormGroup后面的表單模型完全匹配的數(shù)據(jù)對象來一次分配每個表單控件值。

在分配任何表單控件值之前，setValue方法會徹底檢查數(shù)據(jù)對象。

它不會接受與FormGroup結(jié)構(gòu)不匹配的數(shù)據(jù)對象，或者缺少組中任何控件的值。 這樣，如果您有打字錯誤或嵌套控件錯誤，它可以返回有用的錯誤消息。 patchValue將默認(rèn)失敗。

另一方面，setValue將捕獲錯誤并清楚地報告錯誤。

請注意，很多數(shù)據(jù)模型(data model)可以直接作為setValue的參數(shù)，只要它們的形狀類似于組件的FormGroup結(jié)構(gòu)。

patchValue

使用patchValue，您可以通過提供一個鍵/值對的對象來為僅感興趣的控件分配值到FormGroup中的特定控件。

使用patchValue，您可以更靈活地應(yīng)對大量不同的數(shù)據(jù)和表單模型。 但是與setValue不同，patchValue無法檢查缺少的控件值，并且不會引起有用的錯誤。

When to set form model values (ngOnChanges)

現(xiàn)在你知道如何設(shè)置表單模型值。 但是你什么時候設(shè)置它們？ 答案取決于組件何時獲取數(shù)據(jù)模型值。

The HeroDetailComponent in this reactive forms sample is nested within a master/detail HeroListComponent (discussed below). The HeroListComponent displays hero names to the user. When the user clicks on a hero, the list component passes the selected hero into the HeroDetailComponent by binding to its hero input property.

例子中的英雄細(xì)節(jié)組件(HeroDetailComponent) 是嵌套在英雄列表控件(HeroListComponent)中的，英雄列表組件用于展示英雄的名字，當(dāng)用戶點(diǎn)擊某個英雄時，列表組件將進(jìn)入選中的英雄的細(xì)節(jié)組件中，并將英雄的數(shù)據(jù)與輸入控件綁定。

In this approach, the value ofheroin theHeroDetailComponentchanges every time the user selects a new hero. You should callsetValuein thengOnChangeshook, which Angular calls whenever the inputheroproperty changes as the following steps demonstrate.

在這種方法中，HeroDetailComponent中的英雄的值會在每次用戶選擇新英雄時發(fā)生變化。 應(yīng)該在ngOnChanges鉤子中調(diào)用setValue，每當(dāng)輸入的英雄屬性按照以下步驟演示時Angular調(diào)用。

首先，在hero-detail.component.ts中導(dǎo)入OnChanges和Input符號。

然后，添加 @Input()hero:Hero; 屬性。

再將ngOnChanges方法添加到類中，如下所示：ngOnChanges(){

this.heroForm.setValue({

name: this.hero.name,

address: this.hero.addresses[0]||newAddress()

});

}

resetthe form flags

當(dāng)英雄改變時，您應(yīng)該重置表單，以便清除來自前一個英雄的控制值，并將狀態(tài)標(biāo)志恢復(fù)為原始狀態(tài)。 您可以像這樣調(diào)用ngOnChanges的頂部的重置。this.heroForm.reset();

reset方法有一個可選的狀態(tài)值，所以你可以重置標(biāo)志和控制值。 在內(nèi)部，reset將參數(shù)傳遞給setValue。 一些重構(gòu)和ngOnChanges成為這樣：ngOnChanges(){

this.heroForm.reset({

name:this.hero.name,

address:this.hero.addresses[0]||newAddress()

});

}

創(chuàng)建?HeroListComponent和?HeroService

HeroDetailComponent是主/詳細(xì)視圖中HeroListComponent的一個嵌套子組件。 他們一起看起來有點(diǎn)像這樣：

圖 1

HeroListComponent使用注入的HeroService從服務(wù)中檢索英雄，然后將這些英雄作為一系列按鈕呈現(xiàn)給用戶。 HeroService模擬HTTP服務(wù)，它返回一個可觀察的英雄，在短暫的延遲之后解析，既模擬網(wǎng)絡(luò)延遲，又可視地指出應(yīng)用程序的必然異步性質(zhì)。

當(dāng)用戶點(diǎn)擊一個英雄時，該組件將其selectedHero屬性設(shè)置為綁定到HeroDetailComponent的hero輸入屬性。 HeroDetailComponent會檢測到已更改的英雄，并用該英雄的數(shù)據(jù)值重新設(shè)置其形式。

在刷新英雄之前，“刷新”按鈕會清除英雄列表和當(dāng)前所選英雄。

其余的HeroListComponent和HeroService實(shí)現(xiàn)細(xì)節(jié)與理解動態(tài)表單無關(guān)。 所涉及的技術(shù)涵蓋在文檔的其他地方，包括“英雄之旅”等等。

如果您正在按照此動態(tài)表格教程中的步驟進(jìn)行編碼，請根據(jù)下面顯示的源代碼創(chuàng)建相關(guān)文件。 注意，hero-list.component.ts導(dǎo)入Observable，最后當(dāng)hero.service.ts導(dǎo)入從rxjs的Observable，of和delay。 然后返回這里了解表單數(shù)組屬性。

用?FormArray展現(xiàn)一組?FormGroups

到目前為止，您已經(jīng)看到FormControls和FormGroups。 FormGroup是一個命名對象，其屬性值為FormControls和其他FormGroups。

有時您需要呈現(xiàn)任意數(shù)量的控件或組。 例如，英雄可能有零個，一個或任何數(shù)量的地址。

Hero.addresses屬性是一個Address實(shí)例數(shù)組。 FormGroup地址可以顯示一個地址。 Angular FormArray可以顯示一個地址FormGroups的數(shù)組。

要訪問FormArray類，將其導(dǎo)入到hero-detail.component.ts中：import { Component, Input, OnChanges } from '@angular/core';

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Address, Hero, states } from './data-model';

要使用FormArray，請執(zhí)行以下操作：

1、定義數(shù)組中的項(xiàng)(FormControls或FormGroups)。

2、使用從數(shù)據(jù)模型中的數(shù)據(jù)創(chuàng)建的項(xiàng)初始化數(shù)組。

3、根據(jù)用戶需要添加和刪除項(xiàng)目。

在本指南中，您可以為Hero.addresses定義FormArray，并允許用戶添加或修改地址(刪除地址是您的家庭作業(yè))。

您需要在HeroDetailComponent構(gòu)造函數(shù)中重新定義表單模型，該方法當(dāng)前只顯示地址FormGroup中的第一個英雄地址。this.heroForm=this.fb.group({

name: ['',Validators.required],

address: this.fb.group (newAddress()), ? //

power: '',

sidekick: ''

})

From?addressto?secret lairs

從地址到秘密的小屋

從用戶的角度來看，英雄沒有地址。 地址只是凡人。 英雄有秘密的小屋！ 使用secretLairs FormArray定義替換FormGroup定義的地址：this.heroForm=this.fb.group({

name: ['',Validators.required],

secretLairs: this.fb.array([]),//

power: '',

sidekick: ''

});

Changing the form control name fromaddresstosecretLairsdrives home an important point: theform modeldoesn't have to match thedata model.

Obviously there has to be a relationship between the two. But it can be anything that makes sense within the application domain.

Presentationrequirements often differ fromdatarequirements. The reactive forms approach both emphasizes and facilitates this distinction.

將表單控名稱從地址更改為secretLairs驅(qū)動器回到一個重要的一點(diǎn)：表單模型不必與數(shù)據(jù)模型相匹配。

顯然兩者之間有一個關(guān)系。 但它可以是任何在應(yīng)用程序域內(nèi)有意義的內(nèi)容。

演示要求往往與數(shù)據(jù)需求不同。 反應(yīng)式方法既強(qiáng)調(diào)并促進(jìn)了這種區(qū)分。

總結(jié)

以上是生活随笔為你收集整理的angular4更改表单中显示的值_Angular 4 动态表单教程 Reactive Forms教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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