Question

我在formArray中添加和删除formGroup。我使用trackBy跟踪要删除的ID。

良好的索引传递给函数delete(i)，并删除形式良好的formArray元素，但最后一次，dom中最后一个消失。

我需要此trackBy，否则当我在输入的内部编写内容时，我会失去焦点：-（。

我在删除时尝试过；过滤器，但我的对象是FormArray或AbstractControl []

Answer 1

formArrayName必须在* ngFor之外，并且* ngFor超出了get（'contacts'）。controls

<div formArrayName="contacts" class="bloc-border bloc-color">
     <div *ngFor="let item of siteForm.get('contacts').controls; 
           let i = index; " [formGroupName]="i">
           <div class="col-sm-12" style="display:flex;">
             <input class="form-control" type="text" [formControlName]="'type'">
              - {{i}}
              <button  type="button"  (click)="deleteContact(i)">DELETE</button>
            </div>
     </div>
</div>

更新有时使用直接的siteForm.get（'contact'）。controls会给我们一个错误（我认为在某些版本的Anglar中，但我不确定）。为了避免这种情况，我们可以创建一个getter thar返回formArray

get contacts():FormArray|null
{
    return this.siteForm?this.siteForm.get('contacts') as FormArray:null
}

并使用

<div *ngFor="let item of contacts.controls;...>

Answer 2

发生这种情况是因为您正在使用trackBy索引。

使用：trackBy：trackElement

它解决了我的问题

角6 removeAt和trackBy更新formArray，但不正确dom

2 个答案: