ngModel加入範本參考變數

src/app/app.component.html

@@ -1,4 +1,4 @@
-查詢條件：<input type="text" [(ngModel)]="condition" />
-<button type="button" (click)="onSearch()">查詢</button>
+查詢條件：<input type="text" #condition="ngModel" ngModel />
+<button type="button" (click)="onSearch(condition)">查詢</button>
 <hr />
-<pre>查詢條件：{{ condition | json }}</pre>
+<pre>查詢條件：{{ result | json }}</pre>

src/app/app.component.ts

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