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

【问题标题】：Angular FormGroup controls property not updated when removing controls删除控件时未更新 Angular FormGroup 控件属性
【发布时间】：2018-11-05 15:27:38
【问题描述】：

我有一个自定义验证器指令，它接收角度 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 属性正确更新？

【问题讨论】：

你没有 FormGroup - 它用于 ReactiveForm-，只有 [(ngModel)] - 用于模板表单-
@Eliseo 感谢您的评论，当我试图阅读该主题时，我有点困惑。 testValidator 方法接受 FormGroup 作为参数，那么它来自哪里？我认为这与ngModelGroup 属性有关。

标签： angular validation angular-forms

【解决方案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>

【讨论】：