So erhalten Sie den Wert eines ausgewählten Optionsfelds in Angular

In diesem Tutorial. Wir erfahren, wie Sie den Wert eines ausgewählten Optionsfelds in Angular 14 ermitteln. Dieses Tutorial zeigt Ihnen, wie Sie die ngModelDirektive und das (change)Ereignis verwenden, um den Wert des aktuell ausgewählten Optionsfelds abzurufen.

Es gibt zwei Möglichkeiten, ausgewählte Optionsfelder beim Senden eines Formulars und bei einem Änderungsereignis mit reaktivem Formular in Angular 14-Apps abzurufen. folgendermaßen:

1. Angular: Ausgewählten Optionsfeldwert beim Absenden des Formulars abrufen
2. Angular Ausgewählten Optionsfeldwert bei OnChange-Ereignis abrufen

Angular: Ausgewählten Optionsfeldwert beim Absenden des Formulars abrufen

Schritt 1: Modul importieren

Öffnen Sie dann die Datei app.module.ts und importieren Sie HttpClientModule, FormsModule und ReactiveFormsModule wie folgt in die Datei app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Schritt 2: Code zur Ansichtsdatei hinzufügen

Erstellen Sie in diesem Schritt ein einfaches reaktives Formular mit einem Optionsfeld-Eingabefeldelement. Besuchen Sie also src/app/app.component.html und aktualisieren Sie den folgenden Code darin:

<div class="container">
    <h1>Angular Radio Button Example</h1>
         
    <form [formGroup]="form" (ngSubmit)="submit()">
            
        <div class="form-group">
            <label for="gender">Gender:</label>
            <div>
              <input id="male" type="radio" value="male" name="gender" formControlName="gender">
              <label for="male">Male</label>
           </div>
   
           <div>
              <input id="female" type="radio" value="female" name="gender" formControlName="gender">
              <label for="female">Female</label>
           </div>
               
            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">
                <div *ngIf="f.gender.errors.required">Name is required.</div>
            </div>
        </div>
         
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Schritt 3: Verwenden Sie die Component-TS-Datei

Besuchen Sie in diesem Schritt das Verzeichnis src/app und öffnen Sie app.component.ts . Fügen Sie dann den folgenden Code wie das formGroup- und das formControl-Element zur Datei „component.ts“ hinzu:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   
  form = new FormGroup({
    gender: new FormControl('', Validators.required)
  });
   
  get f(){
    return this.form.controls;
  }
   
  submit(){
    console.log(this.form.value);
  }
   
}

Angular Ausgewählten Optionsfeldwert bei OnChange-Ereignis abrufen

Schritt 1: Modul importieren

Öffnen Sie dann die Datei app.module.ts und importieren Sie HttpClientModule, FormsModule und ReactiveFormsModule wie folgt in die Datei app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Schritt 2: Code zur Ansichtsdatei hinzufügen

Erstellen Sie in diesem Schritt ein einfaches reaktives Formular mit einem Optionsfeld-Eingabefeldelement. Besuchen Sie also src/app/app.component.html und aktualisieren Sie den folgenden Code darin:

<div class="container">
    <h1>Angular Radio Button Example</h1>
        
    <form [formGroup]="form" (ngSubmit)="submit()">
            
        <div class="form-group">
            <label for="gender">Gender:</label>
            <div>
              <input id="male" type="radio" value="male" name="gender" formControlName="gender" (change)="changeGender($event)">
              <label for="male">Male</label>
           </div>
    
           <div>
              <input id="female" type="radio" value="female" name="gender" formControlName="gender" (change)="changeGender($event)">
              <label for="female">Female</label>
           </div>
               
            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">
                <div *ngIf="f.gender.errors.required">Name is required.</div>
            </div>
        </div>
         
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Schritt 3: Verwenden Sie die Component-TS-Datei

Besuchen Sie in diesem Schritt das Verzeichnis src/app und öffnen Sie app.component.ts . Fügen Sie dann den folgenden Code wie das formGroup- und das formControl-Element zur Datei „component.ts“ hinzu:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
  form = new FormGroup({
    gender: new FormControl('', Validators.required)
  });
    
  get f(){
    return this.form.controls;
  }
    
  submit(){
    console.log(this.form.value);
  }
  
  changeGender(e) {
    console.log(e.target.value);
  }
    
}

Starten Sie die Angular-App

Führen Sie in diesem Schritt den folgenden Befehl auf dem Terminal aus, um die Angular-App zu starten:

ng serve

Viel Spaß beim Codieren!!!