如何检测 Angular 2 反应/动态表单的一个元素发生的变化？

Posted 2023-02-22

【中文标题】如何检测 Angular 2 反应/动态表单的一个元素发生的变化？

【英文标题】：How do I detect changes that occur to one element of an Angular 2 reactive/dynamic form?

【发布时间】：2017-04-02 08:16:49

【问题描述】：

我正在尝试检测使用反应式表单构建的一个特定表单元素的变化。

我使用*ngFor 和*ngSwitch 指令构建了一个反应式表单，如https://angular.io/docs/ts/latest/cookbook/dynamic-form.html# 所示。我的表单当前包含输入类型text 和file。我使用更改事件来捕获文件上传任务，因此我需要检测file 输入元素中的更改，而不是text 输入元素中的更改。这就是我遇到问题的地方。使用*ngSwitch 或*ngIf 构建的表单似乎不会触发change 事件。我创建了一个plunker，可用于重现我面临的问题。

如果我检测到每个表单元素的变化，该表单就可以正常工作。 （plunker 示例中的 form2）

请参阅下面链接中的 plunker 以重新解决我面临的问题。 https://plnkr.co/edit/1dMfn7gmR3rHq6xcgr2a?p=preview

有人知道如何解决这个问题吗？

【参考方案1】：

如果你使用 rxjs，这应该可以工作；

this.form1.controls['image1'].valueChanges.subscribe((data) => 
     console.log(data);
);

在创建form1 表单组后将此代码放入ngOnInit 方法中。每当image1 的值发生变化时，订阅者都会记录data。

编辑

由于file类型的input的值从未改变，你不能看到我说的变化，对不起。

在 plunker 中，所有控件类型的表单元素都是textbox。这就是为什么当您只在一个元素中写入(change) 时无法触发事件的原因。因为您的 switch case 是基于控件类型的，并且所有表单元素的控件类型都是textbox。将输入类型为file的控制类型从textbox更改为file。

【讨论】：

我尝试了您的建议，但仍然没有检测到更改。 plnkr.co/edit/1dMfn7gmR3rHq6xcgr2a?p=preview

哈哈哇。谢谢，我完全错过了。非常感谢！