How to enable particular input fields with Angular 5

Question

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?

you seem to share the disable variable for both inputs. Try having this disable variable as an attribute of your cart. Same goes with the quantity variable as your value. Otherwise, both quantity and disable fields will be the shared for all carts. Then you'll be able to do <input [disabled]="!cart.qtyDisabled" value="{{cart.quantity}}" /> — Jonathan Hamel
– Jonathan Hamel, Commented Feb 5, 2018 at 16:38

Jonathan Hamel · Accepted Answer · 2018-02-05 17:57:24Z

2

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.

edited Feb 5, 2018 at 17:57

answered Feb 5, 2018 at 16:51

Jonathan Hamel

1,38313 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to enable particular input fields with Angular 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related