Формы и валидация в Ionic React

Сетевой журнал
Формы и валидация в Ionic React

Фреймворк Ionic обеспечивает наилучшую поддержку для создания быстрых, оптимизированных мобильных приложений для любой платформы, использующей React. Изучив этот учебник, вы узнаете, как создавать формы при работе с Ionic React и как сделать эти формы интерактивными, добавив правила валидации с полезными текстовыми инструкциями.

Ionic Framework — это набор инструментов пользовательского интерфейса, предназначенный для создания кросс-платформенных мобильных приложений с использованием HTML, CSS и JavaScript. Ionic 5, который выйдет в начале 2020 года, включает официальную поддержку React, что облегчает разработчикам React создание мобильных приложений с помощью привычных инструментов. Однако он также не поддерживает работу с формами. Кроме того, многие из существующих библиотек, предназначенных для построения форм в экосистеме React, не очень хорошо работают с компонентами Ionic Framework.

В этом уроке мы покажем вам, как создать форму с помощью ввода Ionic React UI. После этого вы также узнаете, как использовать эту библиотеку для обнаружения изменений во вводимой форме и реагирования на правила валидации. Наконец, вы узнаете, как добавить полезный текст в атрибуты ARIA, чтобы читатели экрана могли получить доступ к форме.

Компоненты формы Ionic

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

Ionic предоставляет готовые компоненты для работы с формами. Некоторые из них включают IonItem, IonLabel, IonInput, IonCheckbox и IonRadio. Вы можете комбинировать эти элементы для создания стандартных форм без добавления собственных стилей.

Например, следующий код :

создает следующую форму входа в систему

Компоненты формы Ionic

Стандартная форма входа в систему iOS

По умолчанию элементы форм Ionic хорошо выглядят на iOS или Android, но при использовании React они могут выглядеть не так хорошо. Как и в случае с большинством инструментов в экосистеме React, вам необходимо решить, как именно вы хотите спроектировать свои формы с точки зрения функциональности и доступности. И то, и другое не менее важно, чем дизайн.

Уже существует множество помощников для форм React, но большинство из них не будут работать с элементами форм Ionic. Основная причина этого заключается в том, что большинство существующих библиотек форм прослушивают onChange, в то время как onIonChange Ionic запускает событие при изменении значения поля.

ЧИТАТЬ ЕЩЁ:  Что такое файл PHP

Компоненты формы Ionic - 2

Когда поле изменяется, происходит событие изменения.

React Hook Form : небольшая и быстрая библиотека форм React

К счастью, это не плохо. Недавно я наткнулся на React Hook Form (RHF), библиотеку для манипулирования формами в проектах React. Обеспечивая поддержку контролируемых и неконтролируемых элементов и валидации ввода, эта библиотека работает только с функциональными элементами, поскольку API основан на крючках.

На мой взгляд, наиболее привлекательной особенностью для разработчиков, использующих Ionic React, является оболочка компонентов, которую она предоставляет для управления. Элементы имеют свойство onChangename, которое можно использовать для определения имени события изменения в каждом случае, когда оно пересылается. В следующих разделах показано, как упростить работу с ионическими формами.

Создание формы регистрации

Давайте рассмотрим, как RHF может помочь с функциональностью форм при создании формы регистрации onChangename. Если вы используете последнюю версию Ionic CLI (запустите NPM I -G @IONIC/CLI для проверки), выполните следующую команду для запуска нового приложения Ionic в React.

В этом случае использовалась пустая модель. Вам нужно уметь переписывать существующие формы, чтобы легко использовать библиотеку форм React Hook, особенно если элементы описаны как функциональные элементы.

ПРИМЕЧАНИЯ. Прежде чем продолжить этот семинар, вам нужно удалить входы в файлы ExploreContainer и home.sx.

Чтобы начать работу с формами, установите пакет React Hook Forms, выполнив следующую команду в корневом каталоге проекта.

Это сделает библиотеку форм React Hook доступной для вашего проекта. Используйте эту библиотеку для создания полей ввода формы. Откройте файл home.sx и замените его содержимое на следующее: home.sx.sx.sx.sx.sx.sx.sx.sx.sx.

В результате у вас появится форма с единственным полем для ввода адреса электронной почты. Давайте проанализируем важные части.

Сначала разберите возвращаемое значение хука useform () из RHF. Значение ввода отправляется в функцию обработки, указанную при проверке формы HandLesubmit. Управление — это объект, содержащий метод, используемый для регистрации управляемого элемента в RHF.

Далее идет стандартный блок формальной формы, но в отличие от примера с формой ввода, передача элемента Ioninput элементу RHF устанавливает OnChangename на имя события изменения, устанавливает управление элементом и регистрирует событие изменения. Объект управления из формы вызова useform ().

