Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 3 - ion-select(multiple) disable all options after selecting two items

I want to disable all options once two options checked. I have tried (ionChange) but this event fired after clicking the "Ok" button of the select model. Is there any other event which execute before "ionChange"?

disable

 <ion-item>
     <ion-label>Values</ion-label>
     <ion-select formControlName="Values" multiple="true">
          <ion-option value="1">1 value</ion-option>
          <ion-option value="2">2 value</ion-option>
          <ion-option value="3">3 value</ion-option>
          <ion-option value="4">4 value</ion-option>
         <ion-option value="5">5 value</ion-option>
    </ion-select>
 </ion-item>
like image 808
shah Avatar asked Nov 23 '17 17:11

shah


People also ask

How do I select multiple options in ion-select?

By adding the multiple="true" attribute to ion-select, users are able to select multiple options. When multiple options can be selected, the alert overlay presents users with a checkbox styled list of options. The ion-select multiple="true" component's value receives an array of all the selected option values.

Should I use a select component with Ionic?

If you have used a select component with Ionic before you might have noticed a general lack of options and functions that you need. Lucky us there’s a component that offers most of what we need right out of the box and is super easy to integrate!

What is the ion-select component?

The ion-select component is similar to an HTML <select> element, however, Ionic's select component makes it easier for users to sort through and select the preferred option or options. When users tap the select component, a dialog will appear with all of the options in a large, easy to select list for users.

How does ion-select multiple="true'component work?

The ion-select multiple="true" component's value receives an array of all the selected option values. In the example below, because each option is not given a value, then it'll use its text as the value instead.


2 Answers

Below code will satisfy your requirement. Change the check box limit to increase or decrease the number of options that can be selection. Tips to optimization is also welcomed.

Working demo

component file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  selectedIng : Array<any>=[];
  numberOfChecks : number=1;
  checkBoxLimit : any =1;
  constructor(public navCtrl: NavController) {
    this.pizzaIng=[
      {name : "Pepperoni", checked : false},
      {name : "Sasuage", checked : true},
      {name : "Mushrooms", checked : false}
    ];
    this.selectedIng=[{name : "Sasuage", checked : true}];    
  }

  updateIng(ing){
      if(ing.checked === true){
      this.selectedIng.push(ing);
      this.numberOfChecks++;
      }else{
        this.selectedIng=this.pizzaIng.filter((ingr)=>{
          console.log(ingr['checked'])
          return ingr['checked']===true;
        })
        this.numberOfChecks--;
      }

    console.log(this.selectedIng);
    console.log(this.numberOfChecks);
  }
}

HTML file

  <ion-list>
  <ion-item  *ngFor="let ing of pizzaIng; let i = index">
    <ion-label>{{ing.name}}</ion-label>
    <ion-checkbox [(ngModel)]="ing.checked"  [disabled]="ing.checked==false && numberOfChecks>=checkBoxLimit"  (ionChange)="updateIng(ing)"></ion-checkbox>
  </ion-item>
</ion-list>
like image 129
Prithivi Raj Avatar answered Oct 10 '22 22:10

Prithivi Raj


Use [disabled] property in on-change function You can perform disable action and other functionality using the selected value

like image 36
Mebin Xtapps Avatar answered Oct 10 '22 23:10

Mebin Xtapps