下拉选择框字段已有数据却仍被判定为空

嘿，我一眼就揪出问题所在了——你的下拉选项value绑定写错了！

看你代码里的<option *ngFor="let quiz of quizzes" value="{{quiz_id}}">，这里的quiz_id根本不是当前循环的quiz对象里的属性啊！你应该绑定quiz.id（如果你的quiz对象里存储ID的字段是id，要是叫别的比如quizId就对应改）。因为Angular的表单控件是靠value来识别选中值的，你绑定了一个不存在的变量，哪怕用户选了选项，控件的值其实还是空的，自然就触发必填验证了。

给你几个具体的解决步骤：

1. 修正Option的Value绑定 #

把插值表达式改成Angular推荐的属性绑定语法（更安全），或者至少把变量名改对：

<!-- 推荐写法 -->
<option *ngFor="let quiz of quizzes" [value]="quiz.id">
  {{quiz.title}}
</option>

<!-- 或者用插值表达式的正确写法 -->
<option *ngFor="let quiz of quizzes" value="{{quiz.id}}">
  {{quiz.title}}
</option>

2. 添加强化用户体验的默认选项 #

建议在循环的选项前面加一个默认的禁用空选项，引导用户主动选择，避免初始状态下控件值为空但用户没操作的情况：

<option value="" disabled selected>Select a quiz</option>

3. 检查表单控件的初始化 #

确保你在组件里创建表单时，quiz_id控件是正确配置了必填验证的：

// 假设你用的是FormBuilder
this.create_challenge_form = this.fb.group({
  quiz_id: ['', Validators.required]
});

4. 确认Quizzes数据已正确加载 #

还要保证quizzes数组在组件初始化时已经拿到了数据，比如在ngOnInit里调用接口获取，不然循环出来的选项是空的，用户根本选不到内容，也会触发验证错误。

最后给你完整的修正后代码：

<td>Quiz</td>
<td>
  <select formControlName="quiz_id" name="quiz_id" class="form-control">
    <option value="" disabled selected>Select a quiz</option>
    <option *ngFor="let quiz of quizzes" [value]="quiz.id">
      {{quiz.title}}
    </option>
  </select>
  <!-- 当字段为空且已被触碰时显示此错误 -->
  <div *ngIf="create_challenge_form.get('quiz_id').touched && create_challenge_form.get('quiz_id').hasError('required')" class="alert alert-danger">
    Quiz is required.
  </div>
</td>

按照上面的步骤改完，应该就能解决这个验证错误的问题啦！

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