Angular 響應式表單使用顯式的、不可變的方式，管理表單在特定的時間點上的狀態。對錶單狀態的每一次變更都會返回一個新的狀態，這樣可以在變化時維護模型的整體性。響應式表單是圍繞 Observable 流構建的，表單的輸入和值都是透過這些輸入值組成的流來提供的，它可以同步訪問。

響應式表單透過對資料模型的同步訪問提供了更多的可預測性，使用 Observable 的運算子提供了不可變性，並且透過 Observable 流提供了變化追蹤功能。

要使用響應式表單控制元件，就要從 @angular/forms 包中匯入 ReactiveFormsModule，並把它新增到你的 NgModule 的 imports 陣列中。

```typescript
import { ReactiveFormsModule } from '@angular/forms';
```

![](https://img-blog.csdnimg.cn/img_convert/e3c6c8878d191144149e28b209082f71.png)

然後，生成一個新的 FormControl 例項，並把它儲存在元件中。

要註冊一個表單控制元件，就要匯入 FormControl 類並建立一個 FormControl 的新例項，將其儲存為類的屬性。

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

透過在你的元件類中建立這些控制元件，你可以直接對錶單控制元件的狀態進行監聽、修改和校驗。

到現在為止，我們只是在 Component 裡建立了一個 FormControl 並把它賦給 Component 類的例項。但是，Component 的模板還感知不到這個 FormControl.

我們需要修改 Component 模板檔案，將模板裡某個控制元件同 Component FormControl 例項繫結起來。

```typescript
<label for="name">Name: </label>
<input id="name" type="text">
```

繫結的語法：

```html
[formControl]="<component formcontrol="">"
```
使用這種模板繫結語法，把該表單控制元件註冊給了模板中名為 name 的輸入元素。這樣，表單控制元件和 DOM 元素就可以互相通訊了：檢視會反映模型的變化，模型也會反映檢視中的變化。
這個通訊是雙向的。

有時在實際開發中，我們還能看到 FormGroup 的使用例子：

![](https://img-blog.csdnimg.cn/img_convert/5a80624e4133b39be18f0226370b78e2.png)

Form Group 即表單組，定義了一個帶有一組控制元件的表單，你可以把它們放在一起管理。

就像 FormControl 的例項能讓你控制單個輸入框所對應的控制元件一樣，FormGroup 的例項也能跟蹤一組 FormControl 例項（比如一個表單）的表單狀態。當建立 FormGroup 時，其中的每個控制元件都會根據其名字進行跟蹤。

看一個 FormGroup 建立例子：

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

現在，這些獨立的表單控制元件被收集到了一個控制元件組中。這個 FormGroup 用物件的形式提供了它的模型值，這個值來自組中每個控制元件的值。 FormGroup 例項擁有和 FormControl 例項相同的屬性（比如 value、untouched）和方法（比如 setValue()）。

我們仍需將這個 FormGroup 例項關聯到模板檔案裡。

這個表單組還能跟蹤其中每個控制元件的狀態及其變化，所以如果其中的某個控制元件的狀態或值變化了，父控制元件也會發出一次新的狀態變更或值變更事件。該控制元件組的模型來自它的所有成員。在定義了這個模型之後，你必須更新模板，來把該模型反映到檢視中。

```typescript
<form>

<label for="first-name">First Name: </label>
  <input id="first-name" type="text" formcontrolname="firstName">

</form>
```

![](https://img-blog.csdnimg.cn/img_convert/d0102640a4c9fd0f0cd71cc3b97a614d.png)

注意，就像 FormGroup 所包含的那控制元件一樣，profileForm 這個 FormGroup 也透過 FormGroup 指令繫結到了 form 元素，在該模型和表單中的輸入框之間建立了一個通訊層。 由 FormControlName 指令提供的 formControlName 屬性把每個輸入框和 FormGroup 中定義的表單控制元件繫結起來。這些表單控制元件會和相應的元素通訊，它們還把更改傳給 FormGroup，這個 FormGroup 是模型值的事實之源。

當然，實際開發中有另外一種實現方法：
![](https://img-blog.csdnimg.cn/img_convert/ff726940062762ff00ea8c5985783a70.png)

先建立一個空的 FormGroup，再把後續建立的 FormControl 例項，然後透過 setControl 設定到 formGroup 裡。

```typescript
  protected buildForm() {
    const form = new FormGroup({});
    form.setControl('product', new FormControl(null));

this.form = form;
  }
```

模板檔案的實現：

```html
<form class="quick-order-form-container">
  <div class="quick-order-form-input">
    <input formcontrolname="product" placeholder="{{ 'quickOrderForm.placeholder' | cxTranslate }}" type="text">
```
                        </div>
                                        <p style="clear:both;"></p>
                    <p class="translate">
                                                    來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2840991/，如需轉載，請註明出處，否則將追究法律責任。
                                            </p>

</form></component>

Angular Form (響應式Form) 學習筆記

相關文章