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

ArrayControlState

Defined in: hooks/types.ts:269

Состояние массива формы, возвращаемое хуком useFormControl для ArrayNode.

Содержит реактивные данные массива: значения элементов, длину, состояние валидации и флаги взаимодействия.

Example​

interface Phone {
  type: string;
  number: string;
}

interface Props {
  control: ArrayNode<Phone>;
}

function PhoneList({ control }: Props) {
  const { length, valid } = useFormControl(control);

  return (
    <div>
      {control.map((item, index) => (
        <PhoneItem
          key={item.id}
          control={item}
          onRemove={() => control.remove(index)}
        />
      ))}

      {length === 0 && <p>No phones added</p>}

      <button onClick={() => control.push({ type: 'mobile', number: '' })}>
        Add Phone
      </button>

      {!valid && <p className="error">Please fix phone errors</p>}
    </div>
  );
}

See​

Type Parameters​

T​

T

Тип элемента массива (обычно объект с полями формы)

Properties​

dirty​

dirty: boolean;

Defined in: hooks/types.ts:359

Флаг изменения. true когда значение массива отличается от начального.

Example​

const { dirty } = useFormControl(itemsArray);

return (
  <div>
    {dirty && <span>* Unsaved changes</span>}
    <button disabled={!dirty}>Save</button>
  </div>
);

disabled​

disabled: boolean;

Defined in: hooks/types.ts:376

Флаг отключения массива. true когда массив отключён (ArrayNode.disable()), в том числе через распространение disable от родительской группы.

Используйте для отключения UI-действий добавления/удаления, когда массив структурно неизменяем.

Example​

const { disabled } = useFormControl(itemsArray);

return <button disabled={disabled} onClick={() => control.push()}>Add</button>;

errors​

errors: ValidationError[];

Defined in: hooks/types.ts:323

Массив ошибок валидации уровня массива. Не включает ошибки отдельных элементов.

Example​

// Валидатор массива
validators.apply(phonesArray, {
  validator: (phones) => phones.length >= 1,
  message: 'At least one phone required'
});

// В компоненте
const { errors } = useFormControl(phonesArray);
// errors содержит ошибку "At least one phone required" если массив пуст

invalid​

invalid: boolean;

Defined in: hooks/types.ts:335

Флаг невалидности. true когда есть ошибки в массиве или любом элементе.

length​

length: number;

Defined in: hooks/types.ts:298

Количество элементов в массиве. Эквивалентно value.length, но оптимизировано для реактивности.

Example​

const { length } = useFormControl(itemsArray);

return (
  <div>
    <span>Items: {length}</span>
    {length >= 10 && <span>Maximum reached</span>}
  </div>
);

pending​

pending: boolean;

Defined in: hooks/types.ts:304

Флаг асинхронной валидации. true когда выполняется асинхронный валидатор массива или любого элемента.

touched​

touched: boolean;

Defined in: hooks/types.ts:341

Флаг взаимодействия. true после взаимодействия с любым элементом массива.

valid​

valid: boolean;

Defined in: hooks/types.ts:329

Флаг валидности массива и всех его элементов. true только когда массив и все вложенные элементы валидны.

value​

value: T[];

Defined in: hooks/types.ts:280

Массив текущих значений всех элементов.

Example​

const { value } = useFormControl(phonesArray);
console.log(value);
// [{ type: 'mobile', number: '+1234567890' }, { type: 'home', number: '+0987654321' }]