表單陣列結構的操作

預設數量只會根據原模型數量去設定
包含push method，可以加入新的Formgroup

src/app/app.component.html

@@ -1,2 +1,15 @@
-查詢條件:<input type="text" [formControl]="condition" />
-<button type="button" (click)="onSearch()">查詢</button>
+<button type="button" (click)="onSetValue()">Set</button>
+<button type="button" (click)="onAdd()">Add</button>
+<button type="button" (click)="onClear()">Clear</button>
+<div class="form" [formGroup]="form">
+  <div formArrayName="tasks" *ngFor="let control of tasks.controls; let index = index">
+    <ng-container [formGroupName]="index">
+      <div>工作事項：<input type="text" formControlName="subject" /></div>
+      <div>工作內容：<input type="text" formControlName="content" /></div>
+      <button type="button" (click)="onRemove(index)">Remove</button>
+      <hr>
+    </ng-container>
+  </div>
+</div>
+
+<pre>{{ tasks.value | json }}</pre>

src/app/app.component.ts

@@ -1,5 +1,13 @@
-import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  AbstractControl,
+  FormArray,
+  FormBuilder,
+  FormControl,
+  ValidationErrors,
+} from '@angular/forms';
+import { Observable, of, Subject, takeUntil } from 'rxjs';
+import { debounce, debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
 
 @Component({
@@ -7,10 +15,35 @@ import { FormControl } from '@angular/forms';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent  {
-  readonly condition = new FormControl();
+export class AppComponent {
+  form = this.fb.group({
+    tasks: this.fb.array([]),
+  });
+  get tasks(): FormArray {
+    return this.form.get('tasks') as FormArray;
+  }
+  constructor(private fb: FormBuilder) { }
+
+  onSetValue(): void {
+    this.tasks.patchValue([
+      { subject: 'Task A', content: 'Do something...' },
+      { subject: 'Task B', content: 'Do something...' },
+    ])
+  }
+
+  onAdd(): void{
+    const group = this.fb.group({
+      subject: this.fb.control(''),
+       content: this.fb.control(''),
+    });
+    this.tasks.push(group);
+  }
+
+  onRemove(index: number): void {
+    this.tasks.removeAt(index);
+  }
 
-  onSearch(): void{
-    console.log(`查詢條件:${this.condition.value}`);
+  onClear(): void {
+    this.tasks.clear();
   }
 }

src/app/app.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
-import {  ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
-  imports:      [ BrowserModule, ReactiveFormsModule ],
+  imports:      [ BrowserModule, ReactiveFormsModule, HttpClientModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })