时间戳

首页 > 解决方案 > 如何获取具有相同表单控件名称的列表的值？

angular - 如何获取具有相同表单控件名称的列表的值？

问题描述

我有 4 个使用 loop 生成的输入。我正在为 UI 使用角度形式，但问题是我只得到最后一个输入值，并且要求我需要所有输入值，前提是我无法生成 formControlName 动态。有没有办法绕过只获取最后一个值并获取所有值？

相同的 HTML 代码是（此循环将根据 dataArr 执行，这里假设它执行 4 次）：

<form [formGroup]="dataForm">
   <div *ngFor = "let data of dataArr;">

    <input type="text" placeholder="Key" value={{data.key}} formControlName="key"/>

   </div>
</form>

<button type="button" style="background-color: #4980FF;" (click)="save();">Save</button>

.ts 文件中的代码：

  // it is initializing and registering the form value
  dataForm = new FormGroup({
    key: new FormControl('', [Validators.required])

  });

  save(){
   // Here I am trying to print the form value 
  }

当我单击保存按钮时，我希望获取所有值，而不仅仅是最后一个值。

标签： angulartypescriptangular7angular-forms

解决方案

您需要FormArray改用

在您的组件中，创建您的FormGroup和FormArray.

this.dataForm = new FormGroup({
    key: new FormArray(this.dataArr.map(data => new FormControl(data.key, [Validators.required])))
    // Add other form groups or form controls here
});

save() {
    console.log(this.dataForm.value);
}

将这些控件绑定在您form喜欢的下方。您不需要value属性，因为FormControl它将为您绑定值。

<form [formGroup]="dataForm">
    <div *ngFor="let data of dataArr; let i = index" formArrayName="key">
        <input type="text" placeholder="Key" [formControlName]="i" />
    </div>
</form>

<button type="button" style="background-color: #4980FF;" (click)="save();">Save</button>

推荐阅读