Botones de radio en Angular

1. Botones de radio en Angular
2. Vincular botones de opción en Angular

Presentaremos cómo agregar botones de radio y enlazar y validar botones de radio en Angular con ejemplos.

Botones de radio en Angular

Usamos la biblioteca de materiales de Angular para hacer UI/UX en Angular. El material angular ofrece una gran cantidad de módulos integrados para nuestros proyectos.

Los componentes como el autocompletado, el selector de fechas, el control deslizante, los menús, las cuadrículas, las barras de herramientas y los botones de radio se usan generalmente con Angular Material.

Crear botones de radio usando HTML5 en Angular

Un botón de radio es un elemento de entrada simple con una propiedad de tipo establecida en radio. La sintaxis de los botones de opción se muestra a continuación.

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

Producción:

Necesitamos especificar un nombre para todos los elementos de entrada HTML porque el elemento no será identificable sin el nombre. Si se ha seleccionado el botón de radio, queremos establecer un valor y enviar este valor al servidor.

Analicemos esto con un ejemplo como se muestra a continuación.

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

El atributo de nombre se utiliza para establecer un grupo completo de objetos de radio. Un solo botón de radio no tiene sentido.

Necesitamos un grupo de botones de radio. Podemos usar una casilla de verificación para un solo elemento, pero los botones de radio no tienen sentido cuando se usan como un solo elemento.

Puntos importantes sobre los botones de radio en Angular

1. Los botones de opción aparecen en grupos. Solo tienen sentido cuando se ponen en los grupos.
2. Se puede seleccionar un elemento y un botón de opción anula la selección de los demás.
3. La identificación de cada botón de radio es especial. Debemos tener una identificación única para cada botón de radio usado en una página.
4. El elemento radio también tiene el atributo name. El atributo name puede establecer un grupo completo de objetos de radio.
5. Los botones de opción en el grupo tienen el mismo nombre porque HTML usa el atributo name para averiguar de qué grupo es este botón de opción para garantizar que solo se seleccione un botón en el grupo.

Vincular botones de opción en Angular

El <mat-radio-button> ofrece la misma función que un aumento nativo de <input type="radio"> con estilo y animaciones de Material Design. En el botón de radio, los usuarios pueden seleccionar solo un valor a la vez.

Es por eso que los botones de opción con el mismo nombre incluyen un conjunto y solo se puede seleccionar uno a la vez.

La etiqueta radio-button se proporciona para cumplir con el elemento <mat-radio- button>. Podemos colocar la etiqueta antes o después de un botón de radio configurando la propiedad de posición de la etiqueta antes o después.

Si no necesitamos que la etiqueta aparezca junto al botón de radio, podemos usar aria-label o aria-labeledby para especificar una etiqueta aplicable.

Los botones de radio generalmente se colocan dentro del <mat-radio-group> a menos que la red DOM lo haga imposible. El grupo de radio tiene la valiosa propiedad de recordar el botón de radio actualmente seleccionado dentro del grupo.

Los botones de radio únicos dentro del grupo de radio heredarán el nombre de este grupo.

El <mat-radio-group> se adapta bien a @angular/forms y lleva los módulos Forms y Reactive Forms.

Ahora crearemos un proyecto de Angular e instalaremos las bibliotecas de materiales de Angular. Tenemos la última CLI de Angular.

A continuación se muestra el comando que usaremos para crear un proyecto Angular.

# Angular
ng new project

Instalaremos hammer.js usando estos comandos.

# Angular
npm install --save hammerjs

Ahora, podemos instalar material angular usando el comando que se muestra a continuación.

# Angular
npm install --save @angular/material

Ahora, podemos instalar animaciones Angular usando el comando que se muestra a continuación.

# angular
npm install --save @angular/animations

Podemos instalar Angular CDK usando el comando que se muestra a continuación.

# angular
npm install --save @angular/cdk

Podemos incluir hammerjs dentro del archivo angular.json. Podemos encontrar el archivo en la raíz de un proyecto.

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

Ahora, creemos un grupo de botones de opción e intentemos obtener el valor del botón de opción seleccionado. Primero, importaremos FormsModule y ReactiveFormsModule dentro de app.module.ts, como se muestra a continuación.

# 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 { }

Ahora crearemos la interfaz en el archivo app.component.html, como se muestra a continuación.

# 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>

Producción:

Ahora vincularemos los botones de opción para mostrar el botón de opción seleccionado. Editaremos el archivo app.component.ts, y el código actualizado se muestra a continuación.

# 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);
  }
}

Producción: