Angular响应式表单：提交时验证单选按钮并显示错误提示

问题描述 #

我需要将单选按钮设置为必填项，但当前表单未提交时，mat-error元素就直接显示了错误提示。预期仅当用户尝试提交表单时才显示该提示，我尝试添加触摸（touched）判定条件但未生效，寻求解决方案。

原HTML代码 #

<div class="mat-radio-group">
  <label class="label-mat-radio-group margin-space">Channel visibility</label>
  <mat-radio-group formControlName="visibility" aria-label="Select an option">
    <mat-radio-button value="public">Public</mat-radio-button>
    <mat-radio-button value="private">Private</mat-radio-button>
    <!-- fix: touched is not working -->
    <mat-error *ngIf="form.get('visibility').invalid">Please select channel visibility.</mat-error>
  </mat-radio-group>
</div>

原组件代码 #

initializeFormAndItsFields() {
  this.form = new FormGroup({
    title: new FormControl(null, {
      validators: [Validators.required, Validators.minLength(3)]
    }),
    visibility: new FormControl(null,{
      validators:[Validators.required]
    }),
    leadType: new FormControl(null,{
      validators:[Validators.required]
    }),
    keywords: new FormControl(null, {
      validators: [Validators.required, Validators.minLength(3)]
    }),
   
  });
}

解决方案 #

1. 添加表单提交状态标记 #

在组件类中新增一个布尔变量，用于标记表单是否被提交过：

submitted = false;

2. 完善表单提交处理逻辑 #

在表单提交的方法中，标记表单为已提交，并触发所有控件的触摸状态更新：

onSubmit() {
  this.submitted = true;
  // 标记所有控件为已触摸，确保错误提示逻辑统一触发
  this.form.markAllAsTouched();

  if (this.form.valid) {
    // 此处编写表单提交的业务逻辑
  }
}

3. 更新错误提示的判定条件 #

修改mat-error的显示条件，结合控件有效性、触摸状态和表单提交状态：

<mat-error *ngIf="form.get('visibility').invalid && (form.get('visibility').touched || submitted)">
  Please select channel visibility.
</mat-error>

说明 #

之前touched判定无效的原因是：mat-radio-group的touched状态仅在用户实际点击过单选框组时才会被设置，而表单初始化时控件虽处于无效状态（未选值），但未被触摸，仅判断invalid会导致错误提示提前显示。结合控件触摸状态和表单提交状态后，错误提示只会在以下两种场景显示：

• 用户点击过单选框组但未选择任何选项
• 用户尝试提交表单但未选择单选框选项

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