Examples Dynamic Arrays

Dynamic Arrays

Use fieldArray() to manage dynamic lists with add, remove, and per-item validation.

What this example shows

fieldArray()

form.fieldArray("tags")

Add & Remove

tagsArray.add(), .remove(i)

Per-Item Errors

tags[0], tags[1] validation

Preview LiveView Vue

Title

How it works

1 Define an embedded schema or relation

Use embeds_many or has_many to define array items. Each item gets its own changeset and validation.

defmodule Tag do
  use Ecto.Schema
  @derive LiveVue.Encoder
  embedded_schema do
    field :name, :string
  end
end

embeds_many :tags, Tag, on_replace: :delete

2 Get an array field reference

Use form.fieldArray("tags") to get a reactive array with add, remove, and iteration capabilities. Nested access is supported.

const tagsArray = form.fieldArray("tags")

// Add a new tag object
tagsArray.add({ name: '' })

// Remove tag at index
tagsArray.remove(index)

3 Iterate and access nested fields

Loop over tagsArray.fields.value and use tagField.field('name') to access each item's properties with full error support.

<div v-for="(tagField, index) in tagsArray.fields.value" :key="index">
  <input v-bind="tagField.field('name').inputAttrs.value" />
  <div v-if="tagField.field('name').errorMessage.value">
    {{  tagField.field('name').errorMessage.value }}
  </div>
  <button @click="tagsArray.remove(index)">Remove</button>
</div>

4 Use cast_embed for validation

Call cast_embed(:tags) to automatically validate each item using its own changeset. Errors are mapped per-item.

def changeset(post, attrs) do
  post
  |> cast(attrs, [:title])
  |> validate_required([:title])
  |> cast_embed(:tags, with: &Tag.changeset/2)
end

Next up: File uploads with useLiveUpload()

View example →