mobx-form-control-kit

Описание

Данный пакет содержит набор объектов для реализации форм с асинхронной валидацией основанный на Mobx 6 версии. Совместим с React и Vue.

Базовый пример

Создается одно поле формы. Указывается, что значение обязательно для заполнения.

Данный пример хоть и является базовым, не рекомендуется как основной сценарий работы, хоть и является допустимым.

const App = observer(() => {
  const [firstName] = React.useState(
    () =>
      new FormControl<string>("VA", {
        validators: [requiredValidator()],
      })
  );

  return (
    <div>
      <p>{firstName.value}</p>
      <input
        value={firstName.value}
        onChange={(event) => (firstName.value = event.target.value)}
        onFocus={() => (firstName.focused = true)}
        onBlur={() => (firstName.focused = false)}
      />
      {firstName.touched &&
        firstName.errors.map((err) => (
          <p key={err.key} style={{ color: "red" }}>
            {err.message}
          </p>
        ))}
      <button
        onClick={async () => {
          await firstName.wait();
          if (firstName.invalid) {
            firstName.touched = true;
            return;
          }
          // Отправка данных
        }}
      >
        Отправить
      </button>
    </div>
  );
});

Типы контролов

Контролы разделены на два вида:

• FormControl - используется для хранения одного значения. Рекомендуется использовать примитивные типы, такие как: string, number, date, boolean и т.д. И избегать объектов. Хранение объектов допустимо, но нарушает концепцию формы.
• FormGroup - используется для объединения FormControl и FormGroup в группы.

Оба типа являются наследниками абстрактного класса AbstractControl. AbstractControl реализует интерфейс IAbstractControl, что позволяет гибко настроить структуру данных и передачу объектов данных типов.

Чтобы узнать к какому типу принадлежит объект IAbstractControl, можно воспользоваться полем type содержащие значение из enum.

enum ControlTypes {
  Control,
  Group,
}

Рекомендуемая организация кода выглядит следующим образом:

interface IFormPerson extends ControlsCollection {
  firstName: FormControl<string>;
  lastName: FormControl<string>;
  middleName: FormControl<string>;
  age: FormControl<number | undefined>;
}

interface IFormPassport extends ControlsCollection {
  number: FormControl<number | undefined>;
  serias: FormControl<number | undefined>;
  issuedИy: FormControl<string>;
}

interface IFormDriverLicense extends ControlsCollection {
  number: FormControl<number | undefined>;
  serias: FormControl<number | undefined>;
  toDate: FormControl<Date | undefined>;
}

enum DocumentType {
  Passport,
  DriverLicense,
}

interface IFormDocument extends ControlsCollection {
  type: FormControl<DocumentType | undefined>;
  passport: FormGroup<IFormPassport>;
  driverLicense: FormGroup<IFormDriverLicense>;
}

interface IFormChild extends ControlsCollection {
  name: FormControl<string>;
  age: FormControl<number | undefined>;
}

interface IForm extends ControlsCollection {
  person: FormGroup<IFormPerson>;
  document: FormGroup<IFormDocument>;
  children: FormGroup<IFormChild>[];
}

class Questionnaire {
  public form: FormGroup<IForm>;

  constructor() {
    this.form = new FormGroup<IForm>({
      person: new FormGroup<IFormPerson>({
        firstName: new FormControl<string>(""),
        lastName: new FormControl<string>(""),
        middleName: new FormControl<string>(""),
        age: new FormControl<number | undefined>(undefined),
      }),
      document: new FormGroup<IFormDocument>({
        type: new FormControl<DocumentType | undefined>(undefined),
        passport: new FormGroup<IFormPassport>({
          number: new FormControl<number | undefined>(undefined),
          serias: new FormControl<number | undefined>(undefined),
          issuedИy: new FormControl<string>(""),
        }),
        driverLicense: new FormGroup<IFormDriverLicense>({
          number: new FormControl<number | undefined>(undefined),
          serias: new FormControl<number | undefined>(undefined),
          toDate: new FormControl<Date | undefined>(undefined),
        }),
      }),
      children: [],
    });
  }
}

В вышеописанном примере создается форма для заполнения карточки человека с указанием его ФИО, возраста, типа документа. А также можно указать детей. В данном форме отсутствуют валидации, но она уже готова для заполнения и использования в коде.

Валидации

--- В процессе описания ---

Поля и методы

Общие поля и методы для групп и отдельного поля.

Поля / Методы	Описани	Description
valid	Форма (поле) валидное	Form (field) is valid
invalid	Форма (поле) невалидное	Form (field) is invalid
dirty	Значение изменялось	Value changed
pristine	Значение не изменялось (обратное значение dirty)	Value has not changed (reverse dirty)
focused	Форма (поле) сейчас в фокусе	Form (field) is now in focus
element	Ссылка на визуальный элемент	Ref html element
touched	Форма (поле) было в фокусе	Form (field) was in focus
untouched	Форма (поле) не было в фокусе (обратное значение touched)	Form (field) was out of focus (reverse touched)
validators	Методы валидации	Validator-functions
events	Все события валидации (результат выполениения методов валидации)	All valudation events (result of validator-functions)
event(key: string)	Получить ошибку по ключу	Get error by key
tempErrors	Дополнительтные (серверные) ошибки	Additional (server) errors
hasErrors	Группа (поле) содержит ошибки	Form (field) contains errors
errors	Список ошибок	Errors list
hasWarnings	Присутствуют сообщения с типом "Внимание"	The field contains warnings messages
warnings	Список сообщений с типом "Внимание"	Warnings messages list
hasInformations	Присутствуют сообщения с типом "Информационные сообщения"	The field contains informations messages
informations	Сообщения с типом "Информационные сообщения"	Informations messages list
hasSuccesses	Присутствуют сообщения с типом "успешная валидация"	The field contains successes
successes	Сообщения с типом "успешная валидация"	Successes messages list
maxEventLevel	Максимальный уровень сообщения	Max message level
processing	Форма в процессе валидации	Form in validation progressing
getActivate	Функция включение валидаций по условию (по умолчанию включено всегда)	Function enable validation by condition (always enabled by default)
active	Проверка ошибок включена (результат работы метода getActivate)	Error checking enabled (result of getActivate)
disabled	Проверка ошибок отключена (обратное значение active)	Error checking is disabled (reverse active)
additionalData	Поле для передачи дополнительной информации (в логике не участвует)	Field for transferring additional information
type	Тип контрола (группа/поле)	Control type (group/control)
dispose()	Вызвать при удалении контрола	Dispose (call in unmount control)
wait()	Ожидание окончания проверки	Waiting for end of validation