Angular单选按钮验证失效：未选中仍可提交且无错误提示

问题根源 #

你的代码存在以下核心问题导致验证失效：

1. FormArray控件未正确初始化：map回调中没有返回创建的FormControl，导致数组内控件均为undefined，表单无法识别需要验证的字段
2. 验证规则加错位置：给整个FormArray加Validators.required仅会验证数组本身是否存在，不会检查每个单选按钮是否被选中
3. 错误提示绑定错误：HTML中使用数据数组skills判断有效性，而非表单控件数组，导致错误提示无法触发
4. 表单绑定语法冗余：单选按钮的formControlName使用插值语法{{i}}，不符合Angular表单绑定的简洁规范

修改后的TS代码 #

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

submitted: boolean = false;

// 新增getter快速获取表单数组控件
get skillsFormArray(): FormArray {
  return this.feedbackFormWithArray.get('skills') as FormArray;
}

this.feedbackFormWithArray = this.fb.group({
  skills: this.fb.array(
    // 每个技能对应一个必填FormControl，初始值设为null表示未选中
    this.skills.map(() => this.fb.control(null, Validators.required))
  )
});

submitData() {
  this.submitted = true;
  // 验证通过后再执行提交逻辑
  if (this.feedbackFormWithArray.valid) {
    console.log(this.feedbackFormWithArray.value);
    // 此处添加实际提交逻辑
  }
}

修改后的HTML代码 #

<form [formGroup]="feedbackFormWithArray" (ngSubmit)="submitData()">
  <table class="res-tbl">
    <tbody formArrayName="skills" class="tbl">
      <tr class="skill-tr table-data" *ngFor="let skill of skills; let i = index">
        <td class="table-data res-td tbl-border skill-td">
          <b><span class="text-danger">*</span>{{skill.skillName}}<span>:</span></b>
          <p class="skill-description-p">{{skill.skillDescription}}</p>
          <!-- 单个技能的错误提示 -->
          <small *ngIf="submitted && skillsFormArray.controls[i].invalid" class="text-danger">
            请选择该技能的评分
          </small>
        </td>
        <td class="table-data center rating-td">
          <input type="radio" [formControlName]="i" [value]="3" />
        </td>
        <td class="table-data center rating-td">
          <input type="radio" [formControlName]="i" [value]="2" />
        </td>
        <td class="table-data center rating-td">
          <input type="radio" [formControlName]="i" [value]="1" />
        </td>
      </tr>
    </tbody>
    <!-- 全局错误提示（可选） -->
    <div *ngIf="submitted && feedbackFormWithArray.get('skills')?.invalid" class="text-danger">
      <small>请完成所有技能的评分选择</small>
    </div>
  </table>
  <Button type="submit" [disabled]="feedbackFormWithArray.invalid" class="btn button-btn">
    {{feedbackId ? 'Update' : 'Create'}}
  </Button>
</form>

关键修改说明 #

1. 正确初始化控件：map回调返回带必填验证的FormControl，初始值null明确标记未选中状态
2. 调整验证范围：将必填验证加到每个单选组对应的FormControl上，确保每个技能都必须选择评分
3. 绑定表单控件：通过skillsFormArray getter获取表单数组，在HTML中准确判断每个控件的有效性
4. 简化绑定语法：使用[formControlName]="i"替代插值语法，符合Angular表单绑定规范
5. 优化错误提示：新增单个技能的精准提示，同时保留全局提示作为补充，提升用户体验

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