Hi, I am evaluating Ionic 4 Angular 7 for a project and am trying to use Ion-select to set/edit a measurement type in Miles or Kilometers. It is set from a Typescript Enum ‘DistanceMeasure’ and comes from the server in the user profile data.
When it first displays, the select always shows the placeholder ‘Please select’ rather than the current value, which I am pretty sure is set but happy to be shown if I’m wrong.
The html is like this:
<form [formGroup]="businessUserDetailsForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col width-25>
<ion-item>
<ion-label position="floating">Max Travel Distance</ion-label>
<ion-input type="text" formControlName="MaxTravelDistance"></ion-input>
</ion-item>
</ion-col>
<ion-col width-25>
<ion-item>
<ion-label position="floating">in:</ion-label>
<ion-select placeholder="Please Select" formControlName="DistanceMeasure" value = {{userdata.BusinessUser.DistanceMeasure}}>
<ion-select-option value=0>Miles</ion-select-option>
<ion-select-option value=1>Kilometers</ion-select-option>
<!-- <ion-select-option *ngFor="let k of distkeys; let i= index" value ={{i}} >
{{ k }}
</ion-select-option> -->
</ion-select>
</ion-item>
</ion-col>
</ion-row>
<ion-button expand="full" type="submit">Submit</ion-button>
</form>
In the Ion-select line, I have also tried 'value =0, and value =“0” as I’m not certain of the format there…
The commented out line shows how I intend to make it work using the enum, but I have commented it out to avoid confusion and the simple case shown does just the same.
The page code is like this:
ngOnInit() {
// This is the business USER form
this.businessUserDetailsForm = this.formBuilder.group({
Id: [],
Business: [],
MaxTravelDistance: [],
DistanceMeasure: [],
... more stuff
});
this.userService.getUserStore().then((user: UserData) => {
console.log('have set the user');
this.userdata = user;
this.businessUserDetailsForm.patchValue(user.BusinessUser);
this.distmeasure = DistanceMeasure[user.BusinessUser.DistanceMeasure];
});
}
This Ionic documentation says that you should set the value in the select line to display it but it doesn’t. It always shows the placeholder. What am I missing? Can anyone shed any light?
Many thanks.