How to display data using ngFor without creating a separate div for the input value

Question

For invoice form how to display input value for each product object without creating a separate div of each?

ngModel works but since I want to display the selected product price on the input value it is creating the separate div of each product.

<div class="uk-column-1-4" >
    <div>
        <select class="uk-select uk-margin-top">
        <option *ngFor="let productDetail of product">{{ productDetail.productName }}</option>
        </select>
    </div>
    <div>
            <input class="uk-input uk-margin-top" type="number" name="quantity" min="1" max="10" value="productDetail.qty" />
    </div>
    <div *ngFor="let productDetail of product"> 
    <input class="uk-input uk-margin-top" id="price" name="price" type="number" [(ngModel)]="productDetail.price" /><span>₹</span>
</div>
<div>

</div>
    </div>

I want to display the price of the selected product name on the input field itself without generating the separate field.

Sorry, your question isn't clear. Could you elaborate more on which div you are talking about? Maybe try even including a stackblitz.. — Nicholas K
In the code there is a input field with the name as price, I am using *ngFor for looping on the product object but it is creating the seperate input field for each product selected which I don't want I want to display the selected product price on the same input field without creating new one. How this can done? — divya dave
Do you mean like {{productDetail.price}} below the <input>? — Nicholas K
Input is used to accept data from the user. Why exactly are you using an input tag here? — Nicholas K

Mr-K10 Mr-K10 · Accepted Answer · 2019-07-06T19:01:35

You can ngModel on the select which will get you the selected product and then make a function to change the index(j) of the selected product, which can be set to bind the input field with that selected product.

<div class="uk-column-1-4" >
    <div>
        <select (change)="onChange($event.target.value)" name="selectedOption" class="uk-select uk-margin-top">
        <option *ngFor="let productDetail of product; let i = index" [value]="i">{{ productDetail.productName }}</option>
        </select>
    </div>
    <div>
            <input class="uk-input uk-margin-top" type="number" name="quantity" min="1" max="10" value="productDetail.qty" />
    </div>
    
    <input class="uk-input uk-margin-top" id="price" name="price" type="number" [(ngModel)]=" [(ngModel)]="product.length==0?tempPrice:product[j]['price']" /><span>₹</span>

<div>

</div>
    </div>

Here is the updated stackblitz

The error was that when product array is empty, the product[j] i.e product[0] was undefined and I solved it by creating a temp variable(tempPrice) for binding the input when the product is empty.

Hope this helps :) comment for further assistance.

How to display data using ngFor without creating a separate div for the input value

1 Answers