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个文本框，其中包含其值及其更新的值？

提交按钮事件：-

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

应该存在一种在以Array形式推送项目时用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)

  }
}

在用户界面侧，在文本框字段上绑定productName。参见下面的代码示例：

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

我希望这可以解决您的问题。请参见stackblitz

上的工作代码示例

Angular反应形式-动态创建输入字段并获取ID为填充的输入

1 个答案: