Angular Reactive формы - динамически создавайте поля ввода и получайте заполненные поля с идентификатором - PullRequest
Новая
       28

Angular Reactive формы - динамически создавайте поля ввода и получайте заполненные поля с идентификатором

0 голосов
/ 08 октября 2018

в 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.

должен быть способ создания текстового поля с идентификатором при нажатии элемента в виде массива

1 Ответ

0 голосов
/ 08 октября 2018

Вы должны создать поля productId и productName (FormControl) в FormGroup.На стороне пользовательского интерфейса только связывайте поле 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

...