Ionic2 FormBuilder not show ion-select selectedvalue on load page

Ionic Framework ionic-v3
1

Hi,
I went to develop update form,
so I must load values on init component:

Component:
ngOnInit(){
console.log(“init”);
this.selectedIntervention = this.navParams.data;
if(this.commonService.isEmptyObject(this.selectedIntervention)){
this.selectedClient = {}
this.selectedAdresse = {}
}
else{
this.selectedClient = this.selectedIntervention.int_client;
if(this.commonService.isEmptyObject(this.selectedClient)){
this.selectedAdresse = {}
this.adressesClient = []
}
else{

            this.selectedAdresse = this.selectedIntervention.int_client.c_adresse;
            this.getClientAdresse(this.selectedIntervention.int_client)
          }
        }

         //new
         if(this.commonService.isEmptyObject(this.selectedIntervention)){
         this.formIntervention = this.formBuild.group({
         int_client:[''],
         int_adresse:['']
         })
         }

         //update
         else{
         this.formIntervention = this.formBuild.group({
         int_client:this.selectedClient,
         int_adresse:this.selectedAdresse
         })
         }
        console.log("selectedClient exist? "+ this.commonService.stringfyJson(this.formIntervention.contains("int_client"))+" value "+ this.commonService.stringfyJson(this.formIntervention.value) )
        this.getAllClients()
      }

in log selectedClient is not empty, but it’s not showed on load page !

HTML:
<form [formGroup]="formIntervention"> <ion-item> <ion-label floating>Client</ion-label> <ion-select formControlName="int_client" [(ngModel)]="selectedClient" required cancelText="Annuler" okText="Selectionner"> <ion-option [value]="null" >Aucun</ion-option> <ion-option *ngFor="let client of listClients" [value]="client" >{{client.c_nom}}</ion-option> </ion-select> </ion-item> </form>

However a simple string work perfectly

2

Hi!!

<ion-option *ngFor="let client of listClients" [value]="client" >{{client.c_nom}}</ion-option>

i think you have initialized it with a object instance… some instance of a object will never be equal to another instance of the same object.
so the value of this.selectedClient will not be equal to the client of listClients…

to be more clear, in javascript with you have the situation bellow:
var a = { ‘number’: 100 }
var b = { ‘number’: 100 }
console.log(a === b) //false

it will print the result “false” on the console.
I hope I have helped you

3

I initialized with field of object (o1._id == o2._id) and I checked in interface {{o1._id == o2._id}} returned true in the right object

4

Yes it returned true because you have compared the attributes “_id” of the objects o1 and o2.

In your code you have ion-option [value]=“client” and ion-select [(ngModel)]="selectedClient"
So, what you actually doing is comparing the objects instance, not the attributes:
(client === selectedClient) // false

To this work, the selectedClient must be a reference of some object from the listClients
Ex:
selectedClient = listClients[1];

from there you if you do that you will get a true, and the ion-select will show the data on the page load
(client === selectedClient) // true

5

didn’t work, so I added some code to force it (I know that isn’t the best solution):

if(this.listClients.length != 0) {
            this.listClients.forEach((client, index) => {if(client.c_code_id == this.selectedClient.c_code_id){this.selectedClient = this.listClients[index]; }})
          }

It work!