Добрый день.
Сегодня я хочу рассказать о новом пакете для асинхронных валидаций в проектах на базе Реагировать , Мобкс и написано на Машинопись .
Современная Frontend-разработка предполагает большое количество логики при заполнении страниц с документами, анкет и кредитных документов, платежных поручений, страниц регистрации на сайте.
Основная логическая нагрузка приходится на проверки валидации.
Разработчики Угловой продумали этот момент и предлагаем разработчикам использовать для этих целей встроенный механизм ФормКонтроль -с, который хоть и имеет ряд своих недостатков, но все же лучше, чем полное отсутствие такого решения на Реагировать .
Ситуация осложняется еще и тем, что современная тенденция Реагировать разработка предполагает использование mobx для организации бизнес-логики.
Столкнувшись с этими проблемами, мы решили их все, написав пакет: @quantumart/mobx-form-validation-kit Преимущества пакета:
- Полностью включен Машинопись
- Совместимость с Mobx (версия 4, поддерживающая всеми любимый IE10)
- Создан для работы в Реагировать (можно использовать в проектах без реагирования)
- Предназначен для асинхронных проверок.
- Легко интегрируется в существующий проект.
Сначала опишем функционал пакета.
@quantumart/mobx-form-validation-kit , в конце статьи мы напишем полностью рабочую страницу с примером формы регистрации на сайте.
ФормКонтроль
@quantumart/mobx-form-validation-kit позволяет создать прослойку между исходными данными и формой для отображения.
Что, в свою очередь, позволяет проверять их и при необходимости изменять данные до того, как они попадут в исходный объект. 
Библиотека @quantumart/mobx-form-validation-kit содержит три основных класса (компонента проверки) для управления формами:
- Группа форм – позволяет комбинировать компоненты валидации вместе.
Класс типизирован и позволяет переделать интерфейс со списком полей в качестве универсального параметра.
По умолчанию указывается любой; использовать его без набора текста крайне не рекомендуется, но можно.
- ФормКонтроль – используется для проверки определенного поля, наиболее часто используемого класса.
Класс является типизированным и в качестве универсального параметра принимает тип переменной, которую он должен хранить.
По умолчанию указывается строка, поскольку значением по умолчанию является строка, поскольку это наиболее конфиденциальный параметр для форм.
- ФормаМассив – позволяет создавать и управлять массивом компонентов проверки.
- АннотацияControl – базовый класс для всех перечисленных классов проверки, не типизированный.
- ФормаAbstractControl - базовый класс для Группа форм И ФормаМассив , не напечатано.
- ФормаАннотацияГруппа – нетипизированный базовый класс для FormControl, содержит ссылку на рисуемый элемент html.
На форме создается объект типа один.
Группа форм и он уже перечисляет поля
Группа форм поддерживает вложенность, т.е.this.form = new FormGroup<IUserInfo>({ name: new FormControl( this.userInfo.name, [], v => (this.userInfo.name = v) ), surname: new FormControl( this.userInfo.surname, [], v => (this.userInfo.surname = v) ) // … });
this.form = new FormGroup<IUserInfo>({
name: new FormControl(
this.userInfo.name,
[],
v => (this.userInfo.name = v)
),
surname: new FormControl(
this.userInfo.surname,
[],
v => (this.userInfo.surname = v)
)
passport: new FormGroup<IPassport >({
number: new FormControl(
this.userInfo.passport.number,
[],
v => (this.userInfo.passport.number = v)
),
// …
})
// …
});
Могу добавить ФормаМассив , которому, в свою очередь, можно передать тип ФормКонтроль и или целый Группа форм создание объектов любой сложности и структуры.
- ФормаМассив
ФормаМассив
Самостоятельно ФормКонтроль принимает в конструктор следующий набор параметров
- ценить : TEntity — это типизированное начальное значение.
- валидаторы : ValidatorFunctionFormControlHandler[] – набор валидаторов.
- обратный вызовValidValue : UpdateValidValueHandler | null – функция обратного вызова, которой передается последнее допустимое значение.
Он вызывается каждый раз, когда значение в FormControl изменяется и это значение проходит описанные проверки.
- активировать : (() => логическое значение) | null — функция позволяет включать/отключать проверки на основе условия (всегда включено по умолчанию).
Например, действительность даты окончания услуги не нужно проверять, если не установлен флажок «Безлимитно».
Как следствие, просто добавив сюда функцию, проверяющую состояния наблюдаемый поле, отвечающее за флажок «Без ограничений», вы можете автоматически отключить все проверки, связанные с полем проверки даты, вместо того, чтобы прописывать эту логику в каждую из проверок поля даты.
- Дополнительная информация : TДополнительныеДанные | null – блок с дополнительной информацией позволяет добавить дополнительную информацию к конкретному ФормКонтроль и использовать их в дальнейшем, например для визуализации.
Это удобно, если есть строители.
ФормКонтроль в котором вам нужно жестко закодировать определенную информацию, а не передавать эту информацию через сложный набор данных в элементы управления для визуализации.
Хотя я не могу дать точный и неоспоримый сценарий применения, лучше иметь такую возможность, чем мучиться без нее.
Те.
вы можете создать строитель Группа форм и создайте свой собственный объект для каждой страницы.
Но использовать один объект на группу страниц — плохая практика.
Более того ФормКонтроль инициализируется одним значением, и если это значение будет изменено, новое значение не попадет в ФормКонтроль .
Это сделано специально, потому что, как показала практика, почему-то все упорно пытаются изначально редактировать исходный объект, минуя валидации, а не значение в ФормКонтроль .
Просто присвойте новое значение полю ценить ФормКонтроль изменить исходный объект. Группа форм принимает в конструктор следующий набор параметров:
- элементы управления : TControls — это объект, унаследованный от Абстрактные элементы управления .
По сути, вы просто создаете интерфейс унаследовано от Абстрактные элементы управления в котором вы указываете такие поля, как Группа форм , ФормКонтроль , ФормаМассив .
Конечно, вы можете установить тип любой , но тогда все преимущества будут потеряны Машинопись -А
- валидаторы : ValidatorFunctionFormGroupHandler[] – набор валидаторов групповых значений.
Например, вы можете создать Группа форм содержащий два значения - минимальную и максимальную дату, для управления выбором периода.
Именно этим валидаторам вам нужно будет передать функцию/функции для проверки диапазона дат. Например, дата начала не превышает дату окончания.
- активировать : (() => логическое значение) | null — функция позволяет включать/отключать проверки на основе условия (всегда включено по умолчанию).
Необходимо понимать, что применение функции проверки к группе отключает проверку на уровне всей группы.
Например, у нас есть выпадающий список для выбора документа, удостоверяющего личность.
Вы можете создать несколько Группа форм с другим набором полей для документов: паспорт, водительское удостоверение, паспорт моряка и т.д. В этой функции проверяются выпадающие значения, и если выбранное значение не соответствует этой группе, то все проверки валидации отключаются .
Точнее, группа будет считаться валидной независимо от значений в ней.
- Типы элементов управления — тип элемента управления (Управление | Группа | Массив)
- обработка :boolean - в процессе анализа.
Потому что поддерживаются асинхронные проверки, например те, которые требуют запроса к серверу.
Текущий статус проверки можно узнать в этом поле.
Кроме Группа форм И ФормаМассив метод поддержки ждать , что позволяет дождаться завершения проверки.
Например, при нажатии на кнопку «отправить данные» вам необходимо ввести следующую конструкцию.
await this.form.wait();
- ценить : TEntity — это типизированное начальное значение.
-
Удаленный Доступ К Пк И Запись Экрана
19 Oct, 24 -
Идея Интернета, Гомогенизирующего Культуру
19 Oct, 24 -
Бюффон, Жорж Луи Леклерк
19 Oct, 24 -
Новый Редактор Схем Cadence System Capture
19 Oct, 24 -
23 Вопроса Кандидату В Службу Поддержки
19 Oct, 24
