# Aurelia template form with Object Array

**URL:** <https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408>\
**Category:** Help Requests\
**Created:** [July 9, 2018, 10:17am UTC](https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408 "2018-07-09T10:17:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SNO](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sno/32/650_2.png) [@SNO](https://discourse.aurelia.io/u/SNO)\
**Post date:** [July 9, 2018, 10:17am UTC](https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408/1 "2018-07-09T10:17:51Z")

</div>

How do I create aurelia forms with an binded object array?  
I have a main object that includes an array of sub-objects. Now I want to create one html form providing fields for the main object and all sub-objects, so that the user can add objects to the array dynamically.

```auto
<form>
 <input type="text" name="header-title" value.bind="object.header" />
<input type="text" name="sub-object1-title" value.bind="object.subObjects.title" />
<input type="text" name="sub-object2-title" value.bind="object.subObjects.title" />
... dynamically ...

</form>

```

Can someone give me a hint, how to code that?

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [July 9, 2018, 11:06am UTC](https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408/2 "2018-07-09T11:06:13Z")

</div>

Is this what you mean?

**app.js**

```javascript
export class App {
  items = [];
  
  constructor(){
    this.items.push(new Item("item1","This is item 1"));
    this.items.push(new Item("item2","This is item 2"));
    this.items.push(new Item("item3","This is item 3"));
  }
}

class Item{
  constructor(name, value){
    this.name = name;
    this.value = value;
  }
}

```

**app.html**

```auto
<template>
  <div repeat.for="item of items">
    <input type="text" name="item.name" value.bind="item.value" />
  </div>
</template>

```

Then you can just push a new item on to the array when needed.

---

<div class="post-metadata">

**Author:** ![SNO](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sno/32/650_2.png) [@SNO](https://discourse.aurelia.io/u/SNO)\
**Post date:** [July 9, 2018, 2:21pm UTC](https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408/3 "2018-07-09T14:21:26Z")

</div>

Many thanks. Now I have one additional question. Is there any trick in aurelia to add new “dynamic” DOM elements to the Aurelia-Binding-Template?

Currently new elements are not considered by aurelia (e.g. using the Bootstrap collapsable).

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [July 9, 2018, 7:04pm UTC](https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408/4 "2018-07-09T19:04:43Z")

</div>

Not completely sure what you mean, but this works to show/hide using bootstrap collapse.

```auto
<template>
  <div repeat.for="item of items">
    <a href="#" data-target="${'#' + item.name}" data-toggle="collapse">Toggle ${item.name}</a>
    <input class="collapse" type="text" id="${item.name}" name="item.name" value.bind="item.value" />
  </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![SNO](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sno/32/650_2.png) [@SNO](https://discourse.aurelia.io/u/SNO)\
**Post date:** [July 10, 2018, 5:24am UTC](https://discourse.aurelia.io/t/aurelia-template-form-with-object-array/1408/5 "2018-07-10T05:24:10Z")

</div>

> [@dnkm](#):
>
> \<div repeat.for=“item of items”\> \<a href=“#” data-target=“${‘#’ + item.name}” data-toggle=“collapse”\>Toggle ${item.name}\</a\> \<input class=“collapse” type=“text” id=“${item.name}” name=“item.name” value.bind=“item.value” /\> \</div\>

Thank you for the response. Yes, this example works. I found my mistake… adding new elements to the array (e.g. with a button with click.delegate=“addNewItem()”) I forgot to give the new item a key so that the collapse had no unique identifier.

Many thanks for taking the time to give support. 🙂