Boutons radio en Angular

1. Boutons radio en Angular
2. Lier les boutons radio en Angular

Nous présenterons comment ajouter des boutons radio et lier et valider des boutons radio dans Angular avec des exemples.

Boutons radio en Angular

Nous avons utilisé la bibliothèque Angular Material pour créer UI/UX dans Angular. Le matériau Angular fournit de nombreux modules intégrés pour nos projets.

Des composants tels que la saisie semi-automatique, le sélecteur de date, le curseur, les menus, les grilles, les barres d’outils et les boutons radio sont généralement utilisés avec Angular Material.

Créer des boutons radio en utilisant HTML5 dans Angular

Un bouton radio est un simple élément d’entrée avec une propriété type définie sur radio. La syntaxe des boutons radio est présentée ci-dessous.

# Angular
<input id="radio" type="radio" value="1">
<label for="radio">My Radio</label>

Production:

Nous devons spécifier un nom pour tous les éléments d’entrée HTML car l’élément ne sera pas identifiable sans le nom. Si le bouton radio a été sélectionné, nous voulons définir une valeur et envoyer cette valeur au serveur.

Discutons-en avec un exemple comme indiqué ci-dessous.

# Angular
<input type="radio" name="fruits" value="Apple">

L’attribut name est utilisé pour établir un groupe entier d’objets radio. Un seul bouton radio n’a pas de sens.

Nous avons besoin d’un groupe de boutons radio. Nous pouvons utiliser une case à cocher pour un seul élément, mais les boutons radio n’ont aucun sens lorsqu’ils sont utilisés comme un seul élément.

Points importants sur les boutons radio dans Angular

1. Les boutons radio apparaissent en groupes. Ils n’ont de sens que lorsqu’ils sont mis dans les groupes.
2. Un élément peut être sélectionné et un bouton radio désélectionne les autres.
3. L’identifiant de chaque bouton radio est spécial. Nous devons avoir un identifiant unique pour chaque bouton radio utilisé sur une page.
4. L’élément radio possède également l’attribut name. L’attribut name peut constituer tout un groupe d’objets radio.
5. Les boutons radio du groupe portent le même nom car HTML utilise l’attribut name pour déterminer de quel groupe provient ce bouton radio afin de s’assurer qu’un seul bouton du groupe est sélectionné.

Lier les boutons radio en Angular

Le <mat-radio-button> donne la même fonction qu’un <input type="radio"> natif augmenté avec le style et les animations de conception de matériaux. Dans le bouton radio, les utilisateurs ne peuvent sélectionner qu’une seule valeur à la fois.

C’est pourquoi les boutons radio portant le même nom incluent un ensemble et un seul peut être sélectionné à la fois.

Le libellé radio-button est fourni pour remplir l’élément <mat-radio- button>. Nous pouvons placer l’étiquette avant ou après un bouton radio en définissant la propriété position de l’étiquette avant ou après.

Si nous n’avons pas besoin que l’étiquette apparaisse à côté du bouton radio, nous pouvons utiliser aria-label ou aria-labelledby pour spécifier une étiquette applicable.

Les boutons radio sont généralement placés à l’intérieur du <mat-radio-group> à moins que le réseau DOM ne rende cela impossible. Le groupe radio a la précieuse propriété de mémoriser le bouton radio actuellement sélectionné à l’intérieur du groupe.

Les boutons radio uniques à l’intérieur du groupe radio hériteront du nom de ce groupe.

Le <mat-radio-group> est bien adapté à @angular/forms et porte à la fois les modules Forms et Reactive Forms.

Nous allons maintenant créer un projet Angular et installer les bibliothèques de matériaux Angular. Nous avons la dernière CLI Angular.

Vous trouverez ci-dessous la commande que nous utiliserons pour créer un projet Angular.

# Angular
ng new project

Nous allons installer hammer.js à l’aide de ces commandes.

# Angular
npm install --save hammerjs

Maintenant, nous pouvons installer le matériel Angular en utilisant la commande ci-dessous.

# Angular
npm install --save @angular/material

Maintenant, nous pouvons installer des animations Angular en utilisant la commande ci-dessous.

# angular
npm install --save @angular/animations

Nous pouvons installer Angular CDK en utilisant la commande ci-dessous.

# angular
npm install --save @angular/cdk

Nous pouvons inclure hammerjs dans le fichier angular.json. Nous pouvons trouver le fichier à la racine d’un projet.

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

Maintenant, créons un groupe de boutons radio et essayons d’obtenir la valeur du bouton radio sélectionné. Tout d’abord, nous allons importer le FormsModule et le ReactiveFormsModule dans app.module.ts, comme indiqué ci-dessous.

# angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nous allons maintenant créer le front-end dans le fichier app.component.html, comme indiqué ci-dessous.

# angular
<div *ngFor="let fruit of fruits">
      <label for="{{fruit}}">
        <input id="{{fruit}}" [value]='fruit' type="radio" name="fruits" [(ngModel)]="favFruit">
        {{fruit}}
      </label>
</div>
<button (click)='radioFun'>Submit</button>

<div>
  <p>The selected Fruit is <b>{{favFruit}}</b></p>
</div>

Production:

Nous allons maintenant lier les boutons radio pour afficher le bouton radio sélectionné. Nous allons modifier le fichier app.component.ts, et le code mis à jour est présenté ci-dessous.

# angular
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  favFruit: string;
  fruits: string[] = ["Banana", "Apple", "Guava", "Strawberry"];

  radioFun(){
    return console.log(this.favFruit);
  }
}

Production: