feat: update form validate

Author: Yu0614

src/app/reactive/reactive.component.html

@@ -19,12 +19,7 @@ <h1>Welcome</h1>
                 formControlName="password"
                 required
             />
-            <button
-                class="button"
-                type="submit"
-                id="login-button"
-                [disabled]="!loginForm.valid"
-            >
+            <button class="button" type="submit" id="login-button">
                 Login
             </button>
             <br />
@@ -56,6 +51,19 @@ <h1>Welcome</h1>
                 DELETE
             </button>
         </form>
+        <p class="alert alert-danger" *ngIf="meta.submitted && emailInvalid">
+            MAIL FORM: INVALID
+        </p>
+        <p
+            class="alert alert-danger"
+            *ngIf="meta.submitted && emailPatternInvalid"
+        >
+            MAIL FORM PATTERN: INVALID
+        </p>
+        <p class="alert alert-danger" *ngIf="meta.submitted && passwordInvalid">
+            PASSWORD FORM: INVALID
+        </p>
+        <p>Form Status: {{ loginForm.status }}</p>
     </div>
 
     <ul class="bg-bubbles">
@@ -70,5 +78,4 @@ <h1>Welcome</h1>
         <li></li>
         <li></li>
     </ul>
-    <p>Form Status: {{ loginForm.status }}</p>
 </div>

src/app/reactive/reactive.component.ts

@@ -10,6 +10,30 @@ import { Validators } from '@angular/forms';
 export class ReactiveComponent implements OnInit {
     constructor(private builder: FormBuilder) {}
 
+    get formStatus() {
+        return this.loginForm.status === 'VALID' ? true : false;
+    }
+    get passwordInvalid() {
+        return this.loginForm.controls.password.errors?.required
+            ? true
+            : false ?? false;
+    }
+    get emailInvalid() {
+        return this.loginForm.controls.mail.errors?.required
+            ? true
+            : false ?? false;
+    }
+    get emailPatternInvalid() {
+        return this.loginForm.controls.mail.errors?.email
+            ? true
+            : false ?? false;
+    }
+
+    // controls form
+    protected meta = {
+        submitted: false as boolean,
+    };
+
     // Using FormBuilder to link and initialize form values
     public loginForm = this.builder.group({
         mail: ['', Validators.email], // validates whether email format or not
@@ -28,7 +52,12 @@ export class ReactiveComponent implements OnInit {
      * Submit form values
      */
     submit() {
-        window.alert(JSON.stringify(this.loginForm.value));
+        this.meta.submitted = true;
+        console.log(this.loginForm);
+        console.log(this.loginForm.status);
+        if (this.formStatus) {
+            window.alert(JSON.stringify(this.loginForm.value));
+        }
     }
 
     /**