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

Question

我正在学习如何在输入 html 标签上绑定一些事件。因此，如下面发布的 html 文件所示，对以下状态具有约束力

(onchange) and (oninput)

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

因为我是 enterting/typing 输入字段的文本，没有调用或执行 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)
  }
}

Answer 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。

Answer 2

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

component.html

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

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

component.ts

export class AppComponent {
  inputValue: string;

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

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

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

how to bind on an event to get notified as the text is being entered

html

javascript

data-binding

typescript

angular