Repeater

A dynamic list of form rows.

Name

import { BuiRepeater } from 'ng-blatui';

<bui-repeater [fields]="fields" [(rows)]="rows" />
// fields = [{ key: 'name', label: 'Name' }, { key: 'email', label: 'Email' }]

Multiple fields

Name

<bui-repeater [fields]="fields" [(rows)]="rows" addLabel="Add guest" />
// fields = [{ key: 'name', label: 'Name' }, { key: 'email', label: 'Email', type: 'email' }]

With max

Name

<!-- [max] caps the rows and disables the add button -->
<bui-repeater [fields]="fields" [(rows)]="rows" [min]="1" [max]="3" />

API reference

Inputs

Prop	Type	Default	Description
`fields`	`readonly RepeaterField[]`	`[]`	Column definitions rendered for every row.
`min`	`number`	`1`	Minimum number of rows that must remain (remove is disabled at this count).
`max`	`number \| null`	`null`	Maximum number of rows allowed, or null for unlimited.
`addLabel`	`string`	`'Add row'`	Text shown on the add-row button.
`removeLabel`	`string`	—	Accessible label override for the remove-row buttons.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`rows`	`Record<string, string>[]`	`[]`	Row data keyed by field key. Two-way bindable with `[(rows)]`.

Types

RepeaterField

Field	Type	Description
`key`	`string`	Property name used to store this field's value in each row.
`label`	`string`	Column header shown above the field.
`placeholder`?	`string`	Placeholder text for the field's input.
`type`?	`string`	Input type attribute (e.g. text, email, number).

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.