Angular组件内访问NgForm时表单控件缺失问题如何解决？

根本原因 #

1. 静态ViewChild查询时机错误
   你配置了{ static: true }，该配置会让Angular在首次变更检测运行前就返回查询结果。此时表单内的所有控件（尤其是自定义表单组件、带*ngIf条件渲染的控件）还没有完成初始化，也没有向NgForm实例完成注册流程，因此controls属性为空。
2. 自定义表单控件注册延迟
   你使用的cb-currency、cb-input等自定义表单组件，需要在自身初始化生命周期完成后才会将自身作为控件注册到父级NgForm，这个过程远晚于静态ViewChild的查询时机。
3. 条件渲染的影响
   部分表单控件绑定了*ngIf="previousMappedItem !== undefined"条件，只有当previousMappedItem赋值完成后控件才会被渲染并注册到表单，若在组件初始化早期访问NgForm，这部分控件还未挂载，也会导致控件缺失。
4. name属性重复问题
   你的代码中存在两个cb-currency组件同时设置name="buildPrice"的问题，模板驱动表单依赖name属性作为控件的唯一标识，重复name会导致控件注册时互相覆盖，也可能引发控件缺失的问题。

更合理的解决方案 #

第一步：修正ViewChild配置 #

去掉static: true配置，Angular 9+默认static: false，会在首次变更检测完成后返回查询结果，此时静态渲染的控件已经完成注册：

@ViewChild('finaliseForm') public finaliseForm: NgForm;

第二步：监听表单就绪时机 #

不要在高频触发的ngAfterViewChecked中处理逻辑，改用RxJS监听表单的首次值变化，确认所有控件注册完成后再初始化业务逻辑：

import { first } from 'rxjs/operators';

public ngAfterViewInit(): void {
  // 监听第一次valueChanges发射，说明表单已完成控件注册
  this.finaliseForm.valueChanges.pipe(first()).subscribe(() => {
    this.initFormDisableLogic();
  });
}

private initFormDisableLogic(): void {
  this.isSaveDisabled$ = this.finaliseForm.valueChanges.pipe(
    map(_ => {
      const isQSTeam = this.currentUser?.isQSTeam();
      const pristine = this.finaliseForm?.pristine;
      const invalid = this.finaliseForm?.invalid;
      const assignedToCurrentUser = this.currentMappedItem.assignedToUserId === this.currentUser?.guid;
      const reviewIsGood = (!this.currentMappedItem.reviewRequired ||
          this.currentMappedItem.reviewerId === this.currentUser?.guid);
      return !(isQSTeam &&
          !pristine &&
          !invalid &&
          assignedToCurrentUser &&
      reviewIsGood);
    })
  );
}

可选：Angular 16+ 更简洁方案 #

如果你使用Angular 16及以上版本，可以直接用afterNextRenderAPI，确保所有DOM渲染完成后再处理逻辑：

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

constructor() {
  afterNextRender(() => {
    this.initFormDisableLogic();
  });
}

额外修正：修复重复name属性 #

将两个重复的name="buildPrice"改为唯一值，避免控件注册冲突。

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