角度表单-FormControlName在FormArray中不适用于FormGroup

问题描述

在FormArray中有一个FormArray。
这是var列表的字符串别名列表。

这是表单树结构的一个示例（已过滤到有问题的路径）：
（注意：每个{}包括根都是一个FormGroup； [] = FormArray；“” = FormControl）

product_id

现在，我们希望能够为所选变量修改别名。
在用户界面中，您有一个表格，其中每行包含一个带有别名作为选项的选择。在选择旁边，您有一个输入可以修改 selected 别名。

这就是我正在做的事情（缩减到表的vars部分）

{
    vars: [
    {
        aliases: [
        { name: "a",val: "" },{ name: "b",val: "" }
        ]
    }
    ]
}

在我看来，<ng-container formArrayName="vars"> <ng-container *ngFor="let item of this.vars.controls; let i = index"> <tr [formGroupName]="i"> <ng-container formArrayName="aliases"> <td> <select #varAliasSelect (change)="listVarAliasIndex = varAliasSelect.selectedIndex"> <option *ngFor="let val of item.get('aliases').value"> {{val.name}} </option> </select> </td> <td [formGroupName]="listVarAliasIndex"> <input type="text" formControlName="val"> </td> </ng-container> </tr> </ng-container> </ng-container> 在更改选择选项时在dom树中已更新。 但是带有listVarAliasIndex的输入只会更改FIRST别名。

就好像输入被永久绑定到formControlName="name"控件，甚至认为它应该是vars.controls[i].controls.aliases.controls[0].controls.val

这是怎么回事？我们不能动态更新vars.controls[i].controls.aliases.controls[listVarAliasIndex].controls.val属性并使子控件反弹到数组中的相应控件吗？

编辑：here's a live example

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）