From 9241462772897189c1d87dda5e2f661979ba9bd7 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 11:07:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=BF=E6=87=89=E5=BC=8F=E8=A1=A8=E5=96=AE>?=
 =?UTF-8?q?=20=E5=88=A9=E7=94=A8FormArray=E5=BB=BA=E7=AB=8B=E8=A1=A8?=
 =?UTF-8?q?=E5=96=AE=E9=99=A3=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html | 14 +++++++-------
 src/app/app.component.ts   | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6438df3..599835b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,9 @@
-<div [formGroup]="form">
-  <div>帳號：<input type="text" formControlName="id" /></div>
-  <div>密碼：<input type="password" formControlName="password" /></div>
-  <div>
-    <button type="reset">重設</button>
-    <button type="submit">登入</button>
+<div [formGroup] = "form">
+  <div formArrayName="Tasks" *ngFor="let control of tasks.controls; let index = index">
+    <ng-container [formGroupName]="index">
+      <input type="text" placeholder="主旨" formControlName="Subject"/>
+      <input type="text" placeholder="內容" formControlName="Content"/>
+    </ng-container>
   </div>
 </div>
-<pre>{{ form.value | json }}</pre>
+<pre>{{form.value| json}}</pre>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9834cfe..777fab3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 
 
 @Component({
@@ -9,8 +9,20 @@ import { FormControl, FormGroup } from '@angular/forms';
 })
 export class AppComponent  {
   readonly form = new FormGroup({
-    id:new FormControl(),
-    password: new FormControl(),
+    Tasks: new FormArray([]),
   });
 
+  get tasks(): FormArray{
+    return this.form.get('Tasks') as FormArray;
+  }
+
+  ngOnInit(): void{
+    this.tasks.push(//注意此push用法
+      new FormGroup({
+        Subject: new FormControl(),
+        Content: new FormControl(),
+      })
+    );
+  }
+
 }