Morioh
Login
CODE VN

CODE VN

1 year ago

Cách nhận giá trị nút radio đã chọn trong Angular

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:

  1. Góc Nhận giá trị nút radio đã chọn trên biểu mẫu Gửi
  2. Góc nhận giá trị nút radio đã chọn trên sự kiện OnChange

Góc Nhận giá trị nút radio đã chọn trên biểu mẫu Gửi

Bước 1: Nhập mô-đun

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

Bước 2: Thêm mã vào Xem tệp

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>

Bước 3: Sử dụng tệp ts thành phần

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

Góc nhận giá trị nút radio đã chọn trên sự kiện OnChange

Bước 1: Nhập mô-đun

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

Bước 2: Thêm mã vào Xem tệp

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>

Bước 3: Sử dụng tệp ts thành phần

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

Bắt đầu ứng dụng góc

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ẻ !!!

1.00 GEEK