如何使用来自http请求的数组将动态输入字段添加到angular表单

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {}

  ngOnInit(): void {
    this.dynamicForm = this.fb.group({
      fields: this.fb.array([])
    });

    // 模拟HTTP请求获取字段数组
    this.http.get<any[]>('/api/fields').subscribe(fields => {
      this.addFields(fields);
    });
  }

  get fields() {
    return this.dynamicForm.get('fields') as FormArray;
  }

  addFields(fields: any[]): void {
    fields.forEach(field => {
      const fieldGroup = this.fb.group({
        name: [field.name, Validators.required],
        value: ['', Validators.required]
      });
      this.fields.push(fieldGroup);
    });
  }

  onSubmit(): void {
    if (this.dynamicForm.valid) {
      console.log(this.dynamicForm.value);
      // 处理表单提交
    }
  }
}

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div formArrayName="fields">
    <div *ngFor="let field of fields.controls; let i = index" [formGroupName]="i">
      <input formControlName="name" placeholder="Field Name">
      <input formControlName="value" placeholder="Field Value">
    </div>
  </div>
  <button type="submit">Submit</button>
</form>