如何在Angular中动态添加表单元素和获取数据？

在Angular中动态添加表单元素和获取数据可以通过以下步骤实现：

创建一个表单组件：首先，创建一个Angular组件来承载表单元素。可以使用Angular的表单模块来简化表单处理。在组件的HTML模板中，使用Angular的表单指令（如formGroup、formControlName）来建立表单控件和绑定数据。
创建表单控件：在组件的Typescript文件中，使用FormBuilder来创建表单控件。可以使用group方法来创建一个表单控件组，并使用control方法来创建单个表单控件。可以根据需要设置表单控件的验证规则。
动态添加表单元素：使用FormArray来动态添加表单元素。FormArray是一个可变长度的表单控件数组，可以通过push方法向其中添加新的表单控件。
获取表单数据：可以通过订阅表单的值变化来获取表单数据。在组件的Typescript文件中，可以使用valueChanges方法来监听表单值的变化，并在回调函数中获取最新的表单数据。

下面是一个示例代码：

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

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      formArray: this.formBuilder.array([])
    });
  }

  get formArray() {
    return this.myForm.get('formArray') as FormArray;
  }

  addFormControl() {
    const formControl = this.formBuilder.control('');
    this.formArray.push(formControl);
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

在上述代码中，myForm是一个包含一个formArray的表单组。addFormControl方法用于动态添加表单控件到formArray中。onSubmit方法用于获取表单数据并打印到控制台。

在组件的HTML模板中，可以使用*ngFor指令来遍历formArray中的表单控件，并使用formControlName指令来绑定表单控件的值。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="formArray">
    <div *ngFor="let control of formArray.controls; let i = index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
  <button type="button" (click)="addFormControl()">Add Control</button>
  <button type="submit">Submit</button>
</form>

这样，就可以在Angular中动态添加表单元素并获取数据了。