如何绑定事件以在输入文本时获得通知答案

【问题标题】：how to bind on an event to get notified as the text is being entered如何绑定事件以在输入文本时获得通知
【发布时间】：2021-07-06 17:18:13
【问题描述】：

我正在学习如何在输入 html 标记上绑定一些事件。所以如下面发布的html文件所示，以下状态有绑定

(onchange) and (oninput)

当我运行应用程序时，我在输入字段中输入文本，但出现以下情况：

当我在输入字段中输入/键入文本时，未调用或执行 onInputFieldChanged 或 onInputFieldHasInput。请告诉我如何绑定在输入标签上的事件上，以便在输入字段中输入文本时收到通知。换句话说，当我输入文本时，我希望调用相应的函数，输入的文本作为参数“事件”传递

请告诉我如何绑定事件，以便在输入文本时收到通知

html：

<span class="classDestinationLng" style="margin-right:10px">
  <label for="destinationLngLabel">destination Longitude:</label>
  <input (change)=onInputFieldChanged($event) (oninput)=onInputFieldHasInput($event)>
</span>
<span>
  <button>confirm</button>
</span>

组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FormOnInputAndOnChange1';

  onInputFieldChanged(event: any) {
    console.log("onChangeEventReceived: ", event)
  }
  onInputFieldHasInput(event: any) {
    console.log("onInputEventReceived: ", event)
  }
}

【问题讨论】：

标签： javascript html angular typescript data-binding

【解决方案1】：

如果您想知道输入中是否存在数据，您可以使用 ngModel。让我举个小例子。

app.component.html

<input type="text" class="form-control" (input)="checkIfTextExists()" [(ngModel)]="name">

app.component.ts

  checkIfTextExists(){
    if(this.name){
      console.log("Text Exists..");
      return;
    }
     console.log("Text does not Exists..");
  }

这里是演示link。

【讨论】：

拜托，我收到以下错误：无效元素没有结束标签“输入” 3
@user2121 试试这个

【解决方案2】：

使用输入事件捕获更改，如下所示

component.html

<input (input)="changeInput($event)" value="">

<input (input)="changeInputUsingModel()" value="" [(ngModel)]="inputValue">

组件.ts

export class AppComponent {
  inputValue: string;

  changeInput($event) {
    console.log($event.target.value);
  }

  changeInputUsingModel() {
    console.log(this.inputValue);
  }
}

【讨论】：