feat: add comments and adjust structure

Author: Yu0614

src/app/reactive/reactive.component.css

@@ -57,7 +57,7 @@ body :-ms-input-placeholder {
     top: 50%;
     left: 0;
     width: 100%;
-    height: 400px;
+    height: 500px;
     margin-top: -200px;
     overflow: hidden;
 }
@@ -69,7 +69,7 @@ body :-ms-input-placeholder {
     max-width: 600px;
     margin: 0 auto;
     padding: 80px 0;
-    height: 400px;
+    height: 500px;
     text-align: center;
 }
 .container h1 {
@@ -241,3 +241,30 @@ form button:hover {
         transform: translateY(-700px) rotate(600deg);
     }
 }
+
+.fill-button.password {
+    margin-top: 10px;
+    width: 145px;
+    position: absolute;
+    right: 150px;
+}
+
+.fill-button.mail {
+    margin-top: 10px;
+    width: 145px;
+    position: absolute;
+    left: 150px;
+}
+
+.button:hover {
+    color: plum;
+}
+
+.button:active {
+    color: orange;
+    background-color: aqua !important;
+}
+
+.delete {
+    margin-top: 10px;
+}

src/app/reactive/reactive.component.html

@@ -4,10 +4,29 @@
             <p>REACTIVE</p>
         </div>
         <h1>Welcome</h1>
+        <!-- using formGroup to link form with component -->
         <form class="form" [formGroup]="loginForm" (ngSubmit)="submit()">
-            <input type="text" placeholder="userName" formControlName="userName" />
+            <!-- using formControlName to link form with component's attribute -->
+            <input type="email" placeholder="mail" formControlName="mail" />
             <input type="password" placeholder="Password" formControlName="password" />
-            <button type="submit" id="login-button" [disabled]="!loginForm.valid">Login</button>
+            <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()">
+                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>
         </form>
     </div>
 

src/app/reactive/reactive.component.ts

@@ -9,21 +9,68 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 export class ReactiveComponent implements OnInit {
     constructor(private builder: FormBuilder) {}
 
-    loginForm = this.builder.group({
-        userName: [''],
+    // Using FormBuilder to link and initialize form values
+    public loginForm = this.builder.group({
+        mail: [''],
         password: [''],
     });
 
-    // this also possible though it could be troublesome (using instance)
-    /* protected loginForm = new FormGroup({
-        userName: new FormControl(''),
-        password: new FormControl(''),
-    });*/
-
-    ngOnInit(): void {}
+    /**
+     * This also possible though it could be troublesome (using instance..)
+     */
+    // public loginForm = new FormGroup({
+    //     mail: new FormControl(''),
+    //     password: new FormControl(''),
+    // });
 
+    /**
+     * Submit form values
+     */
     submit() {
         console.log('submit');
-        console.log(this.loginForm.value);
+        window.alert(JSON.stringify(this.loginForm.value));
+    }
+
+    /**
+     * Fill emailAddress with specific email
+     *  L shows example for filling email type
+     *  L Overwrites existing value
+     */
+    fillMail() {
+        // when using FormBuilder, you can set values from method, patchValue()
+        this.loginForm.patchValue({
+            mail: 'sample@example.com',
+        });
+        window.alert(JSON.stringify(this.loginForm.value));
+    }
+
+    /**
+     * Fill password with specific password
+     *  L Shows example for filling password type
+     *  L Overwrites existing value
+     */
+    fillPassword() {
+        // when using FormBuilder, you can set values from method, patchValue()
+        this.loginForm.patchValue({
+            password: 'pass1word',
+        });
+        window.alert(JSON.stringify(this.loginForm.value));
+    }
+
+    /**
+     * Delete form values
+     */
+    deleteValue() {
+        this.loginForm.patchValue({
+            mail: '',
+            password: '',
+        });
+    }
+
+    /**
+     * Initialize form values
+     */
+    ngOnInit(): void {
+        this.deleteValue();
     }
 }