如何在Angular中取消单选按钮？含Cancel按钮点击事件实现

Hey there! Let's walk through how to uncheck radio buttons in Angular—both when clicking the radio itself, and using a Cancel button in your setupproduct.component. Here's what you need to know:

1. Uncheck a Radio Button on Direct Click #

By default, Angular radio buttons are designed to keep one option selected in a group—clicking an already selected radio won’t uncheck it. To override this, add a click handler that checks if the radio is currently selected, and resets the bound value if so.

Template Example #

<div class="radio-group">
  <label>
    <input 
      type="radio" 
      name="productOptions" 
      [(ngModel)]="selectedProduct" 
      value="option1"
      (click)="toggleRadioSelection('option1')"
    >
    Option 1
  </label>
  <label>
    <input 
      type="radio" 
      name="productOptions" 
      [(ngModel)]="selectedProduct" 
      value="option2"
      (click)="toggleRadioSelection('option2')"
    >
    Option 2
  </label>
</div>

Component Logic #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  selectedProduct: string | null = null;

  toggleRadioSelection(option: string): void {
    // If the clicked option is already selected, uncheck it
    if (this.selectedProduct === option) {
      this.selectedProduct = null;
    }
  }
}

2. Uncheck Radio Buttons via Cancel Button in setupproduct.component #

This is simple: just reset the variable (or form control) your radio buttons are bound to when the Cancel button is clicked. We’ll cover both template-driven and reactive forms approaches.

Option A: Template-Driven Forms #

Template (setupproduct.component.html)

<!-- Radio Button Group -->
<div class="setup-options">
  <label>
    <input 
      type="radio" 
      name="setupChoices" 
      [(ngModel)]="selectedSetup" 
      value="basic"
    >
    Basic Setup
  </label>
  <label>
    <input 
      type="radio" 
      name="setupChoices" 
      [(ngModel)]="selectedSetup" 
      value="advanced"
    >
    Advanced Setup
  </label>
</div>

<!-- Cancel Button -->
<button type="button" class="cancel-btn" (click)="resetRadios()">Cancel</button>

Component (setupproduct.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-setupproduct',
  templateUrl: './setupproduct.component.html'
})
export class SetupproductComponent {
  selectedSetup: string | null = null;

  resetRadios(): void {
    // Reset the bound variable to uncheck all radios in the group
    this.selectedSetup = null;
  }
}

Option B: Reactive Forms #

If you’re using Angular’s reactive forms, reset the specific form control instead:

Template (setupproduct.component.html)

<form [formGroup]="setupForm">
  <!-- Radio Button Group -->
  <div class="setup-options">
    <label>
      <input 
        type="radio" 
        formControlName="setupType" 
        value="basic"
      >
      Basic Setup
    </label>
    <label>
      <input 
        type="radio" 
        formControlName="setupType" 
        value="advanced"
      >
      Advanced Setup
    </label>
  </div>

  <!-- Cancel Button -->
  <button type="button" class="cancel-btn" (click)="resetForm()">Cancel</button>
</form>

Component (setupproduct.component.ts)

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-setupproduct',
  templateUrl: './setupproduct.component.html'
})
export class SetupproductComponent {
  setupForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.setupForm = this.fb.group({
      setupType: [null] // Initialize with null to start with no selection
    });
  }

  resetForm(): void {
    // Reset the specific form control to uncheck radios
    this.setupForm.get('setupType')?.reset(null);
    // Or reset the entire form if needed: this.setupForm.reset();
  }
}

In both scenarios, resetting the bound value to null unchecks all radio buttons in the group—since no option’s value matches the now-null bound value.

内容的提问来源于stack exchange，提问作者Prerna