feat: introduce form validate

Author: Yu0614

src/app/reactive/reactive.component.html

@@ -7,26 +7,54 @@ <h1>Welcome</h1>
         <!-- ① using formGroup to link form with component -->
         <form class="form" [formGroup]="loginForm" (ngSubmit)="submit()">
             <!-- ② using formControlName to link form with component's attribute -->
-            <input type="email" placeholder="mail" formControlName="mail" />
-            <input type="password" placeholder="Password" formControlName="password" />
-            <button class="button" type="submit" id="login-button" [disabled]="!loginForm.valid">Login</button>
+            <input
+                type="email"
+                placeholder="mail"
+                formControlName="mail"
+                required
+            />
+            <input
+                type="password"
+                placeholder="Password"
+                formControlName="password"
+                required
+            />
+            <button
+                class="button"
+                type="submit"
+                id="login-button"
+                [disabled]="!loginForm.valid"
+            >
+                Login
+            </button>
             <br />
-            <button class="button fill-button mail" type="button" id="fill-mail-button" [disabled]="!loginForm.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]="!loginForm.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>
     </div>
 
@@ -42,4 +70,5 @@ <h1>Welcome</h1>
         <li></li>
         <li></li>
     </ul>
+    <p>Form Status: {{ loginForm.status }}</p>
 </div>

src/app/reactive/reactive.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Validators } from '@angular/forms';
 
 @Component({
     selector: 'app-reactive',
@@ -11,8 +12,8 @@ export class ReactiveComponent implements OnInit {
 
     // Using FormBuilder to link and initialize form values
     public loginForm = this.builder.group({
-        mail: [''],
-        password: [''],
+        mail: ['', Validators.email], // validates whether email format or not
+        password: ['', Validators.required], // validates form filled or not
     });
 
     /**
@@ -27,7 +28,6 @@ export class ReactiveComponent implements OnInit {
      * Submit form values
      */
     submit() {
-        console.log('submit');
         window.alert(JSON.stringify(this.loginForm.value));
     }
 
@@ -61,7 +61,7 @@ export class ReactiveComponent implements OnInit {
      * Delete form values
      */
     deleteValue() {
-        this.loginForm.patchValue({
+        this.loginForm.setValue({
             mail: '',
             password: '',
         });