Angular Material单选按钮值修改及ngModel报错解决求助

1. 修正模板驱动表单绑定错误 #

你遇到的No value accessor for form control with unspecified name attribute错误，是因为<mat-radio-group>未指定name属性，且未正确绑定ngModel。单选按钮是互斥选择，无需给每个按钮单独绑定布尔值，只需给整个组绑定一个变量存储选中值即可。

修改后的HTML代码：

<mat-radio-group [(ngModel)]="selectedCategory" name="categoryFilter" *ngIf="isClickedCategory && isExpended">
  <div>
    <mat-radio-button class="radio-group" value="all" color="warn">All</mat-radio-button>
  </div>

  <div>
    <mat-radio-button class="radio-group" value="electronics" color="warn">Electronics</mat-radio-button>
  </div>

  <div>
    <mat-radio-button class="radio-group" value="accessories" color="warn">Accessories</mat-radio-button>
  </div>

  <div>
    <mat-radio-button class="radio-group" value="office" color="warn">Office</mat-radio-button>
  </div>
  <br/>
</mat-radio-group>

说明：将重复的*ngIf移到<mat-radio-group>上简化代码；修正了拼写错误Accesories为Accessories

2. 调整TypeScript变量与逻辑 #

替换原有的四个布尔变量为单个字符串变量存储选中类别，同时优化filtersActive函数：

// 存储选中的类别，默认选中"all"
selectedCategory: string = 'all';

// 可选：若需保留原有布尔变量，通过getter同步状态
get all(): boolean {
  return this.selectedCategory === 'all';
}

get electronics(): boolean {
  return this.selectedCategory === 'electronics';
}

get accessories(): boolean {
  return this.selectedCategory === 'accessories';
}

get office(): boolean {
  return this.selectedCategory === 'office';
}

filtersActive(): boolean {
  // 选中非"all"选项时，判定筛选已激活
  return this.selectedCategory !== 'all';
}

3. 确认模块导入正确 #

确保你的Angular模块已导入MatRadioModule和FormsModule（模板驱动表单必备）：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    FormsModule,
    MatRadioModule,
    // 其他业务模块
  ]
})
export class YourModule { }

关键提示 #

• 单选按钮组通过单个ngModel绑定即可实现互斥选择，无需维护多个独立布尔变量
• 若必须保留原有布尔变量，使用getter同步状态可避免重复维护逻辑
• filtersActive函数可直接通过选中值是否为all判断筛选状态，简化代码逻辑

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