I have two drop downs. Both using ion-select-option to show the list.
HTML Part:
<form [formGroup]="sampleFormGroup">
<ion-row class="form-group">
<ion-col>
listToBeUpdated:
</ion-col>
<ion-col>
<ion-select class="form-control myCustomSelect" formControlName="listToBeUpdated" *ngIf="sampleList">
<ion-select-option *ngFor="let sampleListItem of sampleList" [value]="sampleListItem">{{sampleListItem}}</ion-select-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row class="form-group">
<ion-col>
listOnWhichItDepends:
</ion-col>
<ion-col>
<ion-select interface="popover" class="form-control myCustomSelect" formControlName="listOnWhichItDepends">
<ion-select-option *ngFor="let dummyListItem of dummyList" [value]="dummyListItem">{{dummyListItem}}</ion-select-option>
</ion-select>
</ion-col>
</ion-row>
</form>
Component Part:
sampleFormGroup: FormGroup;
sampleList: Array<number>;
dummyList: Array<number>;
constructor(private navCtrl: NavController, private fb: FormBuilder) {}
ngOnInit() {
this.sampleList = new Array<number>();
this.dummyList = new Array<number>(10, 20, 30, 40);
for(let i = 0 ; i < 10 ; i++){
this.sampleList.push(i);
}
this.sampleFormGroup = this.fb.group({
listToBeUpdated: [this.sampleList[0], [Validators.required]],
listOnWhichItDepends: [this.dummyList[0], [Validators.required]]
});
this.formControlUpdated();
}
formControlUpdated() {
this.sampleFormGroup.controls['listOnWhichItDepends'].valueChanges.subscribe(listOnWhichItDependsUpdated => {
this.sampleList = new Array<number>();
for (let i = 0 ; i < listOnWhichItDependsUpdated ; i++) {
this.sampleList.push(i);
}
this.setListToBeUpdated = this.sampleList;
});
}
Expected Behavior: if “listOnWhichItDepends” changes the list shown on UI “listToBeUpdated” should be updated.
Encountered Behavior with Ionic 4 : Selected “listOnWhichItDepends” to be 10. The “sampleList” should show only 10 on the UI as list. But it now showing the previous list and not updating when the array updates.
On Ionic 3 (ion-options) it is working fine. But giving issue when ion-select-option is used.
Please have a look into this issue.
Thanks in Advance.