添加到 Reactive Forms 数组的开头 Angular

Question

请查看相关插件

https://plnkr.co/edit/f0BxpinhuqVz8o6IIFaL?p=preview

stack overflow makes you put code if a plunker is linked
but it is too much code to copy paste here it would just
look messy so I a am putting this comment instead.

如果您运行然后单击添加按钮，一个新条目将添加到数组中，但表单视图不反映表单状态，而是第一个条目被复制，最后一个条目是走了。

如果有人对我做错了什么有任何想法或指导，我将非常感激，因为我一直在做一个看似简单的任务。

我尽量遵循官方 Angular Reactive Forms 指南来构建这个示例。

Answer 1

似乎 Angular 无法跟踪您 formArray 中的对象索引。这可以通过使用 trackBy 来解决。使用函数将其添加到您的迭代中：

<div *ngFor="let detail of detailArray.controls; let i=index; trackBy:trackByFn" [formGroupName]="i">

并在组件中：

trackByFn(index: any, item: any) {
  return index;
}

你的PLUNKER

添加到 Reactive Forms 数组的开头 Angular

Add to the beginning of Reactive Forms Array Angular

forms

angular

angular-reactive-forms