Angular 响应式表单 - 动态创建输入字段并使用 id 获取填充输入

Question

在 Angular 响应式表单中 - 我有这样的数组 3 项：

productList = [{
  productId : "104",
  productName : computer
},
{
  productId : "105",
  productName : sprots
},
{
  productId : "106",
  productName : location
}]

像这样声明表单组：

this.productFormGroup = this.formBuilder.group({
      productFormArray: new FormArray([], CustomValidators.minNumberInputFieldRequired(1)),
    });

像这样创建输入字段：

productList.forEach((element) => {
        productFormArray.push(new FormControl('', [Validators.pattern(ValidationPatterns.required)]));
      });

像这样绑定 :

<div *ngFor="let item of formControls; let i = index">
    <input type="text" [formControlName]="i" class="form-control">
</div>

问题:

如何在提交按钮上使用它们的 ID 获取 3 个文本框更新值？

提交按钮事件：-

if (this.productFormGroup.invalid) {
  return;
}
this.productFormGroup.value.productFormArray ? - it is return only update value, not Id.

应该有方法在推送表单数组中的项目时创建带有 id 的文本框

Answer 1

您必须在 FormGroup 中创建 productId 和 productName 字段 (FormControl)。在用户界面端，仅将 productName 字段绑定为文本框，因为 productId 用于您的内部参考。请参阅以下代码示例： app.component.ts

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';
  productList = [{
    productId : "104",
    productName : "computer"
  },
  {
    productId : "105",
    productName : "sprots"
  },
  {
    productId : "106",
    productName : "location"
  }];

  constructor(public formBuilder:FormBuilder){

  }

productFormGroup :FormArray
  ngOnInit() {
        this.productFormGroup = this.formBuilder.array([])
        this.productList.forEach(product=>{
              this.productFormGroup.push(this.formBuilder.group({
                productId:[product.productId],
                productName:[product.productName]
              }))
        })
  }

  onSubmit(){
  console.log(this.productFormGroup.value)
    
  }
}

在用户界面端，将产品名称绑定到文本框字段。请参阅下面的代码示例：

<div [formGroup]="product" *ngFor="let product of productFormGroup.controls">
    <input formControlName="productName" type="text" />
</div>
{{productFormGroup.value | json}}

希望这能解决您的问题。请参阅 stackblitz

上的工作代码示例

Angular 响应式表单 - 动态创建输入字段并使用 id 获取填充输入

Angular Reactive forms - Create input fields dynamically and get fill inputs with id

angular

angular5

angular6

angular-reactive-forms

angular-forms