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

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

这是我的密码：

my component.component.html

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

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

两个重要信息：

我也试过了

DoCheck

，但这不是我想要的。我想看看是否只更改了输入字段的值。但是

ngDoCheck

在其余组件中的每一个细微更改之后都会被调用，因为它使用的是

zone.js

（我在某个地方读过）

我不能使用

（keydown）

，因为我想稍后实现验证代码。我希望在输入时进行验证。但使用keydown时，我注意到即使在输入的值有效（比如日期/时间）之后，我也必须通过一些按键来触发验证代码

记住以上两点，请纠正我。这是我的建议

您可以使用

input（）

： 示例：

HTML:

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

在您的示例中： HTML:

---

这两项更改是跟踪输入更改所必需的：

更新组件模板以绑定值并指定（更改）事件

更新组件脚本以指定onChange方法

工作解决方案：

1。my component.component.html

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

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

---

Angular本身处理更改检测。当它发生时，你只需要进入逻辑。在大多数情况下，这比使用eventlisteners更可取，eventlisteners由本线程中的大多数其他答案提出

无论何时更改输入，angular都会访问设置字符串的变量

当变量发生变化时，一种方法是使用

get

ter和

set

ter

  // 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，包括一个例子。

其他一切都是一样的。你只需要在文本上使用ngModel

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

---

我认为以上所有答案都是正确的。我喜欢getter setter方法，尽管它添加了几行代码。以防您想测试跟踪代码更改的第三种方法：

它使用

@ViewChildren

和订阅

值更改

可观察：

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}`)
      )
    );
  }
}

导出类MyComponentComponent实现AfterViewInit{
text=“你好，世界”；
second=“hi angular”；
@ViewChildren（NgModel）myInputRef:QueryList；
ngAfterViewInit（）{
this.myInputRef.forEach（ref=>
ref.valueChanges.subscribe（val=>
log（`${ref.name}的值更改为${val}`）
)
);
}
}

在模板中：

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

---

我添加了第二个输入元素，以表明如果有多个具有双向绑定的元素，则必须使用

@ViewChildren

。如果只有一个元素，则可以使用

@ViewChild（NgModel）myFirstInput:NgModel而且代码会更简单。
我正在一个接一个地尝试所有答案，并运行单元测试用例。我会很快回来的。谢谢大家。：-）这个答案同样有效。让我把这个给我的技术主管看看。请给我一些时间接受。请解释这个答案。我将在生产代码中使用它。我可能会被技术负责人盘问。好的，
（输入）
是一种检测何时将
char
引入输入元素的操作，如果您尝试
console.log（事件），则通过使用方法
change（$event）
发送事件以获取其值并根据需要使用
你会发现它是一个包含太多卑鄙信息的对象，但对我们来说重要的只是它的
值，这是我们使用
event.target.value时得到的。我也会向我的技术负责人展示这个解决方案。嗨，戈皮纳斯，这不是我想要的。在您的解决方案中，它将仅检测更改，并且在按下enter键时也会检测更改。但在我的情况下，我希望在打字的同时进行检测。在这里，我试过你的：或者我错过了什么。请检查stackblitz。嗨，Tanzeel，我发现文本字段中键入的每个键实际上都会触发“onchange”。事件响应发生得很好。问题似乎出在处理更改的值的验证函数（validate（sDate:string））上。此功能需要更新以满足要求。其他地方不需要改变。
<input [(ngModel)]="text">

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">