Как включить кнопку, когда пользователь выбирает значение в поле выбора In Ionic

Question

Я работаю над приложением Ionic Ecommerce и показываю продукты с размером, но проблема в том, что я хочу ограничить пользователя в выборе размера продукта, а затем переместить продукт в корзину, но я не могу сделатьчто.

Это мой 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>

В productdetails.ts :

isenabled: boolean = false;

В этом html я показываю размер продукта и кнопку AddToCart.Я хочу, чтобы пользователь сначала выбрал размер, а затем переместил товар в корзину.Сначала я отключил кнопку, и она будет активирована, когда пользователь выбирает размер, но проблема в том, что я не могу применить логику выбора значения.Любая помощь очень ценится.

Answer 1

вы можете прослушать событие изменения на ion-select, и если выбранное значение будет принято, вы измените значение isenabled:

valueChanged(event) {
  isenabled = true;
}

<ion-select (ionChange)="valueChanged($event)">

Другой альтернативой является привязка [enabled] к значению selectedSize:

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