如何在未选中mat-radio时禁用表单提交按钮？

你可以通过Angular的表单绑定来实现这个需求，下面提供两种常用的方案：

方案一：模板驱动表单（简单直接） #

这种方式适合快速实现，利用ngModel双向绑定单选组的选中状态，再根据状态控制按钮的禁用属性。

1. 修改模板代码 #

给mat-radio-group添加双向绑定和表单名称，同时给按钮设置禁用条件：

<form action="">
    <mat-radio-group 
        aria-label="Select an option" 
        [(ngModel)]="selectedOption" 
        name="radioGroup"
    >
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>
    <button type="submit" [disabled]="!selectedOption">Submit</button>
</form>

2. 组件类定义变量 #

在对应的组件.ts文件中声明绑定的变量：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 用于存储单选框选中值，初始未选中时为undefined
  selectedOption: string | undefined;
}

3. 导入必要模块 #

确保在你的NgModule中导入FormsModule（否则ngModel无法生效）和Material单选框模块：

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

import { YourComponent } from './your-component.component';

@NgModule({
  imports: [BrowserModule, FormsModule, MatRadioModule],
  declarations: [YourComponent],
  bootstrap: [YourComponent]
})
export class AppModule { }

原理：未选中任何单选框时，selectedOption为undefined，按钮的[disabled]属性为true，按钮被禁用；当选中任意单选框后，selectedOption会被赋值为对应单选按钮的value，按钮恢复可用。

方案二：响应式表单（更适合复杂表单场景） #

如果你的表单逻辑比较复杂，推荐使用响应式表单，通过表单验证来控制按钮状态。

1. 修改模板代码 #

使用formGroup和formControlName绑定表单控件：

<form [formGroup]="radioForm" action="">
    <mat-radio-group 
        aria-label="Select an option" 
        formControlName="selectedOption"
    >
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>
    <button type="submit" [disabled]="radioForm.invalid">Submit</button>
</form>

2. 组件类初始化表单 #

在组件.ts中利用FormBuilder创建表单，并给单选控件添加必填验证：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  radioForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，给selectedOption控件设置必填验证
    this.radioForm = this.fb.group({
      selectedOption: ['', Validators.required]
    });
  }
}

3. 导入必要模块 #

确保NgModule中导入ReactiveFormsModule和Material单选框模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { MatRadioModule } from '@angular/material/radio';

import { YourComponent } from './your-component.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule, MatRadioModule],
  declarations: [YourComponent],
  bootstrap: [YourComponent]
})
export class AppModule { }

原理：当单选框未选中时，selectedOption控件为空，不符合必填验证规则，整个表单处于invalid状态，按钮因此被禁用；选中后控件通过验证，表单变为valid，按钮恢复可用。

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