如何从打字稿上的表单组中动态重复的表单中获取值?

Question

感谢您阅读我的问题！

我正在使用Ionic 3创建一个应用程序。在这个应用程序中，有一个页面，最多有 200 个相等的形式，每个表格都有一个输入，如下所示：具有重复形式的离子页面。是我输入了"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中获取值？

Answer 1

你正在混合反应式形式(例如。formControlName)和模板驱动的表单(例如。ngModel)。我建议在继续之前通读有关这些内容的 Angular 文档。

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

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

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

祝你好运！

Answer 2

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

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

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

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

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

而且，在家里.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>

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