Docs

Docs

Binding Arrays

Working with arrays using form binding API.

This page explains working with arrays when building TypeScript form views using form binding. Consider a form for a Java bean that has this structure:

/**
 * Example bean with array field
 */
public class Group {
    ...

    public Person[] getPeople() {
        ...
    }

    public void setPeople(Person[] people) {
        ...
    }
}

Repeating the Array Item Template

A common need when working with arrays is to iterate over the items and stamp a template for each item. With form binding, array models are iterable. You can use the useFormArrayPart hook to iterate over the model and to get and set the value of the array.

As you also need to get the field function for each item using the useFormPart hook, you need to create a component for the array item template.

Try using a repeat directive to loop through the items and stamp the item templates.

import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

import { repeat } from 'lit/directives/repeat.js';

import { Binder, field } from '@vaadin/hilla-lit-form';

import GroupModel from '.../GroupModel';

@customElement('group-form-view')
class GroupFormView extends LitElement {
  binder = new Binder(this, GroupModel);

  render() {
    return html`
      ${repeat(this.binder.model.people, personBinder => html`
        <div>
          <vaadin-text-field
            label="Full name"
            ${field(personBinder.model.fullName)}
          ></vaadin-text-field>

          <strong>Full name:</strong>
          ${personBinder.value.fullName}
        </div>
      `)}
    `;
  }
}

Adding & Removing Array Items

To append or prepend a new item to an array, use the appendItem() method on the array binder node:

this.binder.for(this.binder.model.people).appendItem();
this.binder.for(this.binder.model.people).prependItem();

By default, the new item values are empty. You can specify the new item value as an argument:

this.binder.for(this.binder.model.people).appendItem({fullName: 'Jane Doe'});

To remove an item, use the removeSelf() method on the item binder node like this:

personBinder.removeSelf();

The following example demonstrates adding and removing array items with the form view template:

class GroupFormView extends LitElement {
  // ...

  render() {
    return html`
      ${repeat(this.binder.model.people, personBinder => html`
        <div>
          <vaadin-text-field
            label="Full name"
            ${field(personBinder.model.fullName)}
          ></vaadin-text-field>

          <vaadin-button @click=${() => personBinder.removeSelf()}>
            Delete
          </vaadin-button>
        </div>
      `)}

      <vaadin-button
        @click=${() => this.binder.for(this.binder.model.people).appendItem()}
      >
        Add
      </vaadin-button>
    `;
  }
}