Trong hướng dẫn này. chúng ta sẽ tìm hiểu cách lấy giá trị của nút radio đã chọn trong Angular 14. Hướng dẫn này sẽ chỉ cho bạn cách sử dụng chỉ thị ngModel và (change)sự kiện để lấy giá trị của nút radio hiện được chọn.
Có hai cách để nhận nút radio đã chọn trong sự kiện gửi biểu mẫu và onchange với biểu mẫu phản ứng trong 14 ứng dụng góc cạnh; như sau:
Sau đó, Mở tệp app.module.ts và nhập HttpClientModule, FormsModule và ReactiveFormsModule vào tệp app.module.ts như sau:
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 { }
Trong bước này, hãy tạo biểu mẫu phản ứng đơn giản với phần tử trường đầu vào nút radio. Vì vậy, hãy truy cập src/app/app.component.html và cập nhật đoạn mã sau vào đó:
<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>
Trong bước này, hãy truy cập thư mục src/app và mở app.component.ts . Sau đó, thêm đoạn mã sau như phần tử formGroup và formControl trên tệp component.ts:
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);
}
}
Sau đó, Mở tệp app.module.ts và nhập HttpClientModule, FormsModule và ReactiveFormsModule vào tệp app.module.ts như sau:
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 { }
Trong bước này, hãy tạo biểu mẫu phản ứng đơn giản với phần tử trường đầu vào nút radio. Vì vậy, hãy truy cập src/app/app.component.html và cập nhật đoạn mã sau vào đó:
<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>
Trong bước này, hãy truy cập thư mục src/app và mở app.component.ts . Sau đó, thêm đoạn mã sau như phần tử formGroup và formControl trên tệp component.ts:
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);
}
}
Trong bước này, hãy thực hiện lệnh sau trên thiết bị đầu cuối để bắt đầu ứng dụng góc cạnh:
ng serve
Mã hóa vui vẻ !!!