如何为未选中值的必填mat-button-toggle-group添加视觉提示？

• 首先说明报错原因：mat-form-field仅支持实现了MatFormFieldControl接口的组件，mat-button-toggle-group默认未实现该接口，因此直接放入会触发报错。你可以通过手动添加校验规则+自定义错误提示的方式实现必填视觉提醒，操作步骤如下：
• 第一步：给响应式表单控件添加必填校验
  你需要在FormControl初始化时显式添加Validators.required校验规则，示例代码如下：

  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  export class YourComponent {
    stepForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.stepForm = this.fb.group({
        // 给dogCtrl控件添加必填校验
        dogCtrl: ['', Validators.required]
      })
    }
  }
  

• 第二步：修改模板代码，添加错误状态判断和提示
  直接在模板中监听控件的touched状态和校验结果，手动控制错误提示显示，同时给未通过校验的mat-button-toggle-group添加错误样式：

  <h4>Choose a dog size *</h4>
  <mat-button-toggle-group 
    formControlName="dogCtrl" 
    name="fontStyle" 
    aria-label="Font Style"
    [ngClass]="{'invalid-group': stepForm.get('dogCtrl')?.touched && stepForm.get('dogCtrl')?.invalid}"
  >
    <mat-button-toggle value="small">Small</mat-button-toggle>
    <mat-button-toggle value="medium">Medium</mat-button-toggle>
    <mat-button-toggle value="large">Large</mat-button-toggle>
    <mat-button-toggle value="giant">Giant</mat-button-toggle>
  </mat-button-toggle-group>
  <!-- 自定义必填错误提示 -->
  <span class="error-tip" *ngIf="stepForm.get('dogCtrl')?.touched && stepForm.get('dogCtrl')?.hasError('required')">
    请选择狗狗尺寸，该字段为必填项
  </span>
  

• 第三步：添加错误样式，匹配Material设计规范
  在组件样式文件中添加对应类的样式，和Angular Material默认错误样式保持一致：

  .invalid-group {
    border: 1px solid #f44336;
    border-radius: 4px;
    padding: 2px;
  }
  
  .error-tip {
    display: block;
    margin: 4px 0 0 0;
    font-size: 12px;
    color: #f44336;
  }
  

以上方案适配步进器场景：步进器触发下一步操作时，会自动将所有关联的表单控件标记为touched状态，此时未选中选项的mat-button-toggle-group会自动展示错误样式和提示，无需额外配置。

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