Utilizing ng-multiselect-dropdown within my bootstrap modal allows users to choose multiple products. Each time an item is selected (onItemSelect), a new div is inserted using the jQuery method insertAfter(). This new div displays the quantity of the selected product by generating a unique id starting with 'p' combined with the product id (idProduto). This approach enables me to remove the div onItemDeselect and retrieve the inputted value using the val() method in jQuery.
The issue arises when attempting to fetch the field value, as it returns an empty string.
Snippet from the onItemSelect method:
onItemSelect(item: any){
if (item){
this.itemCompra = item;
$('<div id="p'+this.itemCompra.idProduto+'" class="form-group"><label for="exampleFormControlInput1">Quantidade de '+this.itemCompra.nome+'</label><input id="p'+this.itemCompra.idProduto+'" class="form-control" formControlName="quantidade" type="number" min="1" [(ngModel)]="compra.quantidade'+this.itemCompra.idProduto+'" [ngClass]="{ '+!this.inv+' : submitted && f.quantidade.errors }"><div *ngIf="submitted && f.quantidade.errors" class="invalid-feedback"><div *ngIf="f.quantidade.errors.required">Escolha a quantidade</div></div></div>').insertAfter('#bodyCompra form>div:last');
this.cont++;
}
}
I am attempting to fetch the value for use in another function. The snippet below shows how I am trying to retrieve the value within a loop:
while(i<this.compra.ps.length){
console.log($('#p'+this.compra.ps[i]["idProduto"]).val());
//this.compra.ps[i]["quantidade"]=$('#p'+this.compra.ps[i]["idProduto"]).val();
i++;
}
this.compra.ps represents an array obtained from my template utilizing [(ngModel)].