Angular 15单选按钮验证错误消息不显示及默认选中问题咨询

1. 错误消息不显示的排查点 #

• 控件关联错误：确保所有性别单选框使用同一个formControlName，错误消息的显示条件需绑定到该表单控件，而非单个单选框。比如控件名设为gender，错误消息要基于form.get('gender')的状态判断。
• 显示条件缺失交互判断：Angular表单控件默认不会在未交互时展示错误，必须添加dirty或touched状态判定。示例代码：

  <div *ngIf="employeeForm.get('gender')?.hasError('required') && (employeeForm.get('gender')?.dirty || employeeForm.get('gender')?.touched)">
    You must pick a gender
  </div>
  

• 表单控件初始化错误：组件中FormControl必须正确绑定必填验证规则，示例：

  employeeForm = new FormGroup({
    gender: new FormControl('', Validators.required)
  });
  

• CSS隐藏问题：检查错误消息元素是否被CSS样式（如display: none）意外隐藏。

2. 实现性别单选框默认选中 #

推荐使用响应式表单的方式设置默认值，避免手动DOM操作导致的表单状态冲突：

• 在FormControl初始化时指定默认值：

  employeeForm = new FormGroup({
    gender: new FormControl('male', Validators.required) // 'male'对应单选框的value值，会自动选中匹配项
  });
  

• 若需在HTML中设置（不推荐，易引发状态不一致）：

  <input type="radio" formControlName="gender" value="male" checked>男
  

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