Skip to main content

FieldControlState

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

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

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

Example​

interface Props {
  control: FormControl<string>;
}

function TextField({ control }: Props) {
  const state = useFormControl(control);
  const message = useIssueMessage(); // из '@reformer/core/react'

  return (
    <div>
      <input
        value={state.value}
        disabled={state.disabled}
        onChange={e => control.setValue(e.target.value)}
      />
      {state.shouldShowIssues && state.issues[0] && (
        <span className="error">{message(state.issues[0])}</span>
      )}
    </div>
  );
}

See​

Type Parameters​

T​

T

Тип значения поля (string, number, boolean и т.д.)

Properties​

componentProps​

componentProps: Record<string, unknown>;

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

Пользовательские props для передачи в UI-компоненты. Устанавливаются через FormControl.updateComponentProps.

Example​

// Установка props
field.updateComponentProps({
  placeholder: 'Enter email...',
  maxLength: 100,
  autoComplete: 'email'
});

// Использование в компоненте
const { componentProps, value } = useFormControl(field);

return (
  <input
    value={value}
    placeholder={componentProps.placeholder}
    maxLength={componentProps.maxLength}
    autoComplete={componentProps.autoComplete}
  />
);

dirty​

dirty: boolean;

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

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

Реактивный аналог control.dirty — паритет с ArrayControlState.dirty.

Example​

const { dirty } = useFormControl(field);

return dirty ? <span className="badge">Изменено</span> : null;

disabled​

disabled: boolean;

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

Флаг отключения поля. true когда поле недоступно для редактирования.

Example​

const { disabled, value } = useFormControl(field);

return (
  <input
    value={value}
    disabled={disabled}
    className={disabled ? 'opacity-50' : ''}
  />
);

invalid​

invalid: boolean;

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

Флаг невалидности поля. true когда есть ошибки валидации (issues.length > 0). Противоположность valid.

Example​

const { invalid } = useFormControl(field);

return (
  <input
    aria-invalid={invalid}
    className={invalid ? 'border-red' : ''}
  />
);

issues​

issues: ValidationIssue[];

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

Массив ошибок валидации. Пустой массив означает отсутствие ошибок.

Example​

const { issues } = useFormControl(field);
const message = useIssueMessage(); // из '@reformer/core/react'

return (
  <ul className="error-list">
    {issues.map((error, i) => (
      <li key={i}>{message(error)}</li>
    ))}
  </ul>
);

pending​

pending: boolean;

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

Флаг асинхронной валидации или загрузки. true когда выполняется асинхронный валидатор.

Example​

const { pending } = useFormControl(usernameField);

return (
  <div>
    <input {...props} />
    {pending && <Spinner size="small" />}
  </div>
);

shouldShowError​

shouldShowError: boolean;

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

Показывать ли состояние ошибки — aria-invalid, рамку: поле невалидно и его трогали или меняли. Предупреждение (severity: 'warning') поле невалидным не делает, поэтому для текстов замечаний есть FieldControlState.shouldShowIssues.

Example​

const { shouldShowError } = useFormControl(field);

return <input {...props} aria-invalid={shouldShowError} />;

shouldShowIssues​

shouldShowIssues: boolean;

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

Показывать ли тексты замечаний: у поля есть замечания — ошибки или предупреждения, — и его трогали или меняли.

Example​

const { shouldShowError, shouldShowIssues, issues } = useFormControl(field);
const message = useIssueMessage(); // из '@reformer/core/react'

return (
  <div>
    <input {...props} aria-invalid={shouldShowError} />
    {shouldShowIssues &&
      issues.map((issue) => (
        <span key={issue.code} className={issue.severity === 'warning' ? 'warning' : 'error'}>
          {message(issue)}
        </span>
      ))}
  </div>
);

touched​

touched: boolean;

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

Флаг взаимодействия с полем. true после того как поле потеряло фокус (blur) хотя бы один раз.

Example​

const { touched, invalid } = useFormControl(field);

// Показываем ошибку только после взаимодействия
const showError = touched && invalid;

valid​

valid: boolean;

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

Флаг валидности поля. true когда поле прошло все валидации (issues.length === 0).

Example​

const { valid } = useFormControl(field);

return (
  <input className={valid ? 'border-green' : 'border-gray'} />
);

value​

value: T;

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

Текущее значение поля.

Example​

const { value } = useFormControl(emailField);
console.log(value); // "user@example.com"