patchValue возвращает только значения последнего индекса

Question

У меня проблема при циклическом просмотре и массиве, я правильно получаю весь индекс из этого массива, но когда я использую angular patchValue , он обновляет все входные данные с последними значениями индекса, а не с соответствующими значениями, как показано:

Я хочу, чтобы у каждого входа были свои, например, первые значения ввода должны быть «1» (левый вход => longueur) и «1» (правый ввод => количество)

Я пытался с .forEach , но безуспешно

ОБРАЗЕЦ КОДА

component.ts .forEach

  ngOnInit() {
    this.requiredFields();
    this.service.checkExistQuot().subscribe(res => {
          this.quotDetails.forEach( (myArray, index) => {
              this.dropForm.patchValue({
                longueur: this.quotDetails[index].longueur,
                quantity: this.quotDetails[index].quantity
              })
             console.log(index);
          });
    });
  }

HTML, пример ввода

<div class="products">
  <div class="d-flex flex-row" *ngFor="let products of selectedDiam;let i = index">
      <input class="number" formControlName="longueur" value="" (change)="postQuotationDatas(products.part_id)" type="number">
    </a>
    <input class="mb-1 flex1 checkbox" type="checkbox">
    <a class="tac flex1"></a>
    <a class="flex1 mb-1">
      <input class="number" value=""  formControlName="quantity" (change)="postQuotationDatas(products.part_id)" type="number">
    </a>
    <a class="flex1"></a>
  </div>
</div>

Answer 1

Ваша проблема в том, что у вас есть только одна группа форм, dropForm, с двумя элементами управления: quantity и longueur. Даже если у вас есть несколько html входов для longueur и quantity, они имеют одинаковую ссылку в компоненте

Итак, с вашим forEach l oop вы на самом деле исправляете все ваши элементы управления для каждой итерации. Вот почему у вас одинаковое значение для всех ваших элементов управления, то есть значение для последнего объекта, который перебрал l oop.

Опция # 1

Возможное решение состоит в том, чтобы иметь несколько формировать группы, как в этом примере stackblitz

component.ts

//dropForms initialisation
this.quotationDetails.map(() =>
{

let group = this.formBuilder.group(
  {
    longueur: [''],
    quantity: [''],
  });
  this.dropForms.push(group)
}

this.quotationDetails.forEach( (myArray, index) => {
        this.dropForms[index].patchValue({
          longueur: this.quotationDetails[index].longueur,

component. html

<div class="d-flex flex-row" *ngFor="let products of quotationDetails; let index=index"> 
    <form [formGroup]="dropForms[index]"> <!-- 1 form group per quotation -->

Опция # 2

Другое решение, чтобы иметь только 1 formGroup, состоит в том, чтобы дать динамические c управляющие имена

component.ts

//Initialisation of dropForm
this.quotationDetails.forEach((val, index)=>
{
  group[`longueur_${index}`] = '';
  group[`quantity_${index}`] = ''
});
this.dropForm = this.formBuilder.group(
  group
)       

//Patch
this.quotationDetails.forEach( (myArray, index) => {
    let patchValue = {};
    patchValue[`longueur_${index}`] = this.quotationDetails[index].longueur;
    patchValue[`quantity_${index}`] = this.quotationDetails[index].quantity;
    this.dropForm.patchValue(patchValue);

компонент. html

<form [formGroup]="dropForm">
    <div class="products">
    <div class="d-flex flex-row" *ngFor="let products of quotationDetails; let index = index">
    <a>
      <input class="number"  formControlName="longueur_{{index}}"  value="" type="number">

Пример Stackblitz

Answer 2

Пример добавления FormControl к FormArray с помощью FormBuilder:

FormArray - FormArray объединяет значения каждого дочернего FormControl в массив.

в компонентах ts :

const EMPLOYEE_FORM = {
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  isActive : [false, Validators.required]
}

const COMPANY_FORM = {
  employees: new FormArray([], [Validators.required])
}

export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group(COMPANY_FORM);
  }

  get employees(): FormArray {
    return this.form.get('employees') as FormArray;
  }

  addEmployee() {
    const employee = this.fb.group(EMPLOYEE_FORM);
    this.employees.push(employee);
  }
}

в html

<div *ngFor="let item of employees.controls; let i = index;">
  <form [formGroup]="item">
    <input type="text"  formControlName="firstName" class="form-control" placeholder="FirstName">
    <input type="text"  formControlName="lastName" class="form-control" placeholder="LastName">
    <input class="checkbox" type="checkbox" formControlName="isActive">
  </form>
</div>
<button (click)="addEmployee()">add new employee</button>
<div *ngIf="employees.length > 0">
  {{employees.value | json}}
</div>

См. Ссылку: https://stackblitz.com/edit/add-input-to-formarray-with-frombuilder

Answer 3

Используйте FormArray и переносите входы в массивы.