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

问题描述 投票:0回答:1

在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>

题 :

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

提交按钮事件: -

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

应该有一种方法来创建带有id的文本框,同时按表格Array中的项目

angular angular5 angular6 angular-reactive-forms angular-forms
1个回答
0
投票

您必须在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)

  }
}

在用户界面一侧,绑定textbox字段上的productName。看下面的代码示例:

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

我希望这能解决你的问题。请参阅stackblitz上的工作代码示例

© www.soinside.com 2019 - 2024. All rights reserved.