Angular 10中*ngFor循环生成单选框时Required验证失效问题

核心原因 #

1. 原生验证与响应式表单验证冲突
   你同时使用了原生HTML5的required属性和ngNativeValidate指令，又叠加了Angular响应式表单的Validators.required。动态生成单选框时，浏览器的原生验证机制无法正确识别动态渲染的单选组，和Angular的响应式验证逻辑互相干扰，导致验证失效。

2. FormControl初始值设置不当
   你给FormControl设置的初始值是question.value || ''，空字符串''和单选框的value（opt.key）类型不匹配时，Angular可能无法正确判断“未选中”状态，使得Validators.required无法触发验证。

3. 动态控件的验证触发时机问题
   动态生成的表单控件，默认不会自动触发验证状态更新，除非用户交互或手动触发表单验证，否则验证错误不会显示。

解决步骤 #

1. 移除原生验证，完全使用响应式表单验证 #

删掉模板中单选框的required属性，同时移除表单标签上的ngNativeValidate指令，避免两种验证机制冲突。

修改后的模板代码：

<div class="row" *ngSwitchCase="'radiobtn'">
  <legend class="col-form-label col-sm-6 pt-0">{{question.label}}</legend>
  <div class="col-sm-6">
    <div class="form-check" *ngFor="let opt of question.options; let i = index">
      <label class="form-check-label" [attr.for]="question.key+opt.key">
        <input class="form-check-input" type="radio" 
               [name]="question.key" 
               [formControlName]="question.key"
               [id]="question.key+opt.key" 
               [value]="opt.key" />
        {{opt.value}}
      </label>
    </div>
    <!-- 添加验证错误提示 -->
    <div *ngIf="form.get(question.key).invalid && form.get(question.key).touched" class="text-danger">
      请选择此选项
    </div>
  </div>
</div>

2. 修正FormControl初始值 #

将初始值改为null，明确表示“未选中”状态，确保Validators.required能正确识别：

// 构建FormControl时
new FormControl(question.value || null, Validators.required)

3. 提交时手动触发表单验证 #

在表单提交方法中，调用markAllAsTouched()触发所有控件的验证状态更新，确保动态生成的单选框也能显示验证错误：

onSubmit() {
  this.form.markAllAsTouched();
  if (this.form.valid) {
    // 处理表单提交逻辑
  }
}

额外检查点 #

确保每个问题的question.key是唯一值，避免不同单选组的name和formControlName冲突，导致验证逻辑混乱。

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