Как организовать зависимости между полями динамической формы: скрытие, блокировку, изменение обязательности и значений одних полей при изменении других?

Динамическая форма — это форма, структура и поведение которой зависят от данных, введённых пользователем. Например, при выборе типа лица "Юридическое" появляется поле "Название компании", а поле "Паспорт" скрывается. Такие связи удобно описывать декларативно: каждое поле знает, от каких полей оно зависит и как реагирует на их значения.

Подходы к организации зависимостей

• Императивный: в обработчике onChange вручную вызываем setFieldValue, setFieldVisible и т.д. Просто, но быстро превращается в спагетти.
• Декларативный: описываем правила в конфиге, а движок формы сам пересчитывает состояние. Масштабируется лучше.
• Вычисляемый: состояние каждого поля — чистая функция от значений других полей. Самый предсказуемый вариант.

Пример декларативного описания

const fields = [
  { name: 'type', type: 'select', options: ['person', 'company'] },
  { name: 'companyName', type: 'text',
    visible: (v) => v.type === 'company',
    required: (v) => v.type === 'company' },
  { name: 'passport', type: 'text',
    visible: (v) => v.type === 'person',
    disabled: (v) => v.type === 'company' },
  { name: 'vat', type: 'text',
    visible: (v) => v.type === 'company',
    value: (v) => v.type === 'company' ? v.inn : '' }
];

function resolveState(fields, values) {
  return fields.map(f => ({
    ...f,
    visible: f.visible ? f.visible(values) : true,
    disabled: f.disabled ? f.disabled(values) : false,
    required: f.required ? f.required(values) : false,
    value: f.value ? f.value(values) : values[f.name]
  }));
}

Важные детали

• При скрытии поля обычно нужно очищать его значение и снимать валидацию, иначе скрытые данные уйдут на сервер.
• При блокировке значение остаётся, но не редактируется — решите, отправлять его или нет.
• Изменение обязательности должно пересчитывать валидацию, иначе форма не отправится или отправится с ошибкой.
• Циклические зависимости (A зависит от B, B от A) нужно запрещать или разрешать через явные правила приоритета.

В React удобно использовать react-hook-form с watch и useMemo, в Angular — реактивные формы с valueChanges и combineLatest, во Vue — computed. Главное — держать логику зависимостей в одном месте, а не в разрозненных обработчиках.

Итог: декларативные зависимости через функции от общего состояния формы делают поведение предсказуемым, упрощают тестирование и позволяют добавлять новые поля без переписывания логики. Применяйте этот подход в любых формах, где поля влияют друг на друга.