Angular Material UI：如何为复选框/单选按钮添加失焦验证？

一、单选按钮处理 #

1. 修正FormControl验证器 #

单选按钮组的必填验证应该用Validators.required而非requiredTrue——requiredTrue针对布尔值必须为true的场景，而单选组的有效值是选中的选项值，只要有选中就满足必填要求。

组件TS代码：

import { FormControl, Validators } from '@angular/forms';

// 初始化单选按钮表单控件
radioFormControl = new FormControl('', Validators.required);

2. 添加自定义错误样式容器 #

给mat-radio-group套一个容器，绑定表单控件的invalid和touched状态，触发时显示红色边框：

HTML代码：

<div class="radio-group-container" [class.invalid]="radioFormControl.invalid && radioFormControl.touched">
  <mat-radio-group [formControl]="radioFormControl">
    @for (i of radioValues; track i){        
      <mat-radio-button [value]="i.key">
        {{i.value}}
      </mat-radio-button>
    }
  </mat-radio-group>
</div>

3. 自定义CSS样式 #

.radio-group-container {
  padding: 8px;
  border-radius: 4px;
}

.radio-group-container.invalid {
  border: 1px solid #f44336; /* Material主题错误色 */
}

二、复选框处理 #

复选框是多选场景，需要用FormArray管理多个选项，并自定义验证器确保至少选中一个。

1. 初始化FormArray与自定义验证器 #

组件TS代码：

import { FormArray, FormControl, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

// 初始化复选框表单数组
checkboxFormArray = new FormArray([], this.atLeastOneCheckedValidator());

// 自定义验证器：至少选中一个复选框
atLeastOneCheckedValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const formArray = control as FormArray;
    // 检查是否有至少一个控件值为true（选中状态）
    const hasChecked = formArray.controls.some(ctrl => ctrl.value);
    return hasChecked ? null : { required: true };
  };
}

ngOnInit(): void {
  // 根据选项列表初始化FormArray的控件
  this.checkboxValues.forEach(() => {
    this.checkboxFormArray.push(new FormControl(false));
  });
}

2. 绑定表单数组并添加错误状态容器 #

给复选框容器绑定invalid和touched状态，同时监听失焦事件标记表单为已触碰：

HTML代码：

<div class="checkbox-container" 
     [class.invalid]="checkboxFormArray.invalid && checkboxFormArray.touched"
     (blur)="checkboxFormArray.markAsTouched()">
  @for (ctrl of checkboxFormArray.controls; track ctrl; let index = $index) {
    <mat-checkbox 
      [formControl]="ctrl"
      [value]="checkboxValues[index].key"
    >
      {{checkboxValues[index].value}}
    </mat-checkbox>
  }
</div>

3. 自定义CSS样式 #

.checkbox-container {
  padding: 8px;
  border-radius: 4px;
}

.checkbox-container.invalid {
  border: 1px solid #f44336; /* Material主题错误色 */
}

关键说明 #

• 为什么不能用mat-form-field包裹？：mat-form-field要求内部必须是实现了MatFormFieldControl接口的组件（如input、mat-select等），而mat-checkbox和mat-radio-group并不符合这个要求，因此直接包裹会报错。
• 表单状态触发：只有当表单控件被标记为touched（失焦）且invalid（未通过验证）时，才会显示错误边框，符合你要的失焦后触发效果。

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