Перейти к основному содержимому

ArrayNode

Defined in: form/nodes/array-node.ts:43

ArrayNode - массив форм с реактивным состоянием

Example​

const array = new ArrayNode({
  title: { value: '', component: Input },
  price: { value: 0, component: Input },
});

array.push({ title: 'Item 1', price: 100 });
array.at(0)?.title.setValue('Updated');
console.log(array.length.value); // 1

Extends​

Type Parameters​

T​

T extends object

Constructors​

Constructor​

new ArrayNode<T>(schema, initialItems): ArrayNode<T>;

Defined in: form/nodes/array-node.ts:79

Parameters​

schema​

FormSchema<T>

initialItems​

Partial<T>[] = []

Returns​

ArrayNode<T>

Overrides​

FormNode.constructor

Methods​

at()​

at(index): FormProxy<T> | undefined;

Defined in: form/nodes/array-node.ts:272

Получить элемент по индексу

Parameters​

index​

number

Индекс элемента

Returns​

FormProxy<T> | undefined

Типизированный GroupNode proxy или undefined если индекс вне границ

clear()​

clear(): void;

Defined in: form/nodes/array-node.ts:252

Удалить все элементы массива

Returns​

void

Remarks​

Вызывает dispose() на всех элементах для очистки подписок

clearErrors()​

clearErrors(): void;

Defined in: form/nodes/array-node.ts:403

Очистить все errors (array-level + item-level)

Returns​

void

Example​

arrayNode.clearErrors();
console.log(arrayNode.errors.value); // []

Overrides​

FormNode.clearErrors

disable()​

disable(): void;

Defined in: form/nodes/form-node.ts:365

Отключить узел

Template Method: обновляет статус в базовом классе, вызывает hook для кастомной логики в наследниках

Отключенные узлы не проходят валидацию и не включаются в getValue()

Returns​

void

Inherited from​

FormNode.disable

dispose()​

dispose(): void;

Defined in: form/nodes/array-node.ts:531

Очистить все ресурсы узла Рекурсивно очищает все subscriptions и элементы массива

Returns​

void

Example​

useEffect(() => {
  return () => {
    arrayNode.dispose();
  };
}, []);

Overrides​

FormNode.dispose

enable()​

enable(): void;

Defined in: form/nodes/form-node.ts:376

Включить узел

Template Method: обновляет статус в базовом классе, вызывает hook для кастомной логики в наследниках

Returns​

void

Inherited from​

FormNode.enable

forEach()​

forEach(callback): void;

Defined in: form/nodes/array-node.ts:456

Итерировать по элементам массива

Parameters​

callback​

(item, index) => void

Функция, вызываемая для каждого элемента с типизированным GroupNode proxy

Returns​

void

getErrors()​

getErrors(options?): ValidationError[];

Defined in: form/nodes/form-node.ts:226

Получить ошибки валидации с фильтрацией

Позволяет фильтровать ошибки по различным критериям:

  • По коду ошибки
  • По сообщению (частичное совпадение)
  • По параметрам
  • Через кастомный предикат

Без параметров возвращает все ошибки (эквивалент errors.value)

Parameters​

options?​

ErrorFilterOptions

Опции фильтрации ошибок

Returns​

ValidationError[]

Отфильтрованный массив ошибок валидации

Example​

// Все ошибки
const allErrors = form.getErrors();

// Ошибки с конкретным кодом
const requiredErrors = form.getErrors({ code: 'required' });

// Ошибки с несколькими кодами
const errors = form.getErrors({ code: ['required', 'email'] });

// Ошибки по сообщению
const passwordErrors = form.getErrors({ message: 'Password' });

// Ошибки по параметрам
const minLengthErrors = form.getErrors({
  params: { minLength: 8 }
});

// Кастомная фильтрация
const customErrors = form.getErrors({
  predicate: (err) => err.code.startsWith('custom_')
});

Inherited from​

FormNode.getErrors

getValue()​

