1. 匯入 `FormControl`:

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

在 Component 裡建立一個 `name` 例項，型別為 `FormControl`：

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

```typescript
name = new FormControl('Jerry');
```

透過建構函式 `FormControl` 設定初始值。

2. 在 HTML 檔案裡，將 element 同 Component 的 `name` 屬性建立繫結關係：

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

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

這之後 Component name 屬性的值，就會自動傳遞到 HTML element 裡：
![](https://img-blog.csdnimg.cn/img_convert/72759c1d8d9fb0791cac2345c8cc8709.png)

這樣，表單控制元件和 DOM 元素就可以互相通訊了：檢視會反映模型的變化，模型也會反映檢視中的變化。

使用 `.value` 可以訪問 FormControl 例項的值：

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

<p>顯示控制元件的值: {{ name.value }}</p>
```

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

# 如何使用 `setValue` 修改 FormControl 的值

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

```typescript
updateName() {
  this.name.setValue('Nancy');
}
```
點選按鈕之後：

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

值變為 nancy:
![](https://img-blog.csdnimg.cn/img_convert/f413760245bf03f60a1541f17af25706.png)

在 event handler 裡看到 click 響應事件在 `zone.js` 裡的統一處理：

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

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

最終在 `core.js` 裡呼叫 `executeListenerWithErrorHandling`：

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

執行 setValue：
![](https://img-blog.csdnimg.cn/img_convert/9e5b33cd84fa3ab44b52617a4ec659a9.png)

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

# 如何響應使用者輸入

```typescript
constructor(){
    this.name.valueChanges.subscribe(selectedValue => {
      console.log('value changed: ', selectedValue);
    })
  }
```

效果：
![](https://img-blog.csdnimg.cn/img_convert/f0b592481d7fd28a191a8e3bb208064a.png)

從呼叫棧發現，仍然是 `executeListenerWithErrorHandling`：

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

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

透過 `EventEmitter` 傳送更新：

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

`ng-untouched ng-pristine ng-valid` 這三個 class 什麼時候賦的值？
![](https://img-blog.csdnimg.cn/img_convert/9ab014de4665536ec15055c37017b6f8.png)

- ng-untouched The field has not been touched yet
- ng-pristine The field has not been  modified yet
- ng-valid The field content is valid

# 如何使用表單組 `form group`

在 Component 裡建立一個型別為 `FormGroup` 的屬性。

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

其建構函式是一個 json 物件，property 的型別為 `FormControl`.

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

FormGroup 也能使用 `setValue` 等方法。

這個表單組還能跟蹤其中每個控制元件的狀態及其變化，所以如果其中的某個控制元件的狀態或值變化了，父控制元件也會發出一次新的狀態變更或值變更事件。

如何把 FormGroup 屬性繫結到 HTML 檔案中：

```html
<form>

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

</form>
```
![](https://img-blog.csdnimg.cn/img_convert/6e5616cdb9c7503ac3aabc78726cd4a0.png)

由 `FormControlName` 指令提供的 `formControlName` 屬性把每個輸入框和 `FormGroup` 中定義的`表單控制元件`繫結起來。
FormGroup 組內資料一樣可以透過 `valueChanges` 被監控：

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

```typescript
this.profileForm.valueChanges.subscribe(
      value => {
        console.log('group value: ', value);
      }
    );
```

使用 `setValue` 修改 group 的值：

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

```typescript
this.profileForm.setValue(
      {
        firstName: 'Tom',
        lastName: "Tom1"
      }
    );
```

form 標籤所發出的 submit 事件是內建 DOM 事件，透過點選型別為 submit 的按鈕可以觸發本事件。這還讓使用者可以用Enter鍵來提交填完的表單。

往表單的底部新增一個 button，用於觸發表單提交。

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

```typescript
onSubmit(){
    console.warn(this.profileForm.value);
  }
```

Angular 裡使用 FormControl 的步驟

相關文章