为什么 ngModelChange 会发出先前的输入值？答案

【问题标题】：Why is ngModelChange emitting the previous value of input?为什么 ngModelChange 会发出先前的输入值？
【发布时间】：2017-05-26 15:06:29
【问题描述】：

我有一个（非常）简单的 Angular2 组件，只有一个文本字段。我希望每次对此字段进行任何更改时，控制台都会记录该字段的值。 IE 如果有人键入“ABCD”，控制台应该记录：“A”、“AB”、“ABC”、“ABCD”。

但是，我看到的情况是控制台在注册新输入之前记录了该字段的 PREVIOUS 值。所以相反，我得到：“”，“A”，“AB”，“ABC”。

如何使控制台在输入新字符后记录文本字段的值？

非常感谢。

到目前为止我的代码：

import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'modal-test-form',
  template: `
    <form>
      <input name="data" placeholder="Type something" ngModel (ngModelChange)="onTextChange()"/>
    </form>
  `,
  //templateUrl: './modal-test-form.component.html',
  styleUrls: ['./modal-test-form.component.css']
})
export class ModalTestFormComponent{
  @ViewChild(NgForm) testForm : NgForm;

  constructor() { }

  onTextChange() {
    console.log(this.testForm.form.value);
  }

}

【问题讨论】：

什么“旧值”？
@AJT_82 所以现在发生的是 console.log(this.testForm.form.value) 在输入新字符之前记录表单的值。所以如果我只是输入“ABC”，控制台只会记录“AB”。我希望它改为记录“ABC”，这是当前值。

标签： forms angular input reactive

【解决方案1】：

改变你的方法

(ngModelChange)="onTextChange($event)"

在组件类中

onTextChange(val: string): any {
  console.log("updated value is --->", val);
}

【讨论】：

解决了！谢谢

【解决方案2】：

改变方法

(ngModelChange)="onTextChange()"

根据你在哪里 console.log 表单中的值，我认为你在提交问题时写了一个“错误”（？？），实际上你的意思是你的 html 中有这个方法：

(ngModelChange)="emitDataValue()"

不过还是改成：

(keyup)="emitDataValue()"

它似乎按你希望的方式工作。

【讨论】：