Angular Get dynamic created inputs values

Question

I am creating some inputs based on the value of another input, my problem is I don't know how to get the value of these new inputs that are generated.

This is my View Part:

<div class="input-group">
    <div class="input-group-append">
        <button class="btn btn-secondary" (click)="minusInv()" type="button">
            <i class="fa fa-minus">
            </i>
        </button>
    </div>
        <input formControlName="inventario" [value]="quantityInv">
    <div class="input-group-append">
        <button class="btn btn-secondary" (click)="plusInv()" type="button">
            <i class="fa fa-plus">
            </i>
        </button>
    </div>
</div>

        <ng-container *ngFor="let values of valuesArr; let i= index">
                <div class="form-group" style="float:left; margin: 5px;">
                    <input 
                    placeholder="{{values}}.-" 
                    style="background-color: #e6e9ed;" class="form-control"
                    type="text">
                </div>
        </ng-container>

And in my controller part, functions plusInv and minusInv fills the inventarioArr which is just a number array that determinates the number of inputs that will be generated, and I don't know how to get the values of these inputs.

Controller:

    plusInv()
    {
        this.quantityInv++;
        this.formGroup.controls['inventario'].patchValue(this.quantityInv)
        //this.formGroup.controls['ninos'].updateValueAndValidity();
    }
    minusInv()
    {
      if(this.quantityInv>1)
      {
      this.quantityInv--;

      }
      else
      {this.quantityInv}
      this.formGroup.controls['inventario'].patchValue(this.quantityInv)
    }

How can I get the value of my dynamic inputs?

brunoj · Accepted Answer · 2022-03-03 21:18:25Z

4

You create input without any formControl attached to it. In this example i would try to use FormArray where you can push and remove FormControls, than you can get the value of the formControl you want based on its index. There is good article about FormArray on angular-university: https://blog.angular-university.io/angular-form-array/

answered Mar 3, 2022 at 21:18

brunoj

663 bronze badges

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

1 Comment

Arturo Martinez Over a year ago

this article was very useful and it solved my issue ! thanks

Collectives™ on Stack Overflow

Angular Get dynamic created inputs values

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