如何在我们输入 [Angular] 时检测输入字段的变化

Question

我是 Angular 的新手。我正在尝试一些简单的事情。我有一个输入字段。我只想检测变化。每当我输入该字段时，我都想调用一些代码。我查看了这些文章：

这是我的代码：

我的-component.component.html

<input [(ngModel)]="text">

我的-component.component.ts

import { Component, OnInit, DoCheck } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, DoCheck {

  text="hello world";

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }

  // ngDoCheck() { // TRIED THIS ALSO
  //   console.log("Changes detected")
  // }
}

两个重要信息：

我也试过DoCheck，但这不是我想要的。我想看看 only 输入字段的 值是否改变了。但是 ngDoCheck 将在其余组件的每一个细微变化之后被调用，因为它正在使用 zone.js （我在某处读到这个）。
我也不能使用(keydown)，因为我想稍后实现验证码。我希望在输入时进行验证。但是使用 keydown，我注意到即使在输入的值有效之后，我也必须通过一些按键来触发验证码，比方说 Date/Time.

以上两点请大家指正。这是 stackblitz。

Answer 1

您可以使用 input() ： 示例：

HTML :

<input [(ngModel)]="text" (input)="sendTheNewValue($event)">

TS:

let value:string;

sendTheNewValue(event){
this.value = event.target.value;
}

在你的例子中： HTML :

<input [(ngModel)]="text" (input)="change($event)">
<div>the input value is : {{text}}</div>

TS：

import { Component, OnInit, DoCheck, SimpleChanges, OnChanges, Input   } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, OnChanges  {

  text="hello world";

  @Input() name: String = "abc"

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
    console.log("Changes detected");
  }

  change(event){
    this.text = event.target.value;
  }

  // ngDoCheck() {
  //   console.log("Changes detected");
  // }
}

Answer 2

跟踪输入更改需要这 2 项更改：

更新组件模板以绑定值并指定 (更改) 事件。
更新组件脚本以指定 onChange 方法。

工作解决方案：

1.我的-component.component.html

<input [(value)]="text" (change)="onChange($event)">

2。我的-component.component.ts

import { Component, OnInit, DoCheck } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {

  text="hello world";
  constructor() { 
    console.log("Text = " + this.text)
  }

  onChange(event: any) {
       this.text = event.target.value;
       console.log("New value = " + event.target.value)
  };
}

Answer 3

Angular 自己处理变化检测。你只需要在它发生时挂钩到逻辑中。在大多数情况下，这比使用事件侦听器更可取，事件侦听器由该线程中的大多数其他答案提出。

只要您的输入发生变化，angular 就会访问设置字符串的变量。

当变量改变时做某事的一种方法是使用 getter 和 setter。

  // create an internal variable (do not change manually)
  private _text;

  // getter function, called whenever the value is accessed
  get text(){
    console.log("the value was accessed")
    return this._text
  }

  // setter function, called whenever the value is set
  set text(text){
    this._text = text
    console.log("the value was set")
  }

我还编辑了您的 stackblitz 以包含一个示例。 https://stackblitz.com/edit/angular-6qvlrh

其他一切都保持不变。你只需要在文本上使用 ngModel。

<input [(ngModel)]="text">

Answer 4

我认为以上所有答案都是正确的。我喜欢 getter-setter 方法，尽管它添加了几行代码。以防万一你想测试第三种跟踪更改的方法，你分叉了你的代码：https://stackblitz.com/edit/angular-myrrqo

它使用 @ViewChildren 和对 valueChanges 可观察对象的订阅：

export class MyComponentComponent implements AfterViewInit  {

  text="hello world";
  second="hi angular";

  @ViewChildren(NgModel) myInputRef: QueryList<NgModel>;

  ngAfterViewInit() {
    this.myInputRef.forEach(ref =>
      ref.valueChanges.subscribe(val =>
        console.log(`${ref.name}'s value changed to ${val}`)
      )
    );
  }
}

在模板中：

<input [(ngModel)]="text" name="firstInput">
<input [(ngModel)]="second" name="secondInput">

我添加了第二个输入元素，以表明如果您有多个具有双向绑定的元素，则必须使用 @ViewChildren。如果你只有一个元素，你可以使用 @ViewChild(NgModel) myFirstInput: NgModel; 并且代码会更简单。

如何在我们输入 [Angular] 时检测输入字段的变化

How detect changes in an input field as we type-in [Angular]

onchange

typescript

angular