Динамическая проверка в угловых динамических формах

РУКОВОДСТВО ПО РЕАКТИВНЫМ ДИНАМИЧЕСКИМ ФОРМАМ

Динамическая проверка в угловых динамических формах

Элегантный способ реализации динамической проверки

Здесь мы обсуждаем чистый подход динамической проверки динамических реактивных форм.

Настройка валидаторов на лету при работе с динамическими формами - это немного неуклюжая работа, потому что писать слишком много кода для обработки таких вещей, вызывая методы setValidators и clearValidators в Angular. Но сложность возрастает, когда возникает условная проверка, и мы теряем динамический характер формы из-за нашей настраиваемой логики проверки в компоненте.

В соответствии с приведенным выше утверждением, что такое чистый подход (😑)?

При стандартном подходе бизнес-логика проверки и часть динамической формы будут смешаны, и есть хорошие шансы на дублирование кода в нескольких компонентах. Применение проверки через модель предметной области вместо компонентного метода. Преимущество этого подхода в том, что наш код будет разделен, и нам не нужно будет вызывать setValidators или clearValidators в компоненте.

Теперь поговорим о КАК:

Во-первых, давайте сформулируем пример использования:

1. firstName динамический FormControlдолжен быть обязательным и принимает только алфавиты с пробелом.
2. Таким образом, к isAuthor FormControl не следует применять валидацию. На основе значения проверки будет запущена другая проверка.
3. url динамический FormControl должен быть обязательным, если выбран isAuthor.
4. bio динамический FormControl должен проверяться на основе пользовательской бизнес-логики; Если значение isAuthor равно true, то пользователь может ввести не более 100 символов, в противном случае разрешено 50 символов.
5. Значение userName dynamic FormControl должно быть уникальным благодаря асинхронной проверке.

Не теряя много времени (😅), давайте начнем создавать динамическую форму с динамической проверки.

Для реализации вышеуказанного варианта использования мы должны установить два пакета @rxweb/reactive-dynamic-forms и @rxweb/reactive-form-validators. Если вы ничего не знаете об этих пакетах, перейдите по этой ссылке: Новый способ создания динамической реактивной формы в Angular.

Установим пакеты и зарегистрируемся в модуле:

npm install @ rxweb / reactive-dynamic-forms

npm install @ rxweb / reactive-form-validators

Теперь нам нужно зарегистрировать модули RxReactiveDynamicFormsModule и RxReactiveFormsModule в корневом модуле.

Давайте спроектируем JSON в соответствии с вариантом использования и посмотрим на результат.

firstName динамический FormControlдолжен быть обязательным и принимает только алфавиты с пробелом.

Как вы видите вышеупомянутый объект JSON, мы определили два свойства внутри свойства валидаторов. Свойство required пометит, что FormControl является обязательным, а alpha разрешит алфавиты с пробелами. Валидаторы будут применяться без написания дополнительного кода в компоненте (😃).

Сколько еще имен валидаторов мы можем передать в JSON?

Внутри пакета используется @rxweb/reactive-form-validators. Вы можете использовать все (около 50+) валидаторов, доступных в Документе. Для получения дополнительной информации перейдите по этой ссылке rxweb.io.

Таким образом, для isAuthor FormControl не следует применять валидацию. На основе значения проверки будет запущена другая проверка.

При необходимости мы должны определить JSON без имени валидатора.

Перейдем к другому варианту использования.

url динамический FormControl должен быть обязательным, если выбран isAuthor.

Давайте создадим JSON с url динамическим FormControl и установим conditionalExpression для условно необходимого FormControl.

В соответствии с приведенным выше JSON я установил код выражения javascript в строковой форме. Это дает преимущество в изменении условного выражения на уровне сервера вместо написания кода на стороне клиента.

bio динамический FormControl должен проверяться на основе пользовательской бизнес-логики; Если значение isAuthor равно true, то пользователь может ввести не более 100 символов, в противном случае разрешено 50 символов.

Для пользовательской проверки мы должны создать модель и определить метод проверки. Давайте создадим BioModel.

Как вы видите выше, это довольно просто (😄). Поскольку мы определили метод валидатора внутри BioModel.

Давайте посмотрим на JSON ниже bio dynamic FormControl.

В соответствии с приведенным выше JSON мы определили modelName для выполнения нашего настраиваемого валидатора. BioModel, который мы используем при создании FormGroup.

Значение userName dynamic FormControl должно быть уникальным благодаря асинхронной проверке.

Давайте проверим от userName по asyncValidator. Определите другую модель и создайте метод asyncValidator.

То же, что и BioModel, за исключением определения asyncValidator.

Давайте посмотрим на JSON ниже.

Давайте быстро завершим создание компонента и HTML.

Теперь мы должны определить modelName обеих моделей. modelName должен быть таким же, как мы определили в соответствующем объекте JSON (userName и bio), после этого мы должны вызвать метод formGroup с передачей параметра конфигурации.

Теперь давайте создадим HTML

Наконец-то все готово.

Вот полный пример ссылки на stackblitz.

Надеюсь, вам понравится этот подход, если у вас есть какие-либо предложения / вопросы, прокомментируйте их ниже.