From f783a9586703e1de178da65134a27f8fda1e2e53 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Tue, 8 Nov 2022 10:21:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=BF=E6=87=89=E5=BC=8F=E8=A1=A8=E5=96=AE?=
 =?UTF-8?q?=EF=BC=8CFormGroup=20=E5=8F=AF=E4=BB=A5=E5=B0=87form=20item=20?=
 =?UTF-8?q?=E7=95=B6=E4=BD=9Cgroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7de4498..6438df3 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,9 @@
-查詢條件:<input type="text" [formControl]="condition" />
-<button type="button" (click)="onSearch()">查詢</button>
+<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>
+</div>
+<pre>{{ form.value | json }}</pre>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 47a1d79..9834cfe 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 
 
 @Component({
@@ -8,9 +8,9 @@ import { FormControl } from '@angular/forms';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent  {
-  readonly condition = new FormControl();
+  readonly form = new FormGroup({
+    id:new FormControl(),
+    password: new FormControl(),
+  });
 
-  onSearch(): void{
-    console.log(`查詢條件:${this.condition.value}`);
-  }
 }