ngForm表單範例

src/app/app.component.html

@@ -1,4 +1,16 @@
-查詢條件：<input type="text" #condition="ngModel" ngModel />
-<button type="button" (click)="onSearch(condition)">查詢</button>
-<hr />
-<pre>查詢條件：{{ result | json }}</pre>
+<form #form="ngForm" (submit)="onSubmit(form)">
+  <div>
+    帳號:<input type="text" name="id" ngModel/>
+  </div>
+  <div>
+    密碼:<input type="password" name="password" ngModel/>
+  </div>
+  <div>
+    something:<input type="text" name ="abc" ngModel/>
+  </div>
+  <div>
+    <button type="reset">重設</button>
+    <button type="submit">登入</button>
+  </div>
+</form>
+<pre>{{ form.value | json }}</pre>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NgModel } from '@angular/forms';
+import { NgForm, NgModel } from '@angular/forms';
 
 @Component({
   selector: 'my-app',
@@ -7,10 +7,7 @@ import { NgModel } from '@angular/forms';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-
-  result='';
-  onSearch(condition:NgModel): void {
-    console.log(`查詢條件：${condition.value}`);
-    this.result=condition.value;
-  }
+onSubmit(form:NgForm):void{
+  console.log('表單資料:', form.value);
+}
 }