Angular display own datas for each dynamic arrayForm

Question

I have a dynamics ng-select and input through an arrayForm.

HTML:

<ng-container formArrayName="bottles">
      <div class="col">
        <div class="productContainer">
          <ng-container *ngFor="let bottle of getBottles.controls; let i=index">
            <div [formGroup]="bottle" style="display: flex">
              <label for="alias-{{ i }}">Produit:</label>
              <ng-select id="productInput" (change)='selectTest($event, i)'
                         [items]="test[0] | keyvalue" bindLabel="value.name" bindValue="value.quantity" formControlName="product"></ng-select>
              <label for="bottleQuantity">Bottles needed: </label>
              <input *ngFor="let bott of bottles" style="height: 26px" id="bottleQuantity" type="bottleQuantity" formControlName="bottleQuantity"/><div for="alias-{{ i }}" style="color: green" *ngIf="itemSelected">(Qty: {{itemSelected}})</div>
              <span class="material-icons" style="cursor:pointer; color: red" *ngIf="getBottles.controls.length > 1" type="button addClass" (click)="removeBottle(i)">delete</span>
            </div>
          </ng-container>
          <span class="material-icons" style="cursor:pointer; color: green" (click)="addBottlesInput()">add_circle</span>
        </div>
      </div>
    </ng-container>

What i'd like is to display the own quantity of bottles for each dynamic field using index. But i don't know how to perform this using index (or an easier way ? )

<div for="alias-{{ i }}" style="color: green" *ngIf="itemSelected">(Qty: {{itemSelected}})</div>

See an example here StackBliz

Thank you for help :)

your index is always 1. Check and correct your structure. Seems like a design problem — Panagiotis Bougioukos
– Panagiotis Bougioukos, Commented Apr 15, 2022 at 16:47
What do you want Qty to show? The total available number of bottles for the product? That is, if you select bottle1, then Qty should show 5? — Meqwz
– Meqwz, Commented Apr 15, 2022 at 18:20

Yong Shun · Accepted Answer · 2022-04-16 01:26:56Z

1

As you want to show the quantity for the selected product per row:

Need an array to store the selected product.

public itemsSelected: any[] = [];

When a new row is added, you need to add the empty object into itemsSelected array.

public addBottlesInput = () => {
  ...

  this.itemsSelected.push({});
};

When selecting a product for each row, you need to update the object in itemsSelected by index.

public selectTest = (event, i) => {
  if (event) {
    event.index = i;
    console.log('SELECTED', event);
    this.itemsSelected[i] = event.value;
  } else {
    this.itemsSelected[i] = {};
  }
};

Lastly, in HTML, you need to get the object from itemsSelected by index. Use ?. (optional chaining) to safe get the quantity, especially for the case when the product is deselected.

<div style="color: green">
    (Qty: {{ itemsSelected[i]?.quantity }})
</div>

Or

<div style="color: green" *ngIf="itemsSelected[i]">
    (Qty: {{ itemsSelected[i].quantity }})
</div>

Sample Demo on StackBlitz

answered Apr 16, 2022 at 1:26

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LinebakeR Over a year ago

Works fine, that’s i what i wanted to do, thk you a lot ! :)

Collectives™ on Stack Overflow

Angular display own datas for each dynamic arrayForm

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related