Управление переключателями в Ionic 3

Начнем с небольшого предисловия о том, что такое Ionic и почему мы должны его использовать. Ionic - это платформа с открытым исходным кодом, которая позволяет нам писать гибридные мобильные приложения с использованием знакомых для веб-разработчиков технологий, таких как HTML, CSS и JavaScript. Под капотом Ionic 3 использует Angular, который отвечает за компонентный API - строительные блоки Ionic и Cordova - также фреймворк с открытым исходным кодом, который позволяет разработчику запускать веб-приложение на мобильных устройствах.

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

Мы разделим эту статью на несколько частей, начиная с добавления простых переключателей с соответствующими обработчиками, а позже преобразуем ее в более предсказуемую и тестируемую версию.

Добавление радиокнопок

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

Но после добавления этого кода в наше приложение мы поняли, что переключатели действуют как простые флажки - мы можем проверять столько, сколько захотим. Звучит не очень хорошо ... Но мы можем легко исправить это поведение, добавив директиву attribute в наш список. Встречайте radio-group 🚀. Вот пример:

Здорово! ㊗️ Теперь наши радиокнопки ведут себя так, как мы и ожидали - если мы отметим одну радиокнопку из radio-group set, она автоматически снимет отметки с всех ранее отмеченных радиокнопок.

Осталось решить еще одну проблему - как наш список будет реагировать на действия пользователя.

Добавление обработчиков

Сделаем небольшое отступление и расскажем о том, как Ionic может управлять формами:

  • Формы с [(ngModel)]
  • Формы с FormBuilder
  • Формы с шаблонами (мы не используем этот в нашем примере)

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

После добавления атрибута radio-group наш список получил особые возможности. Во-первых, теперь мы можем использовать всю мощь двусторонней привязки данных благодаря [(ngModel)]. А во-вторых, теперь наш список радио может генерировать специальное событие (ionChange), которое срабатывает после того, как пользователь что-то выбирает. В следующем примере вы можете увидеть, как мы привязываем свойство composer в нашем классе к HTML-шаблону:

Не забудьте передать $event аргумент внутри (ionChange) обработчика! 📓

А в нашем классе:

Вуаля! У нас есть полностью рабочая форма радио-кнопок, в которой можно запускать события ввода и управлять нашими данными!

Но… теперь у нас есть небольшой недостаток. Представьте, что произойдет, если мы решим инициализировать наше свойство composer некоторым значением по умолчанию? С первого взгляда ничего страшного не происходит. Но, как я заметил выше, мы можем захотеть добавить некоторую логику для пользовательского ввода, например, перейти на другую страницу или показать диалоговое окно или компонент предупреждения?

Но если копнуть глубже, мы узнаем, что после инициализации свойства composer значением по умолчанию мы вызовем событие (ionChange), что приведет к нежелательным изменениям.

Так что давайте посмотрим, как мы можем решить эту проблему!

FormBuilder в помощь!

На последнем этапе нашего путешествия мы решим предыдущую проблему, удалив [(ngModel)] из шаблона и инициализируя структуру формы внутри RadioButtonsClass!

Начнем с файла класса:

Давайте внимательнее посмотрим, что здесь происходит:

  1. Здесь мы импортируем недостающие пакеты из Angular, чтобы определить форму и элементы управления.
  2. Второй шаг - создание свойства, которое будет содержать данные из формы. Обратите внимание, что форма будет иметь FormGroup интерфейс.
  3. Внедрить FormBuilder зависимость в конструктор.
  4. И самое интересное - инициализация формы! Здесь мы вызываем метод group, который на самом деле является псевдонимом для FormGroup.
  5. Передайте простой объект в качестве параметра, в котором мы определяем наши элементы управления - свойство composer.
  6. И последний шаг - вызов pop метода NavController для извлечения текущей страницы из стека.

Пришло время обновить шаблон:

Здесь нам потребовалось совсем немного изменений:

  1. Создайте <form> оболочку вне компонента списка и привяжите свойство composersForm к атрибуту [formGroup].
  2. Теперь осталось присвоить нашему списку formControlName, что является свойством composer.

Вот и все! ㊗️ Но подождите ... а как насчет предопределенного значения для нашего элемента управления? Вот с чего все началось! Конечно, не волнуйтесь! Мы всегда можем определить начальное значение элементов управления, передав его вместо пустой строки в composer control!

И что немаловажно, это изменение не приведет к дополнительному вызову нашего обработчика!

Используйте все эти шаблоны, исходя из потребностей вашего приложения, и слушайте вас, мама 😂

Полезные ссылки