Angular（2021）formGroup报错需传入FormGroup实例，如何用服务设置下拉框？

报错触发核心逻辑 #

Angular 响应式表单模块在模板初始化阶段，检测到绑定到[formGroup]指令的取值不是合法的FormGroup实例（取值为undefined/null）时，就会抛出该错误。
结合现有代码，具体触发点包括：

• 组件初始化流程被异常中断，导致formGroup未完成赋值：
  • 直接执行JSON.parse(localStorage.getItem('modules'))时，若本地缓存无对应键值，返回null会触发JSON解析错误，中断整个ngOnInit执行
  • 对话框注入数据为空时，直接读取this.data.element.idModule会触发空引用异常，同样阻断formGroup的赋值流程
• 模板变量引用不匹配：模板中模块下拉框循环使用的变量为modules，但组件TS中未声明该变量，会在表单渲染阶段触发空引用
• 未初始化完成的表单直接渲染：组件在ngOnInit中才给formGroup赋值，在赋值完成前的首个渲染周期，模板取到的formGroup为undefined，直接触发校验错误

分步修复操作 #

1. 补充初始化兜底逻辑，避免流程中断 #

• 对本地缓存读取增加空值兜底：

  // 替换原直接解析localStorage的代码
  selectModule: GetModulesModel[] = JSON.parse(localStorage.getItem('modules') || '[]');
  

• 对注入的对话框数据增加空值判断，避免空引用：

  ngOnInit(): void {
    // 兜底处理传入的对话框数据
    const dialogData = this.data || {};
    this.element = dialogData.element || {};
    this.isDisabled = dialogData.isDisabled ?? false;
    // 初始化formGroup
    this.formGroup = this.fb.group({
      tittle: new FormControl(),
      idModule: new FormControl({
        value: this.element.idModule ? this.element.idModule.toString() : '',
        disabled: this.isDisabled
      }, [Validators.required]),
      options: new FormControl(),
      incidentType: new FormControl(),
      closeDate: new FormControl(),
      incidentDetail: new FormControl(),
      closeComentary: new FormControl(),
    });
  }
  

• 表单外层增加渲染条件判断，等formGroup实例初始化完成后再渲染内容：

  <form *ngIf="formGroup" [formGroup]="formGroup">
    <!-- 原有表单内部结构不变 -->
  </form>
  

2. 修正模板变量绑定错误 #

• 原模板中模块下拉框循环绑定的modules变量不存在，替换为组件中声明的selectModule数组：

  <mat-select formControlName="idModule">
    <mat-option *ngFor="let module of selectModule" [value]="module.idModule">
      {{module.name}}
    </mat-option>
  </mat-select>
  

3. 补全剩余表单项的绑定关系 #

• 模板中两个下拉框、日期选择框未绑定对应的formControlName，补充绑定后才能正常纳入表单值收集范围：

  <!-- "Opcion"下拉框绑定options控件 -->
  <mat-select formControlName="options">
    <mat-option value="one">First option</mat-option>
    <mat-option value="two">Second option</mat-option>
  </mat-select>
  
  <!-- "Tipo de Incidencia"下拉框绑定incidentType控件 -->
  <mat-select formControlName="incidentType">
    <mat-option value="one">First option</mat-option>
    <mat-option value="two">Second option</mat-option>
  </mat-select>
  
  <!-- 日期选择框绑定closeDate控件 -->
  <input matInput [matDatepicker]="picker" formControlName="closeDate">
  

4. 通过服务动态加载下拉选项 #

• 替换本地缓存读取逻辑，在组件中注入业务服务，在初始化阶段调用接口拉取模块列表，赋值给下拉框的循环数组即可实现动态选项加载：

  // 构造函数中注入对应业务服务
  constructor(
    private fb: FormBuilder,
    private ticketService: TicketService,
    public dialogRef: MatDialogRef<IncidentRegistrationFormDialogComponent>,
    @Inject(MAT_DIALOG_DATA) private data
  ) {}
  
  ngOnInit(): void {
    // 原有表单初始化逻辑不变
    this.formGroup = this.fb.group({ /* ... */ });
    // 调用服务加载模块下拉选项
    this.ticketService.getModuleList().subscribe(res => {
      this.selectModule = res;
    })
  }
  

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