CODEWITHSUNDEEP
angularionic-frameworkionic3
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to enable the button when the user selects the value in the select box In Ionic

I am working on the Ionic Ecommerce app and I am showing products with the size but the problem is that, I want to restrict user to select the product size and then move the product to the cart but I am not able to do that.

This is my productdetails.html:

<ion-header>

  <ion-navbar>
    <ion-title>Products</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-row align-items-center class="mynewr11">
 <ion-col *ngFor="let product of this.pdeta" col-5 class="mynewcol22">
  <img class="myimg11" src="{{product.image}}" />
  <p>{{ product.product_name }}</p>

<ion-col *ngIf="nosize" style="padding: 0px;">
<ion-select placeholder="Select Size" [(ngModel)]="product.SelectedSize">
  <ion-option *ngFor="let psize of product.product_size" value="{{psize.size}}">{{psize.size}}</ion-option>
</ion-select>
</ion-col>

  <button [disabled]="!isenabled" class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>

</ion-row>
</ion-content>

In the productdetails.ts: 

isenabled: boolean = false;

In this html, I am showing the product size and the AddToCart button. I want the user to select the size first and then move the product to the cart. I have disabled the button initially and it will enable when the user selects the size but the problem is that I am not able to apply the select value logic. Any help is much appreciated.

Upvotes: 0

Views: 815

Answers (1)

Nicol&#225;s Longhi
Nicol&#225;s Longhi

Reputation: 306

you could listen to the change event on the ion-select and if the selected value is accepted you change the isenabled value:

valueChanged(event) {
  isenabled = true;
}
<ion-select (ionChange)="valueChanged($event)">

Another alternative is to bind [enabled] to the value of selectedSize:

<button [disabled]="!product.SelectedSize" class="mybtn11" (click)="addToCart(product)" ion-button small>
    Add to Cart
  </button>

Upvotes: 1

Related Questions