響應式表單，FormGroup

可以將form item 當作group

src/app/app.component.html

@@ -1,2 +1,9 @@
-查詢條件:<input type="text" [formControl]="condition" />
-<button type="button" (click)="onSearch()">查詢</button>
+<div [formGroup]="form">
+  <div>帳號：<input type="text" formControlName="id" /></div>
+  <div>密碼：<input type="password" formControlName="password" /></div>
+  <div>
+    <button type="reset">重設</button>
+    <button type="submit">登入</button>
+  </div>
+</div>
+<pre>{{ form.value | json }}</pre>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 
 
 @Component({
@@ -8,9 +8,9 @@ import { FormControl } from '@angular/forms';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent  {
-  readonly condition = new FormControl();
+  readonly form = new FormGroup({
+    id:new FormControl(),
+    password: new FormControl(),
+  });
 
-  onSearch(): void{
-    console.log(`查詢條件:${this.condition.value}`);
-  }
 }