如何在Angular中提交动态创建的表单

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

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

  ngOnInit() {
    this.dynamicForm = new FormGroup({});
  }
}

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div *ngFor="let field of fields">
    <label>{{ field.label }}</label>
    <input [formControlName]="field.name" [type]="field.type">
  </div>
  <button type="submit">提交</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;
  fields = [
    { label: '姓名', name: 'name', type: 'text' },
    { label: '年龄', name: 'age', type: 'number' },
    { label: '性别', name: 'gender', type: 'text' }
  ];

  ngOnInit() {
    const formGroup = {};
    for (const field of this.fields) {
      formGroup[field.name] = new FormControl('', Validators.required);
    }
    this.dynamicForm = new FormGroup(formGroup);
  }

  onSubmit() {
    if (this.dynamicForm.valid) {
      const formData = this.dynamicForm.value;
      // 提交表单数据到后端服务器或执行其他逻辑操作
    }
  }
}