Question

我正在创建一个表，其中一行是一个formGroup，而某些单元格处于另一种形式。可行（为清晰起见，已简化）：

<tr formArrayName="channels" role="row" *ngFor="let channel of form.get('channels').controls; let i=index">
    <td [formGroupName]="i">
        <input formControlName="channelName" type="text" /> 
    </td>
    <div [formGroupName]="i">
        <td formArrayName="tasks" *ngFor="let task of channel.get('tasks').controls; let j=index">
            <div [formGroupName]="j">
                <input formControlName="taskName" type="text" />
            </div>
        </td>
    </div>
</tr>

但是如您所见，第二个div周围直接有一个td，这违反了HTML的结构。如果尝试将formGroupName属性直接添加到td，则会收到编译错误：

ERROR Error: Cannot find control with path: 'channels -> 0 -> 0'

channels是一个包含多个formControls的formArray，每个通道都包含一个嵌套的tasks formArray，每个任务中都包含多个formControls，这似乎是我进行计算的正确组织将需要在打字稿中做。无论如何，没有div并且没有展平formControls的嵌套结构就可以编写HTML吗？

Answer 1

<tr formArrayName="channels" role="row" *ngFor="let channel of form.get('channels').controls; let i=index">
    <td [formGroupName]="i">
        <input formControlName="channelName" type="text" /> 
    </td>
    <div [formGroupName]="i">
       <div formArrayName="tasks">
        <td  *ngFor="let task of channel.get('tasks').controls; let j=index">
            <div [formGroupName]="j">
                <input formControlName="taskName" type="text" />
            </div>
        </td>
       </div>
    </div>
</tr>

如何在不违反HTML规则的情况下在表中编写嵌套formGroups？

1 个答案: