angular4更改表单中显示的值_如何在Angular中观察表单更改

如果您使用FormBuilder，请参阅@dfsq的答案。

如果您不使用FormBuilder，则有两种方法可以将更改通知您。

方法1

如问题评论中所述，在每个输入元素上使用事件绑定。添加到您的模板：

(ngModelChange)="doSomething($event)">

然后在您的组件中：

doSomething(newValue) {

model.first_name = newValue;

console.log(newValue)

}

该表单页面有关于ngModel一些额外的信息，那就是与此有关：

这ngModelChange不是元素事件。它实际上是NgModel指令的事件属性。当Angular看到表单中的绑定目标时[(x)]，它期望x指令具有x输入属性和xChange输出属性。

另一个奇怪的是模板表达式model.name = $event。我们习惯于看到$event来自DOM事件的对象。ngModelChange属性不会产生DOM事件。这是一个Angular EventEmitter属性，在触发时返回输入框的值。

我们几乎总是喜欢[(ngModel)]。如果必须在事件处理中做一些特殊的事情，例如去抖动或限制按键，我们可以拆分绑定。

就您而言，我想您想做些特别的事情。

方法二

定义一个本地模板变量并将其设置为ngForm。

在输入元素上使用ngControl。

使用@ViewChild获取对表单的NgForm指令的引用，然后订阅NgForm的ControlGroup进行更改：

....

required [(ngModel)]="model.first_name">

...

required [(ngModel)]="model.last_name">

class MyForm {

@ViewChild('myForm') form;

...

ngAfterViewInit() {

console.log(this.form)

this.form.control.valueChanges

.subscribe(values => this.doSomething(values));

}

doSomething(values) {

console.log(values);

}

}

plunker

有关方法2的更多信息，请参见Savkin的视频。

另请参阅@Thierry的答案，以获取有关valueChanges可观察对象可以执行的操作的更多信息(例如，在处理更改之前先进行反跳/等待)。