角度表单-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 (将#修改为@)