订阅表单控件数组-Angular 2/4答案

【问题标题】：Subscribing for a array of form controls-Angular 2/4订阅表单控件数组-Angular 2/4
【发布时间】：2018-06-04 18:18:30
【问题描述】：

有什么方法可以订阅表单控件数组而不是执行多个 get 。在我的场景中，我得到了一个对象，如图所示我只想在 textfielda、textfieldb 和 numbera 值更改时订阅。我尝试订阅整个表单的值更改（工作正常），但这是一项昂贵的操作，所以有什么解决方法可以实现这一点。这个字段是动态的，所以我不能使用 ngmodel .任何帮助表示赞赏。

【问题讨论】：

您仍然需要获取每个单独的控件，然后将它们的 valueChanges 添加到数组中，然后使用 Observable.merge。这是我几天前关于将 valueChanges 获取到 FormArray 中的特定元素的示例，我认为您可以修改并获得所需的内容：stackblitz.com/edit/formarraything
所以，没有办法从 angular 开箱即用。你能更深入地解释你的方法吗
是的。目标是在 FormArray 的特定/单个元素上获取 valueChanges。如果您订阅 FormArray ValueChanges，它将记录整个数组。因为它是一个FormArray，所以我可以动态添加和删除FormControl。出于这个原因，我需要使用 forEach 获取每个控件，然后将 control.valueChanges 推送到 observableArray。最后，我还将formArray.valueChanges 推送到 observableArray 以从 FormArray 中获取更改。然后我使用Observable.merge 合并所有这些值更改，然后使用distinctUntilChanged 仅在值更改时获取值。

标签： angular angular2-forms angular4-forms

【解决方案1】：

这就是我所做的，它是从我的代码中复制并编辑的。

我的表单数组中的每个表单组都有一个数据类型：

newFormArray.push(this.fb.group({
  datatype: datatype,
  value: value
}));

这些是后端连接到数据库的 api 调用的值。

你现在要做的是：

this.form.valueChanges.subscribe((item: any) => {
  if(item.array[i].datatype === 'textarea'){ //do something
  switch (item.array[i].datatype) { // or with a switch
        case 'textarea':
          //do textarea
          break;

HTML 中的 Ofc：

<div *ngIf="item.datatype === 'textarea'"> // show textarea

【讨论】：