在 Angular 中构建动态 FormBuilder

Question

我创建了一个带有动态输入的 Angular 项目，我单击一个按钮然后创建新输入，我想使用 FormBuilder 获取数据但我不知道如何执行此操作。

我知道如何在 static 案例中使用 FormBuilder，但我没有找到任何动态资源。

实现该目标应遵循哪些步骤？

Answer 1

您如何向现有表单组添加新输入？ 例如，您可以使用表单 arrays 来执行此操作，基本上您可以通过访问以下方式从中获取价值： formGroup.get("formArray").value -> 您将通过一个获得所有输入值射击。

Answer 2

我不太确定这是否是你的意思，但如果你想在每次用户单击按钮时添加新输入并获取值，那么你可以试试这个。 扩展@ZsoltB 回答工作stackblitz 链接

@Component({
  ...all the decorator things
})
export class AppComponent {
  formArray = new FormArray([
    new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
    }),
  ]);
  name = 'angular';

  addNewInput = () => {
    this.formArray.push(
      new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl(''),
      })
    );
  };
}

Answer 3

我通过使用以下代码并受到以下代码的启发解决了这个问题：

angular 中的动态表单，在运行时添加字段

非常感谢你