ng-tounched 屬性

若點選過帳號，或者表單，則外框顏色會變色

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;
+}

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>