ion-select is not showing selected value with reactive forms-CodePudding

When i use formcontrolname on an ion-select element, the selected value is not shown from the beginning. It only appears when i click the select element, or if I use setTimeout():

html:

<form [formGroup]="formGroup">
            <ion-row>
                <ion-col>
                    <ion-select okText="{{ 'common.ok' | translate }}"
                                cancelText="{{ 'common.close' | translate }}"
                                interface="action-sheet"
                                formControlName="absenceTypeId">
                        <ion-select-option *ngFor="let absenceType of absenceTypes" value="{{absenceType.id}}">{{absenceType.name}}</ion-select-option>
                    </ion-select>
                </ion-col>
            </ion-row>
        </form>

typescript:

@Input() absenceTypeId: string;

formGroup = this.formBuilder.group({
    id: [null],
    absenceTypeId: [null, Validators.required],
    beginDate: [null, Validators.required],
    endDate: [null]
});


ngOnInit() {
            this.formGroup.patchValue({
                absenceTypeId: this.absenceTypeId
            });
}

Is this a bug, or should the formgroup be changed in another event than ngOnInit()?

CodePudding user response：

In the OnInit you should use the FormBuilder to initialize your form.

this.formGroup = this.formBuilder.group({ absenceTypeId: this. absenceTypeId });

Where the formBuilder it's injected into your constructor. You can keep the current implementation but first you should initialize your form. In your constructor you should have something like previous example:

this.formGroup = this.formBuilder.group({ absenceTypeId: this. absenceTypeId });

And then you can keep your code from OnInit.

EDIT:

You can check this example https://stackblitz.com/edit/ionic-angular-v5-gmwmrw?file=src/app/app.component.ts.

As you can see, if you're putting a different value than the rest of the values from ion-select when you patch your form, you'll not have a default value displayed. So, check if your input absenceTypeId it's a value from your absenceTypes. Additional, add a compareWith function because you're iterating over objects.

CodePudding user response：

So the issue seems to have been, that the patchValue was happening before all the items for the select were loaded. In plain Angular this was never an issue, because the control was updated / rerendered even when the items were loaded after the selected value was defined. For Ionic I was able to solve this by awaiting the items and only after that do the patchValue:

absenceTypes$ = new ReplaySubject<AbsenceTypeModel[]>(1);

ngOnInit() {
    this.absenceTypes$
        .subscribe(() => {
            if (this.absenceTypeId) {
                this.formGroup.patchValue({
                    absenceTypeId: this.absenceTypeId
                });
            }
        });

    this.absenceTypeService.getAll()
        .subscribe(absenceTypes => this.absenceTypes$.next(absenceTypes));
}

I'm not sure if this is the intended behaviour of ionic but it will definitely make development a bit more complicated.

EDIT: Also you should use [value] instead of value for non string bindings. Otherwise it will compare string to non-string which will not be equal:

<ion-select-option [value]="absenceType.id">