我們可以在這個 FormGroup 建構函式的屬性裡，再增添一個型別為 `FormGroup` 的例項，形成巢狀的 form：

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

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

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

每一次顯式呼叫 new 建立 `FormGroup` 和 `FormControl` 例項顯得很繁瑣。其實我們可以使用 `FormBuilder` 透過工廠模式建立。

```typescript
profileForm = this.fb.group({
    firstName: ['Jerry'],
    lastName: ['LastName'],
    address: this.fb.group({
      street: [''],
      city: ['']
    }),
  });
```

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

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

冒號後面的引數型別是 JSON 陣列，第一個引數為預設的初始值，第二個引數為 validator，使用例子如下：

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

當 `lastName` 沒有維護值時，整個 form 處於 `ng-invalid` 狀態，submit 按鈕無法點選。

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

巢狀 group 的 status 狀態會冒泡到父 form.

可以透過 FormGroup.status 直接訪問其狀態。

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

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

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

如果我們事先不知道待建立的 form 控制元件例項的準確數目，使用動態控制元件是一個不錯的選擇。所謂動態控制元件，即我們不需要為每一個控制元件顯式指定 key.

一個實際例子：

```typescript
aliases: this.fb.array([
    this.fb.control('')
  ])
```

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

建立一個 getter 訪問器，透過程式碼的方式獲得上圖建立的動態控制元件：

```typescript
get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}
```

因為 `this.profileForm.get('aliases')` 返回的控制元件的型別是抽象資料型別
`AbstractControl`，所以你要為該方法提供一個顯式的型別宣告來訪問 FormArray 特有的語法。

動態新增`匿名元件` 的方法：

```typescript
addAlias() {
    this.aliases.push(this.fb.control(''));
  }
```
![](https://img-blog.csdnimg.cn/img_convert/514384ce165732d9a55788a33d983260.png)

```html
<div formarrayname="aliases">
        <h2>Aliases</h2>
        <button type="button">+ Add another alias</button>
      
        <div alias="" of="" aliases.controls="" let="" i="index"">
          
          <label for="alias-{{ i }}">Alias:</label>
          <input id="alias-{{ i }}" type="text">
        </div>
      </div>
```

最後的效果：

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

這些匿名控制元件的值，透過如下方式列印出來：

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

```typescript
onSubmit(){
    console.warn(this.profileForm.value);
  }
```
透過 `formArrayName` 和 `formControlName` 給這些匿名控制元件賦予了索引值，這樣可以透過索引訪問控制元件中的內容：

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

Angular 裡使用巢狀 Form 的步驟

相關文章