email格式驗證

src/app/app.component.html

@@ -1,20 +1,15 @@
 <form #form="ngForm">
-  <div>帳號:<input type="text" name="id" #id="ngModel" ngModel /></div>
   <div>
-    密碼:<input type="password" name="password" #password="ngModel" ngModel />
+    帳號：<input type="text" name="id" #id="ngModel" ngModel email />
+    <ng-container *ngIf="id.touched">
+      <span *ngIf="id.hasError('email')">帳號應符合 Email 格式</span>
+    </ng-container>
+  </div>
+  <div>
+    密碼：<input type="password" name="password" #password="ngModel" ngModel />
   </div>
   <div>
     <button type="reset">重設</button>
     <button type="submit">登入</button>
   </div>
 </form>
-
-<br />
-<h4>帳號狀態</h4>
-<pre>是否曾經修改過:{{id.dirty |json}}</pre>
-<pre>是否從未修改過:{{id.pristine |json}}</pre>
-
-<br />
-<h4>表單狀態</h4>
-<pre>是否曾經修改過:{{form.dirty |json}}</pre>
-<pre>是否從未修改過:{{form.pristine |json}}</pre>