getValue(): T[];

Defined in: form/nodes/array-node.ts:283

Получить значение узла (non-reactive) Использует .peek() для получения значения без создания зависимости

Returns​

T[]

Overrides​

FormNode.getValue

insert()​

insert(index, initialValue?): void;

Defined in: form/nodes/array-node.ts:163

Вставить элемент в массив

Parameters​

index​

number

Индекс для вставки

initialValue?​

Partial<T>

Начальные значения для нового элемента

Returns​

void

map()​

map<R>(callback): R[];

Defined in: form/nodes/array-node.ts:468

Маппинг элементов массива

Type Parameters​

R​

R

Parameters​

callback​

(item, index) => R

Функция преобразования с типизированным GroupNode proxy

Returns​

R[]

Новый массив результатов

markAsDirty()​

markAsDirty(): void;

Defined in: form/nodes/form-node.ts:308

Отметить узел как dirty (значение изменено)

Template Method: обновляет signal в базовом классе, вызывает hook для кастомной логики в наследниках

Returns​

void

Inherited from​

FormNode.markAsDirty

markAsPristine()​

markAsPristine(): void;

Defined in: form/nodes/form-node.ts:319

Отметить узел как pristine (значение не изменено)

Template Method: обновляет signal в базовом классе, вызывает hook для кастомной логики в наследниках

Returns​

void

Inherited from​

FormNode.markAsPristine

markAsTouched()​

markAsTouched(): void;

Defined in: form/nodes/form-node.ts:286

Отметить узел как touched (пользователь взаимодействовал)

Template Method: обновляет signal в базовом классе, вызывает hook для кастомной логики в наследниках

Returns​

void

Inherited from​

FormNode.markAsTouched

markAsUntouched()​

markAsUntouched(): void;

Defined in: form/nodes/form-node.ts:297

Отметить узел как untouched

Template Method: обновляет signal в базовом классе, вызывает hook для кастомной логики в наследниках

Returns​

void

Inherited from​

FormNode.markAsUntouched

move()​

move(from, to): void;

Defined in: form/nodes/array-node.ts:197

Переместить элемент массива с позиции from на позицию to

Parameters​

from​

number

Индекс перемещаемого элемента

to​

number

Целевой индекс

Returns​

void

Remarks​

Реордер не уничтожает элемент (dispose НЕ вызывается) — тот же инстанс под-формы переезжает на новую позицию, состояние/валидация сохраняются. Длина не меняется.

Example​

// Поднять элемент #2 на одну позицию вверх
form.items.move(2, 1);

onDisable()​

protected onDisable(): void;

Defined in: form/nodes/array-node.ts:559

Hook: вызывается после disable()

Для ArrayNode: рекурсивно отключаем все элементы массива

Returns​

void

Example​

// Отключить весь массив полей
form.items.disable();

// Все элементы становятся disabled
form.items.forEach(item => {
  console.log(item.status.value); // 'disabled'
});

Overrides​

FormNode.onDisable

onEnable()​

protected onEnable(): void;

Defined in: form/nodes/array-node.ts:581

Hook: вызывается после enable()

Для ArrayNode: рекурсивно включаем все элементы массива

Returns​

void

Example​

// Включить весь массив полей
form.items.enable();

// Все элементы становятся enabled
form.items.forEach(item => {
  console.log(item.status.value); // 'valid' или 'invalid'
});

Overrides​

FormNode.onEnable

onMarkAsDirty()​

protected onMarkAsDirty(): void;

Defined in: form/nodes/array-node.ts:435

Hook: вызывается после markAsDirty()

Для ArrayNode: рекурсивно помечаем все элементы массива как dirty

Returns​

void

Overrides​

FormNode.onMarkAsDirty

onMarkAsPristine()​

protected onMarkAsPristine(): void;

Defined in: form/nodes/array-node.ts:444

Hook: вызывается после markAsPristine()

Для ArrayNode: рекурсивно помечаем все элементы массива как pristine

