如何在Angular2+中点击重置按钮重置单选按钮？

嗨，我来帮你搞定这个问题！在Angular里，我们更推荐用表单绑定的方式来管理控件状态，而不是直接操作DOM，这样更符合Angular的设计理念。下面给你两种实用的方案：

方案一：模板驱动表单（最常用） #

这种方式简单直观，借助Angular的ngModel和表单指令来管理单选按钮的状态，重置起来非常方便。

步骤1：修改你的HTML模板 #

首先给单选按钮包裹一个表单标签，绑定模板引用变量，同时给每个单选按钮加上ngModel绑定（顺便帮你修正了原有代码里value重复的问题）：

<form #filterForm="ngForm">
  <div class="dropdown-menu dropdown-menu-right filter-dropdown-menu row">
    <input 
      type="radio" 
      class="filter-dropdown-menu-padding" 
      name="gender" 
      value="0"
      [(ngModel)]="selectedSourceType"
      (click)="filter_source_type(0)"
    > Admin
    <input 
      type="radio" 
      class="filter-dropdown-menu-padding" 
      name="gender" 
      value="1"
      [(ngModel)]="selectedSourceType"
      (click)="filter_source_type(1)"
    > Manager
    <input 
      type="radio" 
      class="filter-dropdown-menu-padding" 
      name="gender" 
      value="2"
      [(ngModel)]="selectedSourceType"
      (click)="filter_source_type(2)"
    > Member<br>
    
    <!-- 重置按钮 -->
    <button type="button" (click)="resetFilter()">重置</button>
  </div>
</form>

步骤2：在组件类中添加逻辑 #

在你的组件.ts文件里，定义绑定变量和重置方法：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  selectedSourceType: string | null = null; // 初始值设为null，确保没有单选按钮默认选中

  // 可选：通过ViewChild获取表单实例，用表单的reset方法重置
  @ViewChild('filterForm') filterForm!: NgForm;

  filter_source_type(type: number) {
    // 你的原有业务逻辑
    console.log('选中的类型：', type);
  }

  resetFilter() {
    // 方法1：直接重置绑定变量，简单高效
    this.selectedSourceType = null;

    // 方法2：调用表单的reset方法，会重置表单内所有控件
    // this.filterForm.reset();
  }
}

方案二：直接操作DOM（应急可用，不推荐） #

如果你暂时不想调整表单结构，也可以通过ViewChild获取单选按钮元素手动重置，但这种方式不符合Angular响应式设计的理念，不建议长期使用：

组件类代码 #

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChildren('radioBtn') radioButtons!: QueryList<ElementRef>;

  filter_source_type(type: number) {
    // 你的原有业务逻辑
  }

  resetFilter() {
    this.radioButtons.forEach(btn => {
      (btn.nativeElement as HTMLInputElement).checked = false;
    });
  }
}

修改HTML模板 #

给每个单选按钮加上模板引用变量#radioBtn：

<div class="dropdown-menu dropdown-menu-right filter-dropdown-menu row">
  <input 
    #radioBtn
    type="radio" 
    class="filter-dropdown-menu-padding" 
    (click)="filter_source_type(0)" 
    name="gender" 
    value="male"
  > Admin
  <input 
    #radioBtn
    type="radio" 
    class="filter-dropdown-menu-padding" 
    (click)="filter_source_type(1)" 
    name="gender" 
    value="male"
  > Manager
  <input 
    #radioBtn
    type="radio" 
    class="filter-dropdown-menu-padding" 
    (click)="filter_source_type(2)" 
    name="gender" 
    value="male"
  > Member<br>
  
  <button type="button" (click)="resetFilter()">重置</button>
</div>

小提醒 #

你原来的代码里所有单选按钮的value都是male，这会导致不管选中哪一个，表单获取到的值都是一样的，建议改成对应类型的标识（比如0、1、2），这样才能区分不同的选择哦！

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