From 8403b4c9ec9cc78bc9bfbe131ad375721b54dd42 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Mon, 7 Nov 2022 17:03:45 +0800
Subject: [PATCH] =?UTF-8?q?ng-tounched=20=E5=B1=AC=E6=80=A7=20=E8=8B=A5?=
 =?UTF-8?q?=E9=BB=9E=E9=81=B8=E9=81=8E=E5=B8=B3=E8=99=9F=EF=BC=8C=E6=88=96?=
 =?UTF-8?q?=E8=80=85=E8=A1=A8=E5=96=AE=EF=BC=8C=E5=89=87=E5=A4=96=E6=A1=86?=
 =?UTF-8?q?=E9=A1=8F=E8=89=B2=E6=9C=83=E8=AE=8A=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.css  | 25 +++++++++++++++++++++++++
 src/app/app.component.html | 23 ++++++++++++++++++-----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index ba43f51..d8d35ce 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,3 +1,28 @@
 p {
   font-family: Lato;
 }
+
+form {
+  padding-left: 20px;
+}
+
+div {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+form.ng-untouched {
+  border: solid 1px blue;
+}
+
+form.ng-touched {
+  border: solid 1px red;
+}
+
+input.ng-untouched {
+  border: solid 2px blueviolet;
+}
+
+input.ng-touched {
+  border: solid 2px coral;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1939b9c..555d709 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,20 @@
 <form #form="ngForm">
-  <ng-container #user="ngModelGroup" ngModelGroup="user">
-    <div> 姓名: <input type="text" name="name" ngModel /></div>
-    <div> email:<input type="text" name="email" ngModel /></div>
-  </ng-container>
+  <div>帳號:<input type="text" name="id" #id="ngModel" ngModel /></div>
+  <div>
+    密碼:<input type="password" name="password" #password="ngModel" ngModel />
+  </div>
+  <div>
+    <button type="reset">重設</button>
+    <button type="submit">登入</button>
+  </div>
 </form>
-<pre> {{form.value| json }}</pre>
+
+<br />
+<h4>帳號狀態</h4>
+<pre>是否曾經點選過:{{id.touched |json}}</pre>
+<pre>是否曾經點選過:{{id.untouched |json}}</pre>
+
+<br />
+<h4>表單狀態</h4>
+<pre>是否曾經點選過:{{form.touched |json}}</pre>
+<pre>是否曾經點選過:{{form.untouched |json}}</pre>