Question

我有一个自定义的验证程序指令，该指令采用一个角度FormGroup。 controls属性主要按预期更新，但是似乎很难从FormGroup中删除控件。这是我第一次使用FormGroup，所以我不知道我是否实施不正确。

我页面的基本结构是用户可以从下拉列表中选择多个值，并将它们添加到包含输入元素的表中。该表中的所有内容（即每个选定值一行）都在同一FormGroup中。如果我在表中添加3行，则group.controls（正确）包含name0，name1和name2。但是，如果我随后删除了第二个选择和第三个选择，则group.controls包含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>

[appFnValidate]="testValidator"代码当前仅注销到控制FormGroup包含的控制台。

我进行了一次堆放，可以复制。如果您打开开发者控制台，则可以查看验证程序的日志记录。 https://stackblitz.com/edit/angular-form-group-not-updating

从组中删除控件时，有什么想法可以使FormGroup controls属性正确更新？

Answer 1

我在完成问题格式化时就意识到了该错误的根本原因，所以我认为我还是应该发布它，以希望将来对其他人有所帮助！

此问题是由表中输入控件的名称引起的，该名称设置如下：[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>

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

1 个答案: