Optionsfelder in Angular

1. Optionsfelder in Angular
2. Optionsfelder in Angular binden

Wir werden anhand von Beispielen vorstellen, wie Optionsfelder hinzugefügt und Optionsfelder in Angular gebunden und validiert werden.

Optionsfelder in Angular

Wir haben die Angular-Materialbibliothek verwendet, um UI/UX in Angular zu erstellen. Angular Material liefert viele eingebaute Module für unsere Projekte.

Komponenten wie Autovervollständigung, Datumsauswahl, Schieberegler, Menüs, Raster, Symbolleisten und Optionsfelder werden im Allgemeinen mit Angular Material verwendet.

Erstellen Sie Optionsfelder mit HTML5 in Angular

Ein Radio-Button ist ein einfaches Eingabeelement mit einer type-Eigenschaft, die auf radio gesetzt ist. Die Syntax von Optionsfeldern ist unten dargestellt.

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

Ausgabe:

Wir müssen für alle HTML-Eingabeelemente einen Namen angeben, da das Element ohne den Namen nicht identifizierbar ist. Wenn das Optionsfeld ausgewählt wurde, möchten wir einen Wert festlegen und diesen Wert an den Server senden.

Lassen Sie uns dies anhand eines Beispiels diskutieren, wie unten gezeigt.

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

Das Namensattribut wird verwendet, um eine ganze Gruppe von Funkobjekten zu erstellen. Ein einzelner Radiobutton ist nicht sinnvoll.

Wir brauchen eine Gruppe von Radiobuttons. Wir können ein Kontrollkästchen für ein einzelnes Element verwenden, aber Optionsfelder machen keinen Sinn, wenn sie als einzelnes Element verwendet werden.

Wichtige Punkte zu Optionsfeldern in Angular

1. Optionsfelder treten in Gruppen auf. Sie machen nur Sinn, wenn sie in die Gruppen gesteckt werden.
2. Ein Element kann ausgewählt werden, und ein Optionsfeld deaktiviert die anderen.
3. Die ID jedes Optionsfelds ist etwas Besonderes. Wir müssen für jedes auf einer Seite verwendete Optionsfeld eine eindeutige ID haben.
4. Das Element radio hat auch das Attribut name. Das Attribut name kann eine ganze Gruppe von Funkobjekten festlegen.
5. Die Optionsfelder in der Gruppe haben denselben Namen, da HTML das Attribut name verwendet, um herauszufinden, aus welcher Gruppe dieses Optionsfeld stammt, um sicherzustellen, dass nur ein Schalter in der Gruppe ausgewählt ist.

Optionsfelder in Angular binden

Der <mat-radio-button> bietet die gleiche Funktion wie ein nativer <input type="radio"> mit Materialdesign-Styling und -Animationen. Im Optionsfeld können Benutzer jeweils nur einen Wert auswählen.

Aus diesem Grund enthalten Optionsfelder mit demselben Namen ein Set, und es kann immer nur eines ausgewählt werden.

Das Label radio-button wird bereitgestellt, um das Element <mat-radio- button> zu erfüllen. Wir können die Beschriftung vor oder nach einem Optionsfeld platzieren, indem wir die Eigenschaft Beschriftungsposition vor oder nach setzen.

Wenn das Label nicht neben dem Optionsfeld erscheinen soll, können wir das aria-label oder aria-labelledby verwenden, um ein anwendbares Label anzugeben.

Optionsfelder werden im Allgemeinen innerhalb der <mat-radio-group> platziert, es sei denn, das DOM-Netzwerk würde dies unmöglich machen. Die Radio-Gruppe hat die wertvolle Eigenschaft, sich an den aktuell ausgewählten Radio-Button innerhalb der Gruppe zu erinnern.

Eindeutige Optionsfelder innerhalb der Optionsgruppe erben den Namen dieser Gruppe.

Die <mat-radio-group> passt gut zu @angular/forms und trägt sowohl die Module Forms als auch Reactive Forms.

Jetzt erstellen wir ein Angular-Projekt und installieren die Angular-Materialbibliotheken. Wir haben die neuste Angular CLI.

Unten ist der Befehl, den wir verwenden werden, um ein Angular-Projekt zu erstellen.

# Angular
ng new project

Mit diesen Befehlen installieren wir hammer.js.

# Angular
npm install --save hammerjs

Jetzt können wir Angular-Material mit dem unten gezeigten Befehl installieren.

# Angular
npm install --save @angular/material

Jetzt können wir Angular-Animationen mit dem unten gezeigten Befehl installieren.

# angular
npm install --save @angular/animations

Wir können Angular CDK mit dem unten gezeigten Befehl installieren.

# angular
npm install --save @angular/cdk

Wir können hammerjs in die Datei angular.json einfügen. Wir können die Datei im Stammverzeichnis eines Projekts finden.

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

Lassen Sie uns nun eine Gruppe von Optionsfeldern erstellen und versuchen, den Wert des ausgewählten Optionsfelds abzurufen. Zuerst importieren wir das FormsModule und ReactiveFormsModule in app.module.ts, wie unten gezeigt.

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

Wir erstellen nun das Frontend in der Datei app.component.html, wie unten gezeigt.

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

Ausgabe:

Jetzt werden wir die Optionsfelder binden, um das ausgewählte Optionsfeld anzuzeigen. Wir werden die Datei app.component.ts bearbeiten, und der aktualisierte Code wird unten angezeigt.

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

Ausgabe: