Angular7升级至9后自定义指令失效问题求助

这个问题我在升级Angular版本时也踩过类似的坑——核心原因是Angular 9调整了表单指令的生命周期时序：你的connectMyForm输入属性的setter会在FormGroupDirective完成与父表单的绑定之前触发，导致此时form属性还未初始化，自然返回null。

下面给你两个可行的解决方案，按推荐程度排序：

方案1：直接传入FormGroup实例（最稳妥） #

既然你已经在组件里创建了myForm，不如直接把这个FormGroup实例作为输入传递给指令，完全绕开FormGroupDirective的生命周期问题：

修改指令代码 #

import { Directive, Input } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Directive({ selector: '[connectMyForm]' })
export class MyConnectDirective {
  // 接收组件传入的FormGroup，以及数据
  @Input('connectMyForm') set data(values: any[] | null) {
    if (!this.parentForm || !values) return;
    const recordGroup = this.parentForm.get('records') as FormGroup;
    
    // 用clear()替代直接修改controls属性，符合Angular表单规范
    recordGroup.clear(); 
    for (const value of values) {
      // 添加唯一命名的表单控件，示例用value.id作为唯一标识
      recordGroup.addControl(`record${value.id}`, this.formBuilder.control(value.name));
    }
  }

  @Input() parentForm!: FormGroup; // 新增输入属性接收父FormGroup

  constructor(private formBuilder: FormBuilder) { }
}

修改组件模板 #

<form [formGroup]="myForm">
  <!-- 同时传入FormGroup和异步数据 -->
  <div [connectMyForm]="myRecords$ | async" [parentForm]="myForm"></div>
  <!-- 其他表单内容 -->
</form>

这个方案的优势是完全脱离对FormGroupDirective的依赖，避免生命周期时序问题，同时代码逻辑更清晰易懂。

方案2：监听FormGroupDirective.form的初始化（适配原有逻辑） #

如果不想修改模板结构，可以在指令中监听FormGroupDirective.form的变化，确保拿到有效值后再处理数据：

修改指令代码 #

import { Directive, Input, OnInit, OnDestroy } from '@angular/core';
import { FormGroupDirective, FormGroup, FormBuilder } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

@Directive({ selector: '[connectMyForm]' })
export class MyConnectDirective implements OnInit, OnDestroy {
  private _data: any[] | null = null;
  private destroy$ = new Subject<void>();

  @Input('connectMyForm') set data(values: any[] | null) {
    this._data = values;
    // 数据更新时，若form已初始化则立即处理
    this.processDataIfReady();
  }

  constructor(
    private formGroupDirective: FormGroupDirective,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit(): void {
    // 监听表单提交流（间接感知form初始化完成），一旦就绪就处理数据
    this.formGroupDirective.ngSubmit
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => this.processDataIfReady());

    // 兜底：用setTimeout确保Angular完成一轮变更检测后再访问form
    setTimeout(() => this.processDataIfReady(), 0);
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  private processDataIfReady(): void {
    const form = this.formGroupDirective.form;
    if (!form || !this._data) return;

    const recordGroup = form.get('records') as FormGroup;
    recordGroup.clear();
    for (const value of this._data) {
      recordGroup.addControl(`record${value.id}`, this.formBuilder.control(value.name));
    }
  }
}

补充注意事项 #

• 尽量用recordGroup.clear()替代直接修改controls属性：Angular表单的controls是内部维护的状态，直接赋值可能破坏表单的状态跟踪逻辑，clear()是官方推荐的清空控件方法。
• 组件中初始化records时，可以直接写records: new FormGroup({})，比formBuilder.group([])更直观，效果完全一致。

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