Search code examples
angularionic-frameworkionic3ion-select

How to set default selected value of multiple options(ion-select)


I am trying to have certain pre-selected values in myion-select checkbox, but I was unable to find any answers. The values I want pre-selected have the value in my object as checked=true.

private totalPPE:any = [
    {id: 0,text:"Gloves",checked:true},
    {id: 1,text:"Glasses/Goggles/Face-Shield",checked:true},
    {id: 2,text:"Hard Hat",checked:true},
    {id: 3,text:"Hearing Protection",checked:false},
    {id: 4,text:"FR Attire",checked:true},
    {id: 5,text:"Steel Toe Boots",checked:true},
    {id: 6,text:"Fall Protection",checked:false},
    {id: 7,text:"H2S Monitor",checked:false},
    {id: 8,text:"Respiratory Protection",checked:false},
    {id: 9,text:"Other",checked:false}];
<ion-item>
    <ion-label>PPE REQUIRED FOR TASK</ion-label>
      <ion-select [(ngModel)]="totalPPE" name="ppe" multiple="true">
        <ion-option *ngFor="let ppe of totalPPE; let i = index" [selected]="ppe.checked=='true'" [value]=ppe.text>{{ppe.text}}</ion-option>
       </ion-select>
     </ion-item>

All of the resources I tried following unfortunately didn't work for me. I even tried the question, How to set default selected value of ion-option? , but unfortunately I found no solutions either.


Solution

  • So the issue was the object array. I don't believe Ionic can handle them so I changed the array to this:

    private totalPPE:any = ["Gloves",
                            "Glasses/Goggles/Face-Shield",
                            "Hard Hat",
                            "Hearing Protection",
                            "FR Attire",
                            "Steel Toe Boots",
                            "Fall Protection",
                            "H2S Monitor",
                            "Respiratory Protection",
                            "Other"];

    And added another array for default values:

    private defaultPPE:any = ["Gloves",
                              "Glasses/Goggles/Face-Shield",
                              "Hard Hat",
                              "FR Attire",
                              "Steel Toe Boots"];

    And changed my HTML:

    <ion-item>
       <ion-label class="ppe">PPE REQUIRED FOR TASK</ion-label>
           <ion-select [(ngModel)]="defaultPPE" name="ppe" multiple="true">
             <ion-option *ngFor="let ppe of totalPPE" value={{ppe}} >{{ppe}}</ion-option>
           </ion-select>
    </ion-item>