How to get the values of dynamically created input fields before submitting in Angular/Ionic?

Ionic Framework Ionic Angular
1

I would like to get the values of dynamically created input fields before submitting in Angular/Ionic before submitting but I don’t find the way. My final goal is to do a sum of these values.

My html:

<ion-slides (ionSlideDidChange)="slideChanged()">
  <ion-slide *ngFor="let custo of (customers | async)">
    <div class="slide"> 
      <ion-item *ngFor="let stuff of (ordereditems | async)"> 
        <ion-label position="floating" color="primary"> Paid amount</ion-label>    
        <ion-input type="text" formControlName="amount_{{custo.pe_id}}"></ion-input>            
      </ion-item>           
    </div>
  </ion-slide>
</ion-slides>

My ts:

this.customers.subscribe((value) =>
{
  for (let c of value) 
  { 
    console.log(this.validations_form.controls[`amount_${c.pe_id}`]);
  }
});

Thanks for reading so far & Please help :slight_smile:

2

I think that this would be easier if you used formControl instead of formControlName, but a much larger problem is that you have an unused loop variable stuff, which is a very strong indication that you are going to end up with a bunch of unwanted inputs aliased to the same backing property.

3

Hi @rapropos, thanks for replying.
To present you my issue I cleaned a little bit my code to focus on my issue of getting back the values of dynamically created input fields.
To make it lighter, I removed the parts about stuff that is looping on order items that are well defined in the ts & well displayed in my full html.
Apart of that, I don’t understand your suggestion about using formControl in place of formControlName? Can you please advise?
regards

4

HTML is a difficult-to-read way to demonstrate the main point I’m trying to make, so imagine this pseudocode:

for (i = 0; i < 10; ++i) {
  for (j = 0; j < 10; ++j) {
    mogrify(i);
  }
}

Without knowing anything else, I would guess with about 99% confidence that this code has a major bug, to the point where if it really was what was intended, there should be a comment explaining why it’s written that way.

Why? Because there is no reference whatsoever to j inside the inner loop. mogrify(i, j) would make sense. mogrify(i) does not.

This is the exact same situation you have in your template, because stuff is never referenced in your inner loop.

I don’t like formControlName in general, but the only time I would use it is if it’s a clean constant, not a complex expression involving interpolation. If you’re looping across a bunch of FormControls, I would just bind [formControl] to a loop variable.