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

ArrayControlState

Defined in: platforms/react/hooks/types.ts:289

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

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

Example​

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

interface Props {
  control: FormArray<Phone>;
}

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

  return (
    <div>
      {control.map((item, index) => (
        <PhoneItem
          key={control.keyAt(index)}
          control={item}
          onRemove={() => control.removeAt(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 issues</p>}
    </div>
  );
}

See​

Type Parameters​

T​

T

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

Properties​

dirty​

dirty: boolean;

Defined in: platforms/react/hooks/types.ts:383

Флаг изменения. true после правки любого элемента или изменения состава через форму (push, removeAt, move, setValue…). Как у поля, запись в модель (загрузка данных) и операция, которая состав не поменяла, изменением не считаются; снимает reset.

Example​

const { dirty } = useFormControl(itemsArray);

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

disabled​

disabled: boolean;

Defined in: platforms/react/hooks/types.ts:400

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

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

Example​

const { disabled } = useFormControl(itemsArray);

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

invalid​

invalid: boolean;

Defined in: platforms/react/hooks/types.ts:357

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

issues​

issues: ValidationIssue[];

Defined in: platforms/react/hooks/types.ts:339

Замечания массива: собственные (правила на ручке массива) и замечания всех его строк.

Example​

// Правило массива — в схеме валидации
validate(model.$.phones, [minLength(1, { code: 'phones.minLength' })]);

// В компоненте
const { issues } = useFormControl(phonesArray);
// для пустого массива issues содержит замечание с кодом 'phones.minLength'

length​

length: number;

Defined in: platforms/react/hooks/types.ts:318

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

Example​

const { length } = useFormControl(itemsArray);

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

ownIssues​

ownIssues: ValidationIssue[];

Defined in: platforms/react/hooks/types.ts:345

Собственные замечания массива — только правила на его ручке (minLength и т.п.), без замечаний строк. Их показывает ошибка уровня массива (FieldArray.Error).

pending​

pending: boolean;

Defined in: platforms/react/hooks/types.ts:324

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

touched​

touched: boolean;

Defined in: platforms/react/hooks/types.ts:363

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

valid​

valid: boolean;

Defined in: platforms/react/hooks/types.ts:351

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

value​

value: T[];

Defined in: platforms/react/hooks/types.ts:300

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

Example​

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