Question

感谢您阅读我的问题！

我正在使用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>

我使用名为Custom Pipe的{{1}}来重复行，因为变量times等于。

我设法动态获取每个表单的rowCount，id和formControlName，但仅适用于HTML 。

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

中获取值

Answer 1

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

如果您选择被动表单，则需要使用formArray，因为它们就是这样的。 ngFor将索引公开给模板，而您的formControlName只是索引。

您可以使用来自ts的patchValue和setValue来设置被动表单的值。

我并不是说你应该使用被动而不是模板驱动，只是你不应该混合它们。如果你对模板驱动感觉更舒服，那就完全没问题了。文档介绍了每个文档的优缺点。

祝你好运！

Answer 2

好吧，我设法做了我想做的事。

在home.ts上，我在FormArray内创建了FormGroup，如下所示：

  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。

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

2 个答案: