如何从 Typescript 上的 FormGroup 中动态重复的表单中获取值？答案

【问题标题】：How to get values from dynamically repeated forms in FormGroup on Typescript?如何从 Typescript 上的 FormGroup 中动态重复的表单中获取值？
【发布时间】：2018-07-18 00:47:55
【问题描述】：

感谢您阅读我的问题！

我正在使用 Ionic 3 创建应用程序。在这个应用程序中，有一个页面最多包含 200 个相等的表单，每个表单都有一个输入，如下所示：ionic page with repeated forms。是我输入了“input3”、“input4”等来表示输入空格的位置。

用户在配置模式上选择页面上有多少个表单，所以我不能静态地创建这些表单。因此，我设法使用以下代码在 HTML 上创建了这些表单：

      <form>
      <ion-row *ngFor="let y of rowCount|times" text-center align-items-center>
          <ion-col align-self-center col-2>{{y}}</ion-col>
          <ion-col text-center align-self-center col-4><ion-input id='input{{y}}' 
            formControlName="input{{y}}" [(ngModel)]="inputy"></ion-input></ion-col>
          <ion-col align-self-center col-4>{{status}}</ion-col>
          <ion-col align-self-center col-2><button
            id= 'button{{y}}' ion-button small icon-only>
            <ion-icon name="brush"></ion-icon></button></ion-col>
      </ion-row>
    </form>

我使用了一个名为times 的Custom Pipe 来重复行的次数与变量rowCount 相等的次数相同。

我设法动态获取每个表单的id、formControlName 和ngModel，但仅在 HTML 上。

如何在 Typescript 代码中获取每个动态创建的 formControlName 的值？另外，是否可以从动态创建的ngModel 中获取值？

【问题讨论】：

标签： javascript forms typescript ionic2

【解决方案1】：

您正在混合反应式表单（例如formControlName）和模板驱动表单（例如ngModel）。我建议在进一步阅读之前通读 Angular 文档。

如果您选择响应式表单，则需要使用 formArray，因为它们正是为此而设计的。 ngFor 将索引公开给模板，而您的 formControlName 将只是索引。

您可以在 ts 中使用 patchValue 和 setValue 设置响应式表单的值。

我并不是建议你应该使用响应式而不是模板驱动，只是你不应该混合使用它们。如果您对模板驱动更满意，那完全没问题。文档介绍了每种方法的优缺点。

祝你好运！

【讨论】：

感谢亚当波特！我设法使它工作。当一切都按我想要的方式工作时，我将在这里上传我的代码以展示我是如何做到的。此外，@Usman 在这篇文章中的回答也对我有很大帮助：When to use FormGroup vs. FormArray?。

【解决方案2】：

好吧，我成功地做了我想做的事。

在home.ts上，我在FormGroup里面创建了FormArray，如下图：

  this.homeForm = new FormGroup({
  bicos: new FormArray([])
  });

然后，在您的重复/添加函数中，您使用以下代码：

 addForm(){
 (<FormArray>this.homeForm.controls['bicos'])
 .push(new FormControl(null));
 }

而且，在 home.html 上，重要的部分如下所示：

 <form [formGroup]="homeForm"> 
 <ion-row formArrayName="bicos" *ngFor="let item of 
 homeForm.controls.bicos.controls; let i = index" >
 <ion-col text-center align-self-center col-5>
 <ion-input #inputs formControlName="{{i}}" type="number"></ion-input>
 </ion-col>
 </ion-row>
 </form>

正如我在上面的评论中所说，您还可以找到一种方法here。

【讨论】：