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

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

一個FormControl的構造函數接受三個可選參數：初始值、驗證器數組、異步驗證器數組。

動態表單類的核心概念：

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

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

1、開發者必須理解如何把數據模型的屬性映射到表單模型的屬性。

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

表單和數據模型結構不會完全匹配。你經常在特定屏幕上顯示數據模型的子集。但是，如果表單模式的形狀接近數據模型的形狀，這樣做會更容易。

使用setValue和patchValue填充表單模型

setValue

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

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

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

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

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

patchValue

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

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

When to set form model values (ngOnChanges)

現在你知道如何設置表單模型值。 但是你什么時候設置它們？ 答案取決于組件何時獲取數據模型值。

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.

例子中的英雄細節組件(HeroDetailComponent) 是嵌套在英雄列表控件(HeroListComponent)中的，英雄列表組件用于展示英雄的名字，當用戶點擊某個英雄時，列表組件將進入選中的英雄的細節組件中，并將英雄的數據與輸入控件綁定。

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中的英雄的值會在每次用戶選擇新英雄時發生變化。 應該在ngOnChanges鉤子中調用setValue，每當輸入的英雄屬性按照以下步驟演示時Angular調用。

首先，在hero-detail.component.ts中導入OnChanges和Input符號。

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

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

this.heroForm.setValue({

name: this.hero.name,

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

});

}

resetthe form flags

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

reset方法有一個可選的狀態值，所以你可以重置標志和控制值。 在內部，reset將參數傳遞給setValue。 一些重構和ngOnChanges成為這樣：ngOnChanges(){

this.heroForm.reset({

name:this.hero.name,

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

});

}

創建?HeroListComponent和?HeroService

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

圖 1

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

當用戶點擊一個英雄時，該組件將其selectedHero屬性設置為綁定到HeroDetailComponent的hero輸入屬性。 HeroDetailComponent會檢測到已更改的英雄，并用該英雄的數據值重新設置其形式。

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

其余的HeroListComponent和HeroService實現細節與理解動態表單無關。 所涉及的技術涵蓋在文檔的其他地方，包括“英雄之旅”等等。

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

用?FormArray展現一組?FormGroups

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

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

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

要訪問FormArray類，將其導入到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，請執行以下操作：

1、定義數組中的項(FormControls或FormGroups)。

2、使用從數據模型中的數據創建的項初始化數組。

3、根據用戶需要添加和刪除項目。

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

您需要在HeroDetailComponent構造函數中重新定義表單模型，該方法當前只顯示地址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驅動器回到一個重要的一點：表單模型不必與數據模型相匹配。

顯然兩者之間有一個關系。 但它可以是任何在應用程序域內有意義的內容。

演示要求往往與數據需求不同。 反應式方法既強調并促進了這種區分。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。