如何使用单独的添加按钮在IONIC2 / Angular2表单中添加嵌套字段

Question

我需要在表单中添加嵌套字段。我完全按照本教程 http://brophy.org/post/nested-reactive-forms-in-angular2/。

虽然每件事对我来说都很好，除了我需要添加按钮与每个孩子在一起，然后单击在他们之间添加孩子。

例如：如果有

儿童1 添加 BTN 子项2 添加 儿童3 添加 儿童4 添加

现在，如果单击子项 2 的添加 BTN，则应在子项 2 之后插入新字段。

我试过了：在 for 循环中使用标签，如下所示，它显示添加按钮，但在单击该新字段时，总是在末尾插入不需要的。

<a href="" (click)="addChild()">
Add Child
</a>

我的想法：我可以在 add 函数中按如下方式传递 id，然后在该索引处插入到数组中。但不幸的是，不知道如何做到这一点。

(click)="addChild(idx)"; 

希望清楚。请让我知道我是否可以使用这种方法实现所需的目标。提前谢谢。

答：毕竟我跟着 https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2.. 并通过以下方式解决——

control.insert(i+1, addCtrl);

Answer 1

只需像这样存储 ngFor 循环的索引：

<div *ngFor="let item of items; let i = index;">
{{item.name}}
<a href="" (click)="addChild(i)">
Add Child
</a>
</div>

变量 i 现在将存储每个项目的索引，在按钮单击事件时，项目的索引将作为参数发送到 addChild(( 方法。然后，您可以将新项添加到组件中的该位置：

export class FieldsComponent {
items: Array<any> = [
{name: 'item1'}, 
{name: 'item2'}, 
{name: 'item3'}, 
{name: 'item4'}
];
addChild(index: number): void {
//Insert after the index of the clicked button
items.splice(index + 1, 0, {name: 'Added item'});
}
}

Answer 2

毕竟我跟着 https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2..并解决了——

control.insert(i+1, addCtrl);

希望它能帮助某人。