Inside the form I have this:
<ion-item>
<ion-select formControlName="title" required item-start>
<ion-option value="1">Mr.</ion-option>
<ion-option value="2">Mrs.</ion-option>
</ion-select>
<ion-label floating>{{'full-name' | translate}}</ion-label>
<ion-input formControlName="fullName" type="text" required></ion-input>
<img src="assets/imgs/icon_user.png" class="icon_user" item-end />
</ion-item>
But it doesn’t show the dropdown when I clicked it. But if I remove this (i.e. ion-input
) control then I can see the dropdown. i.e. <ion-input formControlName="fullName" type="text" required></ion-input>
Note:
I can see both controls on the form like so.
.ts
initForm() {
this.signUpForm = this.formBuilder.group({
title: ['1', Validators.required],
fullName: ['', Validators.required],
});
}
This is not working on mobile view. You can change that on the browser and set it as galaxy s5
. After setting the device viewport you need to refresh the browser. i.e. f5
. Do you know why this behavior?