Разработка формы с условной логикой (Conditional Logic) на сайте

Разработка формы с условной логикой (Conditional Logic) на сайте

Форма с условной логикой показывает или скрывает поля в зависимости от ответов пользователя. Вместо формы с 30 полями, большинство из которых нерелевантны — каждый пользователь видит только нужные ему вопросы.

Движок условной логики

interface FieldRule {
  field:    string;       // поле, к которому применяется правило
  action:   'show' | 'hide' | 'require' | 'set_value';
  conditions: Condition[];
  logic:    'and' | 'or';
}

interface Condition {
  field:    string;
  operator: 'equals' | 'not_equals' | 'contains' | 'greater_than' | 'is_empty';
  value:    unknown;
}

function evaluateCondition(condition: Condition, formValues: Record<string, unknown>): boolean {
  const fieldValue = formValues[condition.field];

  switch (condition.operator) {
    case 'equals':     return fieldValue === condition.value;
    case 'not_equals': return fieldValue !== condition.value;
    case 'contains':   return String(fieldValue).includes(String(condition.value));
    case 'is_empty':   return !fieldValue || fieldValue === '';
    case 'greater_than': return Number(fieldValue) > Number(condition.value);
    default: return false;
  }
}

function shouldShowField(rule: FieldRule, formValues: Record<string, unknown>): boolean {
  const results = rule.conditions.map(c => evaluateCondition(c, formValues));
  return rule.logic === 'and' ? results.every(Boolean) : results.some(Boolean);
}

Компонент формы с условной логикой

function ConditionalForm({ schema, onSubmit }: Props) {
  const { watch, register, handleSubmit } = useForm();
  const formValues = watch();

  const visibleFields = schema.fields.filter(field => {
    const rule = schema.rules.find(r => r.field === field.id);
    if (!rule) return true;  // без правил — всегда показываем
    return rule.action === 'show'
      ? shouldShowField(rule, formValues)
      : !shouldShowField(rule, formValues);
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <AnimatePresence>
        {visibleFields.map(field => (
          <motion.div
            key={field.id}
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
          >
            <FormField field={field} register={register} />
          </motion.div>
        ))}
      </AnimatePresence>
      <button type="submit">Отправить</button>
    </form>
  );
}

Пример конфигурации

{
  "fields": [
    { "id": "contact_type", "type": "radio", "options": ["Физлицо", "ИП", "ООО"] },
    { "id": "company_name", "type": "text",  "label": "Название компании" },
    { "id": "inn",          "type": "text",  "label": "ИНН" },
    { "id": "passport",     "type": "text",  "label": "Паспортные данные" }
  ],
  "rules": [
    {
      "field": "company_name",
      "action": "show",
      "logic": "or",
      "conditions": [
        { "field": "contact_type", "operator": "equals", "value": "ИП" },
        { "field": "contact_type", "operator": "equals", "value": "ООО" }
      ]
    },
    {
      "field": "passport",
      "action": "show",
      "logic": "and",
      "conditions": [
        { "field": "contact_type", "operator": "equals", "value": "Физлицо" }
      ]
    }
  ]
}

Конфигурация хранится на сервере — логика меняется без деплоя.

Сроки

Форма с движком условной логики и JSON-конфигурацией: 4–6 рабочих дней.