items.component.ts

@Component({
    template: 
        <button (click)="addItem()">Add Item</button>
        @for (item of form.items().value(); track $index) {
            <input [field]="form.items[$index]" />
            <button (click)="removeItem($index)">Remove</button>
        }
        @for (error of form.items().errors(); track error) {
            @if (error.kind === 'noItems') {
                <div class="error-message">At least one item is required.</div>
            }
        }
        <button [disabled]="form().invalid()">Submit</button>,
})
export class ItemsComponent {
    items = signal<{items: string[]}>({items: []})
    form = form(this.items, path => {
        validate(path.items, items => {
            if (
                items.value().some(item => item.trim() === '') || 
                items.value().length === 0
            ) {
                return {kind: 'noItems'};
            }
            return null;
        });
    });

    addItem() {
        this.items.update(prev => ({items: [...prev.items, '']}));
    }

    removeItem(index: number) {
        this.items.update(prev => ({
            items: prev.items.filter((_, i) => i !== index)
        }));
    }
}