My goal is to achieve the following:
https://i.sstatic.net/TQeKN.png
In my form, I have 2 fields: description and price. When the plus button is clicked, additional input fields (Input 2 and Price 2) are generated dynamically. I want to bind these fields to an array of objects.
additionsOfProductArray: Array<NewProductAddition>=[];
class NewProductAddition{
additionDescription:string;
additionPrice:number;
}
This is what I've tried that's not working:
<div class="row mt-5"
*ngFor="let currentNumber of numberOfTimesAdditionArray | slice:0:numberOfTimesAdditions;let i = index">
<div class="col-8">
<input type="text" class="form-control" name="additionDescription" placeholder="Enter Description"
[(ngModel)]="additionsOfProductArray[i].additionDescription">
</div>
<div class="col-4 ">
<div class=" ml-5 input-group-prepend">
<span class="input-group-text">€</span>
<input type="number" class="form-control col-xs-3 priceinput" min="1" step="any" name="articlePrice"
[(ngModel)]="additionsOfProductArray[i].additionPrice">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
Button Click
<div class="col-2">
<button (click)="increaseTheAdditionNumber()">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
increaseTheAdditionNumber(){
this.numberOfTimesAdditionArray=[];
this.numberOfTimesAdditionArray= [...Array(++this.numberOfTimesAdditions).keys()] ;
}
numberOfTimesAdditionArray=[...Array(this.numberOfTimesAdditions).keys()];
numberOfTimesAdditions=1;
Any help or suggestions would be greatly appreciated.