Returns​

void

Overrides​

FormNode.onMarkAsPristine

onMarkAsTouched()​

protected onMarkAsTouched(): void;

Defined in: form/nodes/array-node.ts:417

Hook: вызывается после markAsTouched()

Для ArrayNode: рекурсивно помечаем все элементы массива как touched

Returns​

void

Overrides​

FormNode.onMarkAsTouched

onMarkAsUntouched()​

protected onMarkAsUntouched(): void;

Defined in: form/nodes/array-node.ts:426

Hook: вызывается после markAsUntouched()

Для ArrayNode: рекурсивно помечаем все элементы массива как untouched

Returns​

void

Overrides​

FormNode.onMarkAsUntouched

patchValue()​

patchValue(values): void;

Defined in: form/nodes/array-node.ts:302

Частично обновить значение узла Для FieldNode: работает как setValue Для GroupNode: обновляет только указанные поля Для ArrayNode: обновляет только указанные элементы

Parameters​

values​

(T | undefined)[]

Returns​

void

Overrides​

FormNode.patchValue

push()​

push(initialValue?): void;

Defined in: form/nodes/array-node.ts:122

Добавить элемент в конец массива

Parameters​

initialValue?​

Partial<T>

Начальные значения для нового элемента

Returns​

void

removeAt()​

removeAt(index): void;

Defined in: form/nodes/array-node.ts:134

Удалить элемент по индексу

Parameters​

index​

number

Индекс элемента для удаления

Returns​

void

Remarks​

Вызывает dispose() на удаляемом элементе для очистки подписок

reset()​

reset(values?): void;

Defined in: form/nodes/array-node.ts:327

Сбросить массив к указанным значениям (или очистить)

Parameters​

values?​

T[]

опциональный массив значений для сброса

Returns​

void

Remarks​

Очищает текущий массив и заполняет новыми элементами

Example​

// Очистить массив
arrayNode.reset();

// Сбросить к новым значениям
arrayNode.reset([{ name: 'Item 1' }, { name: 'Item 2' }]);

Overrides​

FormNode.reset

resetToInitial()​

resetToInitial(): void;

Defined in: form/nodes/array-node.ts:363

Сбросить массив к исходным значениям (initialItems)

Returns​

void

Remarks​

Восстанавливает массив в состояние, которое было при создании ArrayNode. Более явный способ сброса к начальным значениям по сравнению с reset()

Полезно когда:

  • Пользователь нажал "Cancel" - вернуть массив к исходным элементам
  • Массив был изменен через reset(newValues), но нужно вернуться к началу
  • Явное намерение показать "отмена всех изменений"

Example​

const arrayNode = new ArrayNode(
  { name: { value: '', component: Input } },
  [{ name: 'Initial 1' }, { name: 'Initial 2' }]
);

arrayNode.push({ name: 'New Item' });
arrayNode.reset([{ name: 'Temp' }]);
console.log(arrayNode.length.value); // 1

arrayNode.resetToInitial();
console.log(arrayNode.length.value); // 2
console.log(arrayNode.at(0)?.name.value.value); // 'Initial 1'

setErrors()​

setErrors(errors): void;

Defined in: form/nodes/array-node.ts:390

Установить array-level validation errors

Parameters​

errors​

ValidationError[]

Массив ошибок валидации уровня массива

Returns​

void

Example​

arrayNode.setErrors([{
  code: 'minItems',
  message: 'Минимум 1 элемент обязателен',
}]);

Overrides​

FormNode.setErrors

setValue()​

setValue(values, options?): void;

Defined in: form/nodes/array-node.ts:287

Установить значение узла

Parameters​

values​

T[]

options?​

SetValueOptions

опции установки значения

Returns​

void

Overrides​

FormNode.setValue

swap()​

swap(a, b): void;

Defined in: form/nodes/array-node.ts:229

Поменять местами два элемента массива

Parameters​

a​

number

Индекс первого элемента

b​

number

