Angular 12动态响应式表单填写后仍验证失败问题求解

核心问题1：校验器类型误用 #

针对文本输入框你错误使用了Validators.requiredTrue校验器，该校验器仅用于布尔类型表单项（例如下拉复选框），要求值必须为true才会通过校验。普通文本输入框的必填校验应该使用Validators.required。
修复代码：

if (question.required) {
  // 替换requiredTrue为required
  validatorsToAdd.push(Validators.required);
}

问题2：表单值同步逻辑冲突 #

你同时使用了三种值绑定逻辑，存在冲突导致FormControl没有正确同步输入值：

1. 响应式表单原生的[formControlName]绑定
2. 手动添加的[value]属性绑定
3. 自定义acpChange事件手动赋值
   大概率是setQuestionValue方法内没有正确调用FormControl的更新方法，你输入的内容始终没有同步到FormGroup中，校验时读取的还是初始空值，自然返回不通过。
   修复方案：
   优先删除[value]绑定和acpChange的手动赋值逻辑，Angular响应式表单会自动完成输入值和FormControl的同步。如果需要额外监听输入变化，直接订阅对应FormControl的valueChanges事件即可。
   如果必须保留setQuestionValue逻辑，确保方法内正确更新FormControl值：

setQuestionValue(inputValue: any, questionId: string, controlName: string) {
  // 你的自定义业务逻辑
  this.form.get(controlName)?.setValue(inputValue);
}

可选排查项 #

你提供的示例payload中没有required字段，建议先确认后端返回的表单配置中确实正确返回了该布尔字段，避免非必填项被误加必填校验。可以在createForm方法内打印validatorsToAdd确认校验器添加逻辑是否符合预期。

内容的提问来源于stack exchange，提问作者Flávio Costa