Problem on using <ion-select>

Ionic Framework ionic-v3
1

I got an ion-select with different levels, and when I choose one, it shows on the ion-select below the Sub-levels that the level got. When the user changes the level, it needs to restart my data.subLevelId, because if it stays with data, the button to confirm the Register will be valid to use, and when I make this reset on my variable data.subLevelId, all my components bug. Someone know how to fix this? Fallow an example of code below.

 // .html
  <form [formGroup]="register">   
     <ion-list>  
        <ion-item>
                    <ion-label fixed>Level</ion-label>
                    <ion-select name="level" formControlName="level" [(ngModel)]="data.levelId"  (ionChange)="getSubLevel()">
                    <ion-option *ngFor="let level of levels" value="{{level.level_id}}">{{level.description}}</ion-option>
                    </ion-select>
        </ion-item>
        <ion-item>
                    <ion-label fixed>Sub level</ion-label>
                    <ion-select name="subLevel" formControlName="subLevel" [(ngModel)]="data.subLevelId">
                    <ion-option *ngFor="let subLevel of subLevels" value="{{subLevel.subLevel_id}}" >{{subLevel.subLevel_description}}</ion-option>
                    </ion-select>
        </ion-item>
     </ion-list> 
      <...>
  </form>  

  // .ts

  public getSubLevel() {   
    this.data.subLevelId = null;
    this.loadSubLevel();
  }

Before
image
After
image

2

How are you using the (ionChange) event?

No screenshots of code please.

3

Sorry, It was my first post, I edited. And yes, I’m using (ionChange). Do you have a solution? I think it is an Ionic problem.

4

I still having this problem.

5

This is a rare case where you have to trigger change detection manually. Inject a ChangeDetectorRef in your constructor, and call it’s detectChanges() method at the end of getSubLevel().

6

@HugoPetla, you are trying to do a cascading selection, right? Have a look at this demo.

7

Nice demo, it is exactly what I’m saying. Take a look, if you choose for example “Brazil” and then “Navegantes”, the button submit becomes true, but if I change the country to “Chile”, the submit still valid to press it, and the idea is to the button become invalid, until you put the two values on the selects.

8

@HugoPetla, no problem! Check the demo again. I’ve added one extra line of code to reset a port each time a country is selected. It now makes Submit button disabled as the port field is no longer set (valid).

1 Like