Угловая радиокнопка: Угловая радиокнопка 9 материалов

В этом примере переключателя Angular 9 мы будем использовать библиотеку материалов Angular для создания UI/UX. Angular Materials предлагает множество встроенных модулей для вашего проекта. Такие функции, как автозаполнение, выбор даты, слайдер, меню, сетки и панель инструментов, доступны для использования с материалами в Angular 9. Теперь давайте вспомним радио-кнопку в html 5.

Radio Кнопка в HTML 5

Радиокнопка — это просто элемент ввода со свойством type , для которого установлено значение radio .

  

Как и для всех элементов ввода HTML, вам необходимо определить имя для его использования, потому что без имени элемент не будет идентифицирован при отправке формы обратно на сервер для обработки.

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

См. следующий фрагмент.

  

Атрибут name используется для указания всей группы радиообъектов.

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

Радиокнопка против флажка в HTML 5

В HTML-формах радиокнопки очень похожи на флажки, но они различаются по нескольким важным причинам.

  1. Радиокнопки появляются только в группах. Вы можете установить один флажок форма, но переключатели имеют смысл только при размещении в группах.

  2. Можно выбрать только один элемент. Выбор одно радио, но ton отменяет выбор остальных.

  3. id каждого радио-кнопка уникальна. Каждый идентификатор на веб-странице должен быть уникальным, а элементы идентификатора каждого переключателя подчиняются этим правилам.

  4. Каждый радиоэлемент также имеет атрибут name . Атрибут name используется для указания всей группы радиообъекты.

  5. Все переключатели в группе имеют одинаковое имя. HTML использует атрибут name, чтобы определить, какие группа, в которой находится переключатель, и чтобы убедиться, что выбрана только одна кнопка в группе.

Angular Radio Button

обеспечивает ту же функциональность, что и собственный , дополненный стилем и анимацией Material Design.

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

Метка радиокнопки

Метка радиокнопки предоставляется как содержимое для элемент.

Метку можно разместить до или после переключателя, установив для свойства labelPosition значение «до» или «после».

Если вам не нужно метка, которая будет отображаться рядом с переключателем, вы можете использовать aria-label или aria-labelledby, чтобы указать соответствующую метку.

Радиогруппы

Радиокнопки, как правило, следует размещать внутри , если только структура DOM не делает это невозможным (например, радиокнопки внутри table- ячеек).

Радиогруппа имеет свойство value, которое отражает выбранную в данный момент радиокнопку внутри группы.

Отдельные радиокнопки внутри радиогруппы будут наследует имя группы.

совместим с @ angular/forms и поддерживает как FormsModule, так и ReactiveFormsModule.

Пример радио-кнопки Angular 9

Библиотека материалов angular предлагает множество компонентов. В этом блоге мы рассмотрели следующие компоненты.

  1. Таблица материалов Angular
  2. Модальный материал Angular
  3. Материал Angular icon
  4. Выбор материала Angular

Давайте создадим проект Angular 9, установим библиотеки материалов Angular и настроим его.

Шаг 1. Создайте проект Angular 9

Я предполагаю, что у вас последняя версия интерфейса командной строки Angular.

Введите следующую команду, чтобы создать проект angular.

 ng new ang 

Теперь мы установим и настроим библиотеки материалов Angular .

Затем установите hummer.js с помощью следующей команды.

 npm install --save hammerjs 

Теперь установите Angular Material и Angular Animations , используя следующую команду.

 npm install --save @  angular/material @ angular/animations @ angular/cdk 

Теперь включите hammerjs в файл angular.json .

Вы можете найти этот файл в корне проекта.

 "scripts": ["./node_modules/hammerjs/hammer.min.js"] 

Шаг 2. Создайте собственный файл модуля в Angular 9

Теперь создайте собственный material.module .ts и добавьте следующий код.

//material.module.tsimport {NgModule} from '@ angular/core'; import {MatRadioModule, MatFormFieldModule, MatInputModule} из '  @ angular/material '; @ NgModule ({импорт: [MatRadioModule, MatFormFieldModule, MatInputModule], экспорт: [MatRadioModule, MatFormFieldModule, MatInputModule]}) класс экспорта MaterialModule {} 

В приведенном выше коде, мы включили три модуля.

  1. MatRadioModule : он используется для работы с переключателем материала.
  2. MatFormFieldModule : используется для работы с полями формы материала.
  3. MatInputModule : Он используется для проверки значений формы.

Шаг 3. Импортируйте предварительно созданную тему и значки материалов

