如何从angular中的动态生成中获取表单控件值

<form>
  <div *ngFor="let control of controls">
    <label>{{ control.label }}</label>
    <input [name]="control.name" [type]="control.type" [(ngModel)]="control.value">
  </div>
</form>

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  controls = [
    { label: '姓名', name: 'name', type: 'text', value: '' },
    { label: '年龄', name: 'age', type: 'number', value: 0 },
    { label: '性别', name: 'gender', type: 'radio', value: 'male' }
  ];
  
  getFormData() {
    const formData = {};
    for (const control of this.controls) {
      formData[control.name] = control.value;
    }
    console.log(formData);
  }
}

<button (click)="getFormData()">获取表单数据</button>