feat: introduce validate into template-driven

Author: Yu0614

src/app/template-driven/template-driven.component.html

@@ -7,27 +7,65 @@ <h1>Welcome</h1>
         <!-- ① using ngForm to link form with component -->
         <form class="form" #form="ngForm" (ngSubmit)="submit()">
             <!-- ② using ngModel to link value with component model -->
-            <input type="email" placeholder="mail" [(ngModel)]="model.mail" name="mail" #mail="ngModel" />
-            <input type="password" placeholder="password" [(ngModel)]="model.password" name="password" #password="ngModel" />
-            <button class="button" type="submit" id="login-button">Login</button>
+            <input
+                type="email"
+                placeholder="mail"
+                [(ngModel)]="model.mail"
+                name="mail"
+                #mail="ngModel"
+                required
+                email
+            />
+            <input
+                type="password"
+                placeholder="password"
+                [(ngModel)]="model.password"
+                name="password"
+                #password="ngModel"
+                required
+            />
+            <button class="button" type="submit" id="login-button">
+                Login
+            </button>
             <br />
-            <button class="button fill-button mail" type="button" id="fill-mail-button" [disabled]="!form.valid" (click)="fillMail()">
+            <button
+                class="button fill-button mail"
+                type="button"
+                id="fill-mail-button"
+                (click)="fillMail()"
+            >
                 Fill Mail
             </button>
             <button
                 class="button fill-button password"
                 type="button"
                 id="fill-password-button"
-                [disabled]="!form.valid"
                 (click)="fillPassword()"
             >
                 Fill Password
             </button>
             <br />
             <br />
             <br />
-            <button class="button delete" type="button" id="delete-button" (click)="deleteValue()">DELETE</button>
+            <button
+                class="button delete"
+                type="button"
+                id="delete-button"
+                (click)="deleteValue()"
+            >
+                DELETE
+            </button>
         </form>
+        <p class="alert alert-danger" *ngIf="emailInvalid">
+            MAIL FORM: INVALID
+        </p>
+        <p class="alert alert-danger" *ngIf="emailPatternInvalid">
+            MAIL FORM PATTERN: INVALID
+        </p>
+        <p class="alert alert-danger" *ngIf="passwordInvalid">
+            PASSWORD FORM: INVALID
+        </p>
+        <p>Form Status: {{ form.status }}</p>
     </div>
 
     <ul class="bg-bubbles">

src/app/template-driven/template-driven.component.ts

@@ -8,11 +8,33 @@ import { FormBuilder, NgForm } from '@angular/forms';
 })
 export class TemplateDrivenComponent implements OnInit {
     constructor() {}
+
+    get formStatus() {
+        return this.form?.status === 'VALID' ? true : false;
+    }
+    get passwordInvalid() {
+        return this.form?.form?.controls?.password?.errors?.required
+            ? true
+            : false ?? false;
+    }
+    get emailInvalid() {
+        return this.form?.form?.controls?.mail?.errors?.required
+            ? true
+            : false ?? false;
+    }
+    get emailPatternInvalid() {
+        return this.form?.form?.controls?.mail?.errors?.email
+            ? true
+            : false ?? false;
+    }
+
     public model = {
         mail: '',
         password: '',
     };
 
+    // https://angular.io/guide/form-validation
+
     @ViewChild('form')
     form: NgForm;
 
@@ -22,7 +44,6 @@ export class TemplateDrivenComponent implements OnInit {
      * Submit form values
      */
     submit() {
-        console.log('submit');
         window.alert(JSON.stringify(this.form.value));
     }