CODEWITHSUNDEEP
angularangular5
user9289559
user9289559

Reputation:

How to enable particular input fields with Angular 5

enter image description here this is a sample of cart page generated from html code with Angular 5

 <div *ngFor="let cart of carts; let i=index" class="panel" 
    id="product-panel">

  //some other lines

 <div class="panel-foot col-xs-12">    
        <div class="col-md-8 btns-group">
          <button   type="button" class="btn btn-default col-md-3 col-xs-12">
            <i class="fa fa-trash-o"></i> Remove</button>
          <button  type="button" class="btn btn-primary col-md-3 col-xs-12">
            <i class="fa fa-shopping-cart"></i> checkout</button>
          <button (click)="edit(i)" type="button" class="btn btn-success col-md-3 col-xs-12">
            <i class="fa fa-refresh"></i> Edit</button>
        </div>

        <div class="col-md-4">
            <div class=" qty  col-xs-12">  

              <input [disabled]="!disable" id="qty-number" type="number" value="{{quantity}}" class="float-right col-md-3 col-xs-8 ">
               <div class="float-right plus-minus">
                 <div class="plus" (click)="plus()">
                   <i class="fa fa-plus"></i>
                 </div>

                 <div class="minus" (click)="minus()">
                   <i class="fa fa-minus"></i>
                 </div>
               </div>

             </div>
        </div>

      </div>
</div>

By default qty1&qty2 are disabled i want when the user click on edit inn the first product just qty1 is enable and so one. I have tried many methods but all qty are enabled

How i can do this?

Upvotes: 0

Views: 331

Answers (1)

Jonathan Hamel
Jonathan Hamel

Reputation: 1393

Moving my comment to an actual answer to add a piece of code. The variable disabled and variable quantity is currently shared among all your carts. To avoid this, you'll have to define your cart class as such 

export class Cart {
    quantity: number;
    qtyDisabled: boolean;
    // other fields

    constructor() {
        this.quantity = 15;
        this.qtyDisabled = true;
    }
}

and use it in your template like so

<div *ngFor="let cart of carts">

    <button (click)="edit(cart)"> Edit </button>
    <input [disabled]="cart.qtyDisabled" [(ngModel)]="cart.quantity" />
</div>

This way, each instance of your cart will have its own disabled and value attribute. I also suggest you to use the NgModel two way binding https://angular.io/api/forms/NgModel within your angular template to bind input value change to your cart model.

Upvotes: 2

Related Questions