删除控件时未更新Angular FormGroup控件属性

我有一个自定义验证器指令，它接受角度

FormGroup

。

控件

属性主要按预期更新，但它似乎很难从

表单组

中删除控件。这是我第一次使用

表单组

，所以我不知道我是否错误地实现了它

我的页面的基本结构是，用户可以从下拉列表中选择多个值，并将它们添加到包含输入元素的表中。此表中的所有内容（即每个选定值一行）都位于相同的

FormGroup

。如果向表中添加3行，则

group.controls

（正确）包含

name0

、

name1

和

name2

。但是，如果我随后删除第二个和第三个选择，则

组控件包含
name0
（正确）和
name2
（不正确）

这是表格的基本结构：

<form #modelsForm="ngForm">

    <div class="form-group" ngModelGroup="testModelGroup" #componentModelsFormGroup="ngModelGroup" [appFnValidate]="testValidator">
        <ng-select [items]="models" bindLabel="name" name="models" #modelSelection="ngModel" [(ngModel)]="selectedModels" (add)="selectModel($event)" (remove)="deselectModel($event)" (clear)="deselectAll()">
    </ng-select>

    <table class="table table-striped table-condensed table-hover table-bordered text-nowrap no-margin">
        <thead>
            <tr>
                <th>Model</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let componentModel of component.componentModels; let rowNo = index">
                <td>
                    {{componentModel.modelName}}
                </td>
                <td>
                    <input class="form-control" required #componentModelNameValue="ngModel" [name]="'name' + rowNo" [(ngModel)]="componentModel.name" />
                </td>
            </tr>
        </tbody>
    </table>

  </div>

</form>


模型
名称
{{componentModel.modelName}

[appFnValidate]=“testValidator”
代码当前刚刚注销到控制台，控制台控制
表单组
包含的内容

我做了一个stackblitz允许复制。如果打开开发控制台，您将能够看到来自验证程序的日志记录。

当从组中删除控件时，我需要做些什么才能使
FormGroup
控件
属性正确更新？当我完成问题的格式设置时，我意识到了这个错误的根本原因，所以我想我还是发布它吧，希望将来它能让其他人受益

此问题是由表中输入控件的名称引起的，其设置如下：
[name]=“'name'+rowNo”
其中
rowNo
来自
*ngFor=“let componentModel of component.componentModels；let rowNo=index”

但是，当行被删除时，除非它们是最后一行，否则删除会更改其他行的索引。这似乎阻止angular正确跟踪所有内容（可能是因为名称被重用了-即，如果我删除名为
name0
的控件，则另一个控件将重命名为
name0
）

修复非常简单，只需为表中的每一行使用更好的唯一标识符！我使用了
componentModel.modelId
，我知道这在我的场景中是唯一的。这是唯一需要更改的代码。
tr
标签因此变成：

<tr *ngFor="let componentModel of component.componentModels">
    <td>
        {{componentModel.modelName}}
    </td>
    <td>
        <input class="form-control" required #componentModelNameValue="ngModel" [name]="'name' + componentModel.modelId" [(ngModel)]="componentModel.name" />
    </td>
</tr>


{{componentModel.modelName}
您没有FormGroup-它用于ReactiveForm-，只是[（ngModel）]-用于模板形式-@Eliseo谢谢您的评论，当我试图围绕主题阅读时，我有点困惑。
testValidator
方法将
FormGroup
作为参数，那么这是从哪里来的呢？我认为这与
ngModelGroup
属性有关。