Typescript 如何用不同的键值初始化角react 形式

我们需要创建一个formGroup，然后使用addControl添加每个具有键名和formgroup的控件.请找到下面的工作示例，让我知道如果有任何疑问！

import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

export interface PatchForm {
  [x: string]: FormControl<string | null>;
  date: FormControl<string | null>;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="patchForm">
      <div formGroupName="keysToChange">
        <div *ngFor="let item of iterKeys; let i = index" [formGroupName]="item">
          <input type="text" formControlName="id" id="id" name="id"/>
          <input type="date" formControlName="date" id="date" name="date"/>
        </div>
      </div>
    </form>
    {{patchForm.value | json}}
  `,
})
export class App {
  keysToChange = ['key1', 'key2', 'key3', 'key4'];
  name = 'Angular';
  fb = inject(FormBuilder);
  iterKeys: Array<string> = [];

  patchForm = this.fb.group({
    keysToChange: this.fb.group({}),
  });

  ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.keysToChange.forEach((key) => {
      const formGroup = this.fb.nonNullable.group({
        id: new FormControl(''),
        date: new FormControl(''),
      });
      this.patchForm.controls.keysToChange.addControl(key, formGroup);
    });
    this.iterKeys = Object.keys(this.patchForm.controls.keysToChange.controls);
  }
}

bootstrapApplication(App);

Stackblitz Demo