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

Question

我有 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 
  }

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

Answer 1

您需要改用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>

Answer 2

在处理表单中的项目数组时，您可能需要添加控件或删除控件，甚至编辑现有项目的值，始终使用角度 FormArray。

下面是 FormArray 的一个工作示例。这是一个工作 Stackblitz 更多关于FormArray

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormArray
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  dataForm: FormGroup;
  items: FormArray;
  dataArr: any;
  constructor(private formBuilder: FormBuilder) {

  }
  ngOnInit() {
    this.dataForm = this.formBuilder.group({
      items: this.formBuilder.array([])
    });
    setTimeout(() => {
      this.dataArr = [{
          key: 'First'
        },
        {
          key: 'Second'
        },
        {
          key: 'Third'
        },
        {
          key: 'Fourth'
        }
      ];
      this.createItems();
    }, 2000)
  }
  createItems() {
    this.items = this.dataForm.get('items') as FormArray;
    this.dataArr.forEach((elem: any) => {
      const ctrl = this.formBuilder.group({
        key: [elem.key]
      });
      this.items.push(ctrl);
    })
  }


  save() {
    console.log(this.dataForm.get('items').value)
    return this.dataForm.get('items').value;
  }

}

<form [formGroup]="dataForm">
  <div formArrayName="items" *ngFor="let item of dataForm.get('items').controls; let i = index;">
    <div [formGroupName]="i">
      <input type="text" placeholder="Key" formControlName="key" />
    </div>
  </div>
</form>

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

希望这会有所帮助。