Angular 6:How can we update multiple input field values by checking check boxes?

Question

I have a project and i am getting data from API call. Data is dynamically fetched from the database and displayed on the view.

Now in that , i have check boxes and an input field on every values fetched, I have a button updateALL , what i want is that value i insert in input field should be updated by clicking updateAll button whose checkbox is checked.

And to check all check boxes, and update the input field values as well.

Something like this

 <div *ngFor="let product of products"> <input type="submit" value="Update All"><br> <input type="checkbox" name="vehicle1" value="Bike"> <input type="text"> <input type="submit" value="update"> </div> 

Something like this

How can i bind both checkbox value and input field value together, so that i can update value? I have data from api in json format like

[{id:'1', price:'20',title:'bag'},{id:'2', price:'10',title:'shirt'}]

I want to update only price by entering price in input field as well as checking checkbox. How can i bind both the values?

I want something like this, check box and changed input values must be fetched from the view, than on button update all i can update the selected values.

And i also want that if i check-select all check boxes, the checked check boxes and there corresponding input field values should be updated as well by clicking update all button.

Answer 1

To achieve expected result, use below option of using ngModel, click and change events to update products array of objects

1. Add ngModel to input and checkbox fields with click event to update price

 <input type="submit" value="Update All" (click)="updatePriceAll()"> <div *ngFor="let product of products;"> <br> <input type="checkbox" name="vehicle1" value="Bike" (change)= "updatePrice(product, vehicle[product.id])" [(ngModel)]="vehicle[product.id]"> <input type="text" [(ngModel)]="newPrice[product.id]"> <input type="submit" value="update" (click) ="updatePrice(product, true)"> </div> 

2. Use change event on checkbox and flag to check checked condition
3. In component.ts, created updatePrice and updatePriceAll methods to update on checking, clicking update,updateaLL buttons

newPrice= {}; vehicle = {}; products= [{id:'1', price:'20',title:'bag'},{id:'2', price:'10',title:'shirt'}]

updatePrice(val, flag){ if(flag){ this.products = this.products.map(v => { if(v.id === val.id){
v.price = this.newPrice[v.id]; } return v }) } console.log(this.newPrice[val.id]); }

updatePriceAll(){ this.products = this.products.map(v => { if(this.newPrice[v.id]){
v.price = this.newPrice[v.id]; } return v }) console.log(this.newPrice); }

working code sample - https://stackblitz.com/edit/angular-gtnkor?file=src/app/app.component.html