求助：Observable.startWith及表单初始化值失效，ngOnInit后表单值始终为null

碰到过不少类似的Angular表单坑，结合实际排查经验，给你梳理几个最可能的原因：

• 模板与表单控件未正确绑定
  这是最容易踩的坑！如果模板里的表单控件没和TS里的FormControl/FormGroup正确关联，初始值根本不会生效。比如用了formControlName="email"但外层<form>没加[formGroup]="yourForm"，或者混用[(ngModel)]和响应式表单但没对应上，控件相当于“游离”状态，自然不会读取你设置的初始值，最后显示null。

• 异步操作不小心覆盖了初始值
  很多人会在ngOnInit里拉取后端数据，然后用patchValue或setValue给表单赋值。如果后端返回的数据是null，或者请求失败后没做处理直接赋值，就会把你一开始设置的初始值冲成null。比如：

  ngOnInit() {
    this.api.getUserData().subscribe(res => {
      // 如果res是null，直接赋值就会覆盖初始值
      this.yourForm.patchValue(res);
    });
  }
  

  这种情况一定要先判断返回数据的有效性，再加个兜底逻辑。

• startWith操作符用错了场景
  别搞混startWith的作用——它是给Observable的数据流添加一个初始发射值，不是直接给表单控件设置初始值。如果你是在valueChanges里用startWith，但后续有过滤、映射操作把初始值干掉了，比如：

  this.yourForm.get('name').valueChanges
    .pipe(
      startWith('defaultName'),
      filter(val => val && val.length > 2) // 初始值长度不够的话会被过滤掉
    )
    .subscribe(val => console.log(val));
  

  这时候订阅里就拿不到初始值，看起来像是表单值为null，但其实是数据流被截断了。另外，如果只是调用了startWith但没订阅，那更是完全不起作用。

• 表单初始化后被意外重置
  比如你刚初始化完表单设置了初始值，紧接着又调用了form.reset()，或者在某个地方不小心触发了重置操作，那所有控件值都会被重置为null。比如：

  ngOnInit() {
    this.yourForm = new FormGroup({
      name: new FormControl('initial')
    });
    this.yourForm.reset(); // 这行直接把初始值清成null了！
  }
  

  检查下代码里有没有这类“误伤”的重置逻辑。

• 变更检测策略导致值未同步
  如果你的组件设置了ChangeDetectionStrategy.OnPush，但表单初始化后没有触发变更检测，视图就不会更新，看起来像是表单值为null。这种情况要么手动触发变更检测（比如注入ChangeDetectorRef调用detectChanges()），要么确保表单初始化后有能触发变更检测的操作（比如输入属性变化、用户事件）。

• DOM重建导致控件丢失初始值
  如果表单所在的DOM元素用了*ngIf、*ngFor这类结构指令，当条件变化时DOM会销毁重建。如果重建后没有重新给新的控件设置初始值，就会出现值为null的情况。比如：

  <div *ngIf="isFormVisible">
    <input formControlName="name">
  </div>
  

  要是isFormVisible初始为false，后来变成true，DOM重建时得确保表单控件重新初始化并设置好初始值。

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