Hi,
I have a form on an Ionic4 app done with Form Builder.
In this form, I have a multi-select field: “favouriteSports”.
When I open the edit view of this form the field doesn’t show the selected values:
but if I click on the select I can see that the values are selected, they just don’t appear when the form is opened.
This is how I have defined the field in the form:
favouriteSports: [this.userProfile.favouriteSports || '',
Validators.compose([
Validators.required,
])],
favouriteSports: [
{ type: 'required', message: 'This field is required.' }
],
This is the html:
<!-- FAVOURITE SPORTS -->
<ion-item>
<ion-label color="dark" position="stacked">{{ 'Favourite sports' | translate }}</ion-label>
<ion-select multiple="true"
formControlName="favouriteSports"
cancelText="Cancel"
okText="OK"
class="ion-no-padding smalltext">
<ion-select-option text-wrap *ngFor="let item of eventSportOptions" [value]="item.name">{{item.value}}</ion-select-option>
</ion-select>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of validationMessages.favouriteSports">
<div class="error-message"
*ngIf="profileForm.get('favouriteSports').hasError(validation.type) &&
(profileForm.get('favouriteSports').dirty || profileForm.get('favouriteSports').touched)">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message | translate }}
</div>
</ng-container>
</div>
Why the chosen options are not shown if they are selected?
If I open and close the select without change anything, the values appear selected.
Thank you
Claudio