In ionic 3 how to disable ionic 3 select option when data is null?

Ionic Framework ionic-v3
1

Friends,

in ionic 3 how to disable ionic select option when data is null, on the template html page to avoid null popup … My template code is

 <label> District</label>
                             <ion-item>
                               <ion-label>District</ion-label>
                               <ion-select formControlName="singleSelect" [(ngModel)]="data.singleSelect">
                                   <ion-option *ngFor="let dis of district" value= {{dis.intDistrictId}} class="color">
                                       {{dis.chvNameEng}}
                                     </ion-option>
                               </ion-select>
                           </ion-item>

Thanks

Anes

2

Hi@anespa
Try *ngIf array.length

<ion-item *ngIf="district.length">
      <ion-label>District</ion-label>
           <ion-select formControlName="singleSelect" [(ngModel)]="data.singleSelect">
              <ion-option *ngFor="let dis of district" value= {{dis.intDistrictId}} class="color">
                      {{dis.chvNameEng}}
               </ion-option>
          </ion-select>
</ion-item> 
``
3

Hi, @anespa

Try this:

<label> District</label>
<ion-item *ngIf="district?.length > 0">
	<ion-label>District</ion-label>
	<ion-select formControlName="singleSelect" [(ngModel)]="data.singleSelect">
		<ion-option *ngFor="let dis of district" value= {{dis.intDistrictId}} class="color">
			{{dis.chvNameEng}}
		</ion-option>
	</ion-select>
</ion-item>

Thanks.

4

I set a boolean variable and based on it works as below

<label> District</label>
                              <ion-item>
                                <ion-label>District</ion-label>
                                <ion-select formControlName="singleSelect" [(ngModel)]="data.singleSelect" [disabled]="!connectivityFlag">
                                    <ion-option *ngFor="let dis of district" value= {{dis.intDistrictId}} class="color">
                                        {{dis.chvNameEng}}
                                      </ion-option>
                                </ion-select>
                            </ion-item>

Thanks

Anes

5

@anespa Ya thats fine.But no need to use an additional variable for this purpose :slightly_smiling_face:

6

There is already one variable for it. I just reuse it …

1 Like