Angular中ngOnInit内设置FormControl值不生效问题求助

我之前也碰到过一模一样的情况！核心原因是Angular的变更检测时机：在ngOnInit生命周期钩子中，你刚完成表单控件的创建，但此时模板还没完成和表单控件的绑定，直接调用setValue虽然能把值设置到控件实例上，但Angular还没触发变更检测同步到视图。而按钮点击这类用户交互事件会自动触发Angular的变更检测，所以能看到值更新。

下面给你几个可行的解决方案，顺便帮你排查下表单创建代码里的潜在问题：

方案1：用setTimeout延迟执行setValue #

把设置值的逻辑放到setTimeout里，让它在当前Angular初始化周期结束后再执行，此时模板已经完成绑定，变更检测会自动同步视图：

ngOnInit(){
  // ...你的表单创建代码...
  setTimeout(() => {
    this.parsedJson.sections[0].form.controls['clientName'].setValue("John");
  });
}

这里不需要设置延迟时间，setTimeout会把代码推入宏任务队列，等当前的初始化流程走完再执行。

方案2：手动触发变更检测 #

通过ChangeDetectorRef手动通知Angular更新视图，步骤如下：

1. 先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 在设置值之后调用detectChanges()：

ngOnInit(){
  // ...你的表单创建代码...
  this.parsedJson.sections[0].form.controls['clientName'].setValue("John");
  this.cdr.detectChanges(); // 手动触发变更检测，同步视图
}

额外修复：表单创建代码的逻辑bug #

看你的表单创建循环，发现一个潜在问题：第三个if (question.qtype == 'multi-choice')的else分支会和前面的条件冲突！比如当qtype是input-text时，第一个if会添加控件，然后因为第三个if不成立，会执行else分支再次添加同一个key的控件，导致前面创建的控件被覆盖。

建议把条件改成else if的结构，避免重复添加控件：

for (let question of section.question_list) {
  if (question.qtype == 'input-text') {
    const control: FormControl = new FormControl(question.answer, Validators.required);
    section.form.addControl(question.key, control);
  } else if (question.qtype == 'input-email') {
    const control: FormControl = new FormControl(question.answer, Validators.email);
    section.form.addControl(question.key, control);
  } else if (question.qtype == 'multi-choice') {
    for (let choice of question.qchoices) {
      const control: FormControl = new FormControl(choice.selected, Validators.required);
      section.form.addControl(choice.key, control);
    }
  } else {
    const control: FormControl = new FormControl(question.answer, Validators.required);
    section.form.addControl(question.key, control);
  }
}

先试试前两个方案，应该能解决setValue不生效的问题，再修复表单创建的逻辑，避免后续出现其他奇怪的bug。

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