Angular2 代码在文本框发生某些变化时如何反映回组件

Question

这里我有一个要求，如果我在文本框中键入任何内容，它应该反映回组件

<label> Search FRom Table:</label> <input (change)="someval()">

Someval(){
//Here i need that TextBox value
}

Answer 1

您可以通过双向数据绑定方法等实现。

Html 好像跟

    <label> Search From Table:</label>
    <input name="searchTxt" [(ngModel)]="searchTxt" (input)="someval()">

    {{searchTxt}} <!-- here iam printed html file also -->

打字稿文件：

//Add one variable 
public searchTxt:any;

someval(){
 console.log("Here iam printed variable",this.searchTxt);
}

确保您必须在应用程序模块文件中导入表单模块否则它会显示这样的错误

app.module.ts

import { FormsModule } from '@angular/forms'

imports: [
    FormsModule,
],

更多相关内容请访问：

https://www.code-sample.com/2017/05/angular2-input-textbox-change-events.html

Angular2 代码在文本框发生某些变化时如何反映回组件

Angular2 code on when some change in Textbox how its Reflect back to component

angular2-forms

angular4-forms