Индекс второго элемента

Returns​

void

Remarks​

Как и move, не уничтожает элементы — меняет только их порядок.

Example​

form.items.swap(0, 2);

touchAll()​

touchAll(): void;

Defined in: form/nodes/form-node.ts:349

Пометить все поля (включая вложенные) как touched Алиас для markAsTouched(), но более явно показывает намерение пометить ВСЕ поля рекурсивно

Полезно для:

  • Показа всех ошибок валидации перед submit
  • Принудительного отображения ошибок при нажатии "Validate All"
  • Отображения невалидных полей в wizard/step form

Returns​

void

Example​

// Показать все ошибки перед submit
form.touchAll();
const isValid = await form.validate();
if (!isValid) {
  // Все ошибки теперь видны пользователю
}

// Или использовать submit() который уже вызывает touchAll
await form.submit(async (values) => {
  await api.save(values);
});

Inherited from​

FormNode.touchAll

validate()​

validate(): Promise<boolean>;

Defined in: form/nodes/array-node.ts:369

Запустить валидацию узла

Returns​

Promise<boolean>

Promise<boolean> - true если валидация успешна

Overrides​

FormNode.validate

Properties​

_dirty​

protected _dirty: Signal<boolean>;

Defined in: form/nodes/form-node.ts:66

Значение узла было изменено (dirty) Protected: наследники могут читать/изменять через методы

Inherited from​

FormNode._dirty

_status​

protected _status: Signal<FieldStatus>;

Defined in: form/nodes/form-node.ts:72

Текущий статус узла Protected: наследники могут читать/изменять через методы

Inherited from​

FormNode._status

_touched​

protected _touched: Signal<boolean>;

Defined in: form/nodes/form-node.ts:60

Пользователь взаимодействовал с узлом (touched) Protected: наследники могут читать/изменять через методы

Inherited from​

FormNode._touched

dirty​

readonly dirty: ReadonlySignal<boolean>;

Defined in: form/nodes/array-node.ts:69

Значение узла было изменено (dirty) Computed из _dirty для предоставления readonly интерфейса

Overrides​

FormNode.dirty

disabled​

readonly disabled: ReadonlySignal<boolean>;

Defined in: form/nodes/form-node.ts:99

Узел отключен (disabled)

Inherited from​

FormNode.disabled

errors​

readonly errors: ReadonlySignal<ValidationError[]>;

Defined in: form/nodes/array-node.ts:71

Массив ошибок валидации

Overrides​

FormNode.errors

invalid​

readonly invalid: ReadonlySignal<boolean>;

Defined in: form/nodes/array-node.ts:67

Узел невалиден (есть ошибки валидации)

Overrides​

FormNode.invalid

length​

readonly length: ReadonlySignal<number>;

Defined in: form/nodes/array-node.ts:73

pending​

readonly pending: ReadonlySignal<boolean>;

Defined in: form/nodes/array-node.ts:70

Выполняется асинхронная валидация

Overrides​

FormNode.pending

status​

readonly status: ReadonlySignal<FieldStatus>;

Defined in: form/nodes/array-node.ts:72

Текущий статус узла Computed из _status для предоставления readonly интерфейса

Overrides​

FormNode.status

touched​

readonly touched: ReadonlySignal<boolean>;

Defined in: form/nodes/array-node.ts:68

Пользователь взаимодействовал с узлом (touched) Computed из _touched для предоставления readonly интерфейса

Overrides​

FormNode.touched

valid​

readonly valid: ReadonlySignal<boolean>;

Defined in: form/nodes/array-node.ts:66

Узел валиден (все валидаторы прошли успешно)

Overrides​

FormNode.valid

value​

readonly value: ReadonlySignal<T[]>;

Defined in: form/nodes/array-node.ts:65

Текущее значение узла

  • Для FieldNode: значение поля
  • Для GroupNode: объект со значениями всех полей
  • Для ArrayNode: массив значений элементов

Overrides​

FormNode.value