Свойство Angular FormGroup не обновляется при удалении элементов управления

Question

У меня есть специальная директива валидатора, которая принимает значение FormGroup. Свойство controls в основном обновляется, как и ожидалось, но, похоже, ему не хватает элементов управления, удаляемых из FormGroup. Я впервые использую FormGroup, поэтому не знаю, правильно ли я его реализовал.

Основная структура моей страницы состоит в том, что пользователь может выбрать несколько значений из раскрывающегося списка, и они добавляются в таблицу, которая содержит элемент ввода. Все в этой таблице (то есть одна строка на выбранное значение) находится в том же FormGroup. Если я добавлю 3 строки в таблицу, то group.controls (правильно) содержит name0, name1 и name2. Однако если я затем удаляю 2-й, а затем 3-й выборки, тогда 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>