Angular Reactive forms - 动态创建输入字段并使用 id 获取填充输入

Question

在 Angular Reactive 表单中 - 我有这样 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>

问题：

我如何在提交按钮上获得 3 个文本框 更新值，他们的 id？

提交按钮事件：-

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上的工作代码示例