feat: introduce reactive form

Author: Yu0614

src/app/app.module.ts

@@ -5,10 +5,11 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TemplateDrivenComponent } from './template-driven/template-driven.component';
 import { ReactiveComponent } from './reactive/reactive.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
     declarations: [AppComponent, TemplateDrivenComponent, ReactiveComponent],
-    imports: [BrowserModule, AppRoutingModule],
+    imports: [BrowserModule, AppRoutingModule, ReactiveFormsModule],
     providers: [],
     bootstrap: [AppComponent],
 })

src/app/reactive/reactive.component.html

@@ -4,11 +4,10 @@
             <p>REACTIVE</p>
         </div>
         <h1>Welcome</h1>
-
-        <form class="form">
-            <input type="text" placeholder="Username" />
-            <input type="password" placeholder="Password" />
-            <button type="submit" id="login-button">Login</button>
+        <form class="form" [formGroup]="loginForm" (ngSubmit)="submit()">
+            <input type="text" placeholder="userName" formControlName="userName" />
+            <input type="password" placeholder="Password" formControlName="password" />
+            <button type="submit" id="login-button" [disabled]="!loginForm.valid">Login</button>
         </form>
     </div>
 

src/app/reactive/reactive.component.ts

@@ -1,12 +1,29 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'app-reactive',
     templateUrl: './reactive.component.html',
     styleUrls: ['./reactive.component.css'],
 })
 export class ReactiveComponent implements OnInit {
-    constructor() {}
+    constructor(private builder: FormBuilder) {}
+
+    loginForm = this.builder.group({
+        userName: [''],
+        password: [''],
+    });
+
+    // this also possible though it could be troublesome (using instance)
+    /* protected loginForm = new FormGroup({
+        userName: new FormControl(''),
+        password: new FormControl(''),
+    });*/
 
     ngOnInit(): void {}
+
+    submit() {
+        console.log('submit');
+        console.log(this.loginForm.value);
+    }
 }