ЧИТАТЬ ЕЩЁ:  Узнать статистику посещаемости сайта как посмотреть количество посетителей в 2022 году

Пока все в порядке, один и тот же код можно повторять много раз. Вы можете попытаться создать входной многоразовый элемент, который создает рамку ввода, используя указанные свойства.

Создайте файл с именем input.tsx в каталоге src / components и добавьте следующий код.

Этот элемент получает имя name и необязательные параметры управления, компоненты и метки и отображает поле ввода, используя уже импортированные элементы формы ion. Это уменьшает количество кода, который необходимо написать при создании полей ввода формы. Этот пункт можно использовать для заполнения остальной части формы. Отредактируйте файл home.sx, внеся в него следующие изменения

Теперь у вас есть ряд полей ввода формы (свойства, требующие только имени), каждое из которых отображается с помощью элемента ввода. Можно пойти еще дальше и сохранить данные поля в JSON-файл и использовать форму для сохранения кода в элементе. На данном этапе созданное приложение (запускаемое командой Ionic serve с http: // localhost: 8100) требует следующих форм

Создание формы регистрации

Запишите страницу формы.

Что насчет валидации полей?

Как вы могли заметить, в полях ввода формы по-прежнему отсутствует логика валидации. Если это реальное приложение, то может возникнуть множество нежелательных последствий, если API не настроен на проверку входящих данных. Кстати, API всегда должен проверять входящие данные.

RHF имеет валидацию в соответствии со стандартом HTML для встроенной валидации формы. Это идеально подходит для простой валидации, например, для объявления полей обязательными или для установки минимальной и максимальной длины поля. Для сложной логики валидации рекомендуется использовать Yup. Можно использовать любую библиотеку проверки формы объекта, но RHF поддерживает Yup как есть.

Настройте (и заполните) библиотеку, выполнив следующие команды

Затем добавьте его в импорт компонента.

Затем добавьте следующий код в верхнюю часть элемента

В данном случае мы создали схему объекта и добавили правила валидации для каждого свойства с помощью yup. Имя в объекте должно совпадать с именем в теге input формы. Если они не совпадают, правило не будет работать.

Наконец, обновите хук useForm(), чтобы использовать схему, определенную установкой свойства validationSchema следующим образом.

Теперь при нажатии на кнопку submit обработчик handleSubmit не вызывается, и данные формы не отправляются. Это именно то, что мы хотели, но, похоже, у пользователя нет возможности узнать, что именно происходит. Давайте исправим это, отобразив текстовую подсказку, когда поле заполнено неправильно.

ЧИТАТЬ ЕЩЁ:  Этапы создания фирменного стиля 5 основных шагов

Сначала обновите элемент Input следующим образом

В данном случае мы обновили элемент, чтобы он принимал дополнительное необязательное свойство, которое представляет собой объект ошибки из RHF. Мы также отображаем сообщение об ошибке в возвращаемом поле ввода при возникновении ошибки. И последнее: добавьте объект ошибки к неструктурированному объекту и обновите элемент в цикле.

Что насчет валидации полей?

Формы регистрации с сообщениями об ошибках (iOS)

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

Улучшение доступности

Компоненты Ionic обычно являются обертками для нативных компонентов. Это означает, что он использует большинство, если не все, существующие функциональные возможности компонента. Определив атрибуты ARIA с соответствующим текстом, можно улучшить поля ввода и сделать их доступными для пользователей с ослабленным зрением.

Чтобы продолжить работу с образцом регистрационной формы, откройте файл Input.tsx и внесите следующие изменения

Элементы по умолчанию, передаваемые контроллеру IonInput, теперь включают атрибут aria-invalid, указывающий на наличие ошибки в поле, и атрибут aria-modifiedby, указывающий на соответствующее сообщение об ошибке. Сообщения об ошибках разворачиваются, а роль ARIA устанавливается на ‘error’. Теперь, если в поле есть ошибка, программа чтения с экрана выделит это поле и зачитает сообщение об ошибке.

Заключение

Поздравляю! Вы узнали, как создавать и выполнять валидацию форм при работе с кроссплатформенными приложениями Ionic. Вы также определили, как сделать поля ввода доступными для пользователей с ослабленным зрением. Мы надеемся, что это руководство обеспечит прочную основу для создания форм в вашем собственном приложении Ionic React. Другие элементы для создания форм (такие как селекты и радио) не рассматриваются в этом руководстве, но вы можете найти более подробную информацию в официальной документации.

  • Документация по фреймворку Ionic
  • React hook формы
  • Да Документация
  • Доступность — MDN

Опубликуйте комментарий к текущей теме статьи. Комментируйте, подписывайтесь, нравится, не нравится, комментируйте, ставьте большой палец вверх!

Оцените статью