Angular 17中如何向FormGroup动态添加Enum关联的FormControl？

问题背景 #

参考Matt Thornton的Angular实战教程，尝试在Angular 17中通过循环向已创建的FormGroup动态添加基于Enum的FormControl，遇到类型错误。

报错信息 #

Overload 1 of 2, '(this: FormGroup<{ [key: string]: AbstractControl<any, any>; }>, name: string, control: AbstractControl<any, any>, options?: { emitEvent?: boolean | undefined; } | undefined): void', gave the following error.
    The 'this' context of type 'FormGroup<{ roomName: FormControl<string | null>; location: FormControl<string | null>; }>' is not assignable to method's 'this' of type 'FormGroup<{ [key: string]: AbstractControl<any, any>; }>'.
      Type '{ [key: string]: AbstractControl<any, any>; }' is missing the following properties from type '{ roomName: FormControl<string | null>; location: FormControl<string | null>; }': roomName, location
  Overload 2 of 2, '(name: "roomName" | "location", control: FormControl<string | null>, options?: { emitEvent?: boolean | undefined; } | undefined): void', gave the following error.
    Argument of type '`layout${string}`' is not assignable to parameter of type "roomName" | "location". [plugin angular-compiler]

    src/app/admin/rooms/room-edit/room-edit.component.ts:37:20:
      37 │       this.roomForm.addControl(`layout${layout}`, new FormControl(

相关代码 #

room.ts #

export enum Layout {
    THEATER = 'Theater',
    USHAPE = 'U-Shape',
    BOARD = 'Board Meeting'
}

room-edit.component.ts #

import { Component, Input, OnInit } from '@angular/core';
import { Layout, LayoutCapacity, Room } from '../../../model/room';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-room-edit',
  templateUrl: './room-edit.component.html',
  styleUrl: './room-edit.component.css'
})
export class RoomEditComponent implements OnInit{

  @Input()
  room: Room;

  layouts = Object.keys(Layout);
  layoutEnum = Layout;
  layoutTypes: Array<string> = Object.keys(Layout).filter(key => isNaN(+key));

  roomForm = new FormGroup(
    {
      roomName : new FormControl('roomName'),
      location: new FormControl('location'),
    }
  );
  
  constructor() {
    this.room = new Room();
  }

  ngOnInit(): void {
    this.roomForm.patchValue({
      roomName:  this.room.name,
      location: this.room.location
    });

    for (const layout of this.layouts) {
      this.roomForm.addControl(`layout${layout}`, new FormControl(`layout${layout}`));
    }
  }

  onSubmit() {
    this.room.name = this.roomForm.controls['roomName'].value ?? '';
    this.room.location = this.roomForm.value['location'] ?? '';
    this.room.capacities = new Array<LayoutCapacity>();
    console.log(this.room);
  }

  getLayoutByKey(layoutKey: string): Layout {
    return this.layoutEnum[layoutKey as keyof typeof Layout];
  }

}

解决方案 #

1. 显式定义FormGroup的类型 #

TypeScript会自动推断初始FormGroup的类型为仅包含roomName和location的结构，导致动态添加控件时类型不兼容。手动定义包含固定字段和动态字段的类型：

// 在组件内导入FormControl后添加类型定义
type RoomFormType = {
  roomName: FormControl<string | null>;
  location: FormControl<string | null>;
} & {
  [key: `layout${string}`]: FormControl<string | null>;
};

2. 创建FormGroup时指定类型 #

修改roomForm的初始化代码，显式使用上面定义的类型：

roomForm = new FormGroup<RoomFormType>({
  roomName: new FormControl('roomName'),
  location: new FormControl('location'),
});

3. 修正循环数据源 #

Object.keys(Layout)会返回枚举的键和值（TypeScript枚举编译后是双向映射），导致循环时添加重复控件。改用已经过滤好的layoutTypes作为循环数据源：

for (const layout of this.layoutTypes) {
  this.roomForm.addControl(`layout${layout}`, new FormControl(`layout${layout}`));
}

完整修改后的组件核心代码 #

import { Component, Input, OnInit } from '@angular/core';
import { Layout, LayoutCapacity, Room } from '../../../model/room';
import { FormControl, FormGroup, Validators } from '@angular/forms';

// 新增FormGroup类型定义
type RoomFormType = {
  roomName: FormControl<string | null>;
  location: FormControl<string | null>;
} & {
  [key: `layout${string}`]: FormControl<string | null>;
};

@Component({
  selector: 'app-room-edit',
  templateUrl: './room-edit.component.html',
  styleUrl: './room-edit.component.css'
})
export class RoomEditComponent implements OnInit{

  @Input()
  room: Room;

  layouts = Object.keys(Layout);
  layoutEnum = Layout;
  layoutTypes: Array<string> = Object.keys(Layout).filter(key => isNaN(+key));

  // 显式指定FormGroup类型
  roomForm = new FormGroup<RoomFormType>({
    roomName : new FormControl('roomName'),
    location: new FormControl('location'),
  });
  
  constructor() {
    this.room = new Room();
  }

  ngOnInit(): void {
    this.roomForm.patchValue({
      roomName:  this.room.name,
      location: this.room.location
    });

    // 使用layoutTypes循环
    for (const layout of this.layoutTypes) {
      this.roomForm.addControl(`layout${layout}`, new FormControl(`layout${layout}`));
    }
  }

  // 其余代码保持不变
}

原理说明 #

通过显式定义RoomFormType，我们告诉TypeScript：这个FormGroup不仅有固定的roomName和location控件，还允许所有以layout开头的字符串作为键，对应的值是FormControl<string | null>。这样addControl方法就能识别动态添加的控件名称符合类型要求，解决类型不匹配的报错。同时用layoutTypes过滤掉枚举的数值键，避免生成重复的控件。

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