How to prevent from [(NgModel)] that's being applied to all other input fields?

user_17117278 0
Viewed 105

I'm a little bit confused about what to use other than [(ngModel)]. As you can below the code snippet and images provided, ngModel binding is being applied to all other input fields when I click on the Edit button because of *NgFor. Could you guys please recommend me some suggestions?

click here to see image

Below is cart component template.

<div class="container my-5">
    <h1>Your Cart</h1>
       <div *ngFor="let item of listAlbums" class="container">
            <div class="row">
                <div class="col-md-4">
                    <h6>Item name: {{item.title}}</h6>
                    <img src="{{item.thumbnailUrl}}">
                    <input class="form-control" type="number" value="{{item.quantity}}">
                    <button (click)="remove(item)" class="btn btn-danger mx-3">X</button>
                    <button (click)="edit(item)" class="btn btn-warning">Edit</button>
                    <input type="text" placeholder="{{item.title}}" [(ngModel)]="newTitle" [hidden]="!hideEdit">
                </div>
            </div>
</div>

  
Below is the cart component.

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
  listAlbums:Album[]=[]
  hideEdit:boolean=false
  newTitle:string;
  constructor(private productService:ProductService) {
   }

  ngOnInit() {
    this.productService.itemList.subscribe(data=>
      {this.listAlbums = data })
  }
  remove(item:Album) {
    this.productService.removeItem(item)
  }
  edit(item:Album) {
    this.hideEdit = !this.hideEdit
    this.productService.editItem(item, this.newTitle)
  }
}

angular typescript html javascript
2 Answers

You can just create an array and bind it to ngModel

<div class="container my-5">
    <h1>Your Cart</h1>
       <div *ngFor="let item of listAlbums; let i = index" class="container">
            <div class="row">
                <div class="col-md-4">
                    <h6>Item name: {{item.title}}</h6>
                    <img src="{{item.thumbnailUrl}}">
                    <input class="form-control" type="number" value="{{item.quantity}}">
                    <button (click)="remove(item)" class="btn btn-danger mx-3">X</button>
                    <button (click)="edit(item)" class="btn btn-warning">Edit</button>
                    <input type="text" placeholder="{{item.title}}" [(ngModel)]="newTitle[i]" [hidden]="!hideEdit">
                </div>
            </div>
</div>

newTitle = Array(listAlbums.length); // it will create an array of specific length.

This way you can bind all the inputs to specific array instance separately.

user_171654390

If you want the user to edit the title of individual items in cart, then bind to that item's title directly instead of updating the same string(newTitle) for all. Use [(ngModel)] = "item.title" in

<input type="text" placeholder="{{item.title}}" [(ngModel)]="item.title" [hidden]="!hideEdit">
user_171823350
Related