Angular Material поставляется с некоторыми готовыми темами.

Чтобы импортировать тему, вы можете добавить следующий код в свой глобальный файл styles.css . Файл находится внутри папки src .

 @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

Вы также можете получить доступ к значкам Material Design и использовать именованные значки с компонентом .

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

  

Шаг 4. Импортируйте модуль материала и другие модули

Мы импортируем следующие модули в файл app.module.ts .

  1. MaterialModule
  2. BrowserAnimationsModule
//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импорт {NgModule} из '  @ angular/core '; я  mport {MaterialModule} из './material.module'; импортируйте {FormsModule, ReactiveFormsModule} из '@ angular/forms'; импортируйте {BrowserAnimationsModule} из '@ angular/platform-browser/animations'; импортируйте {AppComponent} из '. /app.component '; @ NgModule ({объявления: [AppComponent], импорт: [BrowserModule, FormsModule, MaterialModule, ReactiveFormsModule, BrowserAnimationsModule], поставщики: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

Шаг 5. Создайте угловой вид радиокнопки и установите значение

Напишите следующий код внутри app.component .ts .

//app.component.tsimport {Component} from '@ angular/core'; @ Component ({selector: 'app-root', templateUrl: '  ./app.component.html ', styleUrls: [' ./app.component.css'ght,})export class AppComponent {favouriteCartoon: string;  cartoons: string [] = ['Том и Джерри', 'Рик и Морти', 'Бен 10', 'Бэтмен: мультсериал'];} 

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

  1. favouriteCartoon (String)
  2. мультфильмы (массив строк )

Мы переберем эти мультфильмы в файле представления и сформируем группу переключателей.

Добавьте следующий код внутри файл app.component.html .

     {{cartoon}} -radio-button>  
Ваш любимый мультфильм: {{favouriteCartoon}}

Мы используем angular ngfor, чтобы отобразить все значения переключателя.

поддерживает двустороннюю привязку к свойству value.

Итак, когда пользователь выбирает любой переключатель, мы получаем значение как favouriteCartoon, и можем либо отправить значение на сервер через запрос AJAX, либо сделать что угодно мы хотим это сделать.

Кроме того, напишите код CSS внутри файла app.component.css .

 .radio-  группа {дисплей: гибкий;  flex-direction: столбец;  margin: 15px 0;}. Radio-button {margin: 5px;} 

Сохраните файл и запустите сервер angular dev, используя следующую команду.

 ng serve  -o 

Из вывода видно, что мы выбрали Тома и Джерри, и в нижнем колонтитуле мы видим напечатанный результат. В Angular 9 легко получить выбранное значение в переключателе.

Пример проверки переключателя Angular

Хорошо, теперь , давайте проверим элемент переключателя.

Когда пользователь не выбрал какое-либо значение переключателя, мы отобразим ошибку, а когда пользователь выберет, нам нужно удалить эту ошибку.

Мы уже импортировали ReactiveFormsModule для этой цели в файл app.module.ts .

Теперь напишите следующий код внутри файла app.component.ts .

//app.component.tsimport {Component} from '@ angular/ core '; import {FormControl, Validators} из' @ angular/forms '; @ Component ({selector:' app-root ', templateUrl:' ./app.component.html ', styleUrls: [' ./app.component  .css '],}) класс экспорта AppComponent {favouriteCartoon: string;  мультфильмы: string [] = ['Том и Джерри', 'Рик и Морти', 'Бен 10', 'Бэтмен: мультсериал'];  cartoonControl = new FormControl ('', [Validators.required]);} 

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

Мы прикрепим его к полю формы переключателя и проверим условие если в cartoonControl есть ошибка, мы отобразим ее, иначе не.

Последним шагом будет запись файла app.component.html .

     {  {cartoon}}    Пожалуйста, выберите мультфильм  
Ваш любимый мультфильм: {{favouriteCartoon}}

Как видите, я прикрепил formControl внутри переключателя, и теперь он отслеживает значение, и если он найдет пустое, то вернуть ошибку, иначе нет. Сохраните файл и просмотрите результат.

После выбора с любой из кнопок ошибка будет удалена.

Заключение

Мы видели, что такое радио-кнопка, разница между переключателем и флажком, как настроить материальный дизайн в angular, а затем как использовать переключатель материала angular и как проверить переключатель в angular.

Наконец, Angular Radio Учебное пособие по примерам кнопок окончено.

Оцените статью
nanomode.ru
Добавить комментарий