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:
Ö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 { }
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>
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);
}
}
Ö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 { }
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>
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);
}
}
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!!!