Angular 5中如何验证带有预填充数据的FormControl？

我明白你的问题——你已经通过数据模型初始化了FormArray里的FormControl，但现在需要给这些控件加上required验证，而官方文档没覆盖这种预填充场景。别担心，只需要修改你创建FormGroup的逻辑，显式为每个需要验证的控件指定验证器即可。

问题根源 #

你当前的setquestions方法是直接把数据模型对象传给this.fb.group()，这种方式只会创建对应键的FormControl，但不会添加任何验证规则。即使控件有预填充值，验证器也不会自动生效，因为根本没给控件绑定验证规则。

具体修改步骤 #

我们需要在映射每个question到FormGroup的时候，显式定义每个控件的初始值和验证规则，而不是直接传入整个模型对象。

修改你的setquestions方法如下：

setquestions(questions: Questions[]) {
  // 遍历每个question，手动构建带验证的FormGroup
  const QuestionsFGs = questions.map(question => 
    this.fb.group({
      ques: [question.ques], // 如果你需要ques也必填，就加Validators.required
      choices: [question.choices, Validators.required] // 这里添加required验证，初始值为模型中的choices
    })
  );

  const QuestionsFormArray = this.fb.array(QuestionsFGs);
  this.CheckListForm.setControl('questions', QuestionsFormArray);

  // 触发表单整体的验证更新，确保valid状态正确
  this.CheckListForm.get('questions').updateValueAndValidity({ emitEvent: false });
}

关键说明 #

1. 显式控件配置：用[初始值, 验证器]的数组格式来定义每个FormControl，这样既保留了预填充的初始值，又绑定了required验证规则。
2. 更新验证状态：调用updateValueAndValidity()是为了让Angular立即检查新添加的验证规则，同步表单的valid状态（比如你的提交按钮的禁用状态会实时更新）。emitEvent: false是为了避免触发不必要的valueChanges事件。

完整修改后的.ts代码片段 #

这里是你修改后的组件代码（关键部分）：

export class CheckListFormComponent implements OnInit, OnChanges {
  CheckListForm: FormGroup;
  Ques: Questions[];
  employmenttype = ['Permanent', 'contractor'];

  constructor(private fb: FormBuilder, private checklistservice: ChecklistService) {
    this.CreateForm();
  }

  ngOnInit() {
    this.checklistservice.getQuestions(1).subscribe(res =>{
      this.Ques = res;
      this.setquestions(this.Ques);
    });

    // ... 其他valueChanges逻辑保持不变
  }

  CreateForm() {
    this.CheckListForm = this.fb.group({
      name: ['', Validators.required],
      EmploymentType: ['', Validators.required],
      HRMS: [''],
      CompanyName:[''],
      questions: this.fb.array([])
    })
  }

  get questions(): FormArray {
    return this.CheckListForm.get('questions') as FormArray;
  }

  setquestions(questions: Questions[]) {
    const QuestionsFGs = questions.map(question => 
      this.fb.group({
        ques: [question.ques],
        choices: [question.choices, Validators.required]
      })
    );

    const QuestionsFormArray = this.fb.array(QuestionsFGs);
    this.CheckListForm.setControl('questions', QuestionsFormArray);
    this.CheckListForm.get('questions').updateValueAndValidity({ emitEvent: false });
  }
}

验证效果 #

现在，即使你的FormArray控件是预填充值的：

• 如果某个choices控件的预填充值为空，required验证会触发，表单整体valid状态为false，提交按钮保持禁用。
• 如果预填充值存在，验证会通过，提交按钮可以正常点击。

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