mobx-form-control-kit v0.10.1

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: [],
    });
  }
}

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

Валидации

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

Поля и методы

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