提交前验证单选按钮组——Angular响应式表单

是否需要修改其他表单字段的验证方式？ #

不需要。Angular响应式表单的验证是基于每个表单控件的规则独立运行的，只要你给单选按钮控件（request）和其他字段（比如name）都正确设置了Validators.required，表单的valid状态会自动聚合所有控件的验证结果，提交按钮的[disabled]="!contactForm.valid"逻辑会正常工作——只要有任何一个必填字段未通过验证，按钮就会保持禁用。

你当前的代码里，name和request都已经配置了必填验证，其他字段的验证逻辑不需要调整，只需要修复单选按钮的错误提示触发时机即可。

能否在不提交表单的情况下完成单选按钮的验证？ #

完全可以。你现在的单选按钮错误提示只在表单提交后（isFormSubmitted为true）才显示，这导致用户在填写过程中无法及时得到反馈。只需调整错误提示的触发条件，让它和name字段的错误提示逻辑保持一致，就能在用户触摸/交互单选组后立刻显示验证错误，同时表单的valid状态也会实时更新，确保提交按钮在单选未选中时保持禁用。

具体修改方案 #

1. 调整模板中的单选错误提示逻辑

修改contact.component.html里的单选错误提示部分：

<mat-error *ngIf="contactForm.get('request')?.invalid && (contactForm.get('request')?.touched || contactForm.get('request')?.dirty)">
    Please select an option from the list above
</mat-error>

同时给mat-radio-group添加触摸事件，确保用户点击单选区域后标记控件为已触摸：

<mat-radio-group aria-labelledby="help-options" [required]="true" formControlName="request" (blur)="contactForm.get('request')?.markAsTouched()">

2. 简化提交逻辑（可选）

你的onSubmit方法里有冗余判断，可以简化为：

onSubmit() {
  this.isFormSubmitted = true;

  if (this.contactForm.invalid) {
    // 触发表单所有控件的触摸状态，强制显示所有错误
    this.contactForm.markAllAsTouched();
    return;
  }
  
  console.log(this.contactForm.value);
  // 执行提交逻辑
}

效果说明 #

• 页面加载时，request控件为空，表单处于invalid状态，提交按钮保持禁用。
• 用户点击单选组但未选择任何选项时，控件被标记为touched，错误提示会立刻显示。
• 用户选择任一单选选项后，request控件验证通过，表单valid状态更新，提交按钮自动启用。
• 若用户清空单选（虽然单选组默认不允许，但特殊情况），控件会再次变为invalid，按钮重新禁用。

内容的提问来源于stack exchange，提问作者A.Mac