Question

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

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

例如：如果有

child1 add-btn child2 add-btn child3 add-btn child4 add-btn

现在如果单击child2的add-btn，则应在child2之后插入新字段。

我尝试过：在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);

希望它会对某人有所帮助。

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

2 个答案: