ngx-formly中带隐藏表单元素的级联如何实现懒触发？

问题根因 #

ngx-formly默认会在字段被设置为隐藏状态时，将对应的FormControl从父级FormGroup中移除并清空值（对应配置项resetOnHide默认值为true）；同时按需渲染的机制决定了只有被标记为需要渲染的字段才会触发注册、创建对应FormControl的流程。在字段默认隐藏的场景下，表单初始化的onInit钩子触发时，目标控件还未完成注册，自然就会出现form.get('sport')返回null的问题。

可行方案 #

方案1：关闭隐藏即移除控件的默认行为（改动最小，优先推荐） #

对所有需要后续展示的级联字段（包括sport及它的所有下级级联select），在字段配置中显式关闭隐藏时的控件移除逻辑：

{
  key: 'sport',
  type: 'select',
  hide: true, // 保持初始隐藏的业务逻辑
  resetOnHide: false, // 核心配置：隐藏状态下不把控件从FormGroup移除、不丢弃已存值
  // 其余原有字段配置...
}

配置完成后，哪怕字段初始是隐藏状态，对应的FormControl也会在表单初始化阶段就完成注册，原本在onInit中通过this.form.get('sport')获取控件、绑定valueChanges流的逻辑可以完全复用，和官方示例的行为保持一致。该配置不会导致隐藏字段提前触发校验，ngx-formly默认会跳过所有隐藏字段的校验流程。

方案2：将事件绑定逻辑下沉到字段自身的生命周期钩子 #

如果不想提前注册所有隐藏字段的控件，可以把原本写在外层onInit中的绑定逻辑，挪到sport字段自己的onInit钩子中：

// sport字段的配置项
{
  key: 'sport',
  type: 'select',
  hide: true,
  hooks: {
    // 当前字段的onInit钩子会在对应FormControl创建完成后立即触发，不依赖外层初始化时机
    onInit: (field) => {
      // 直接通过field.formControl获取当前字段绑定的控件，无需再从根表单查找
      const sportControl = field.formControl;
      field.templateOptions.options = sportControl.valueChanges.pipe(
        // 原有的级联options映射逻辑...
      );
    }
  }
}

这种模式的适配性最强：不管sport字段是初始就展示，还是用户完成opt-in操作后才被设置为可见、甚至是完全动态插入到字段列表中，只要对应的FormControl被创建，钩子就会自动触发，永远不会出现获取控件为null的问题。

方案3：在opt-in操作的回调中完成绑定（适配动态插入字段的场景） #

如果级联字段本身就设计为在用户opt-in完成后才会被动态插入到表单字段列表中（而非一开始就存在配置中、只是隐藏），则可以把原本的绑定逻辑从全局onInit中移出，放到opt-in操作的触发回调里：

• 当用户完成opt-in操作，把sport字段的配置插入到fields数组、设置hide: false后，待控件完成渲染注册，再执行获取控件、绑定valueChanges的逻辑
• 这种方式的逻辑完全和用户操作时序对齐，不会出现初始化阶段控件还不存在的时序问题，仅适合完全动态生成字段的场景，不推荐作为通用方案使用。

注意：不要在这种时序场景下强行在全局onInit中找延迟创建的控件，全局onInit钩子的触发时机远早于动态插入字段的创建流程，逻辑天然不匹配。

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