Hi everyone,
I am currently experiencing some trouble with an ion-input in a form.
The input field only shows the first character entered, until it looses focus or the expected number of characters has been entered. The same goes for deleting characters in it. The behaviour is shown in the gif below:
This was recorded on an iPhone SE but the problem also occurs on iPhone 5s, 6, 6s and 7. Not on Android nor in the browser!
The relevant code parts look as follows:
html:
<ion-content padding class="enter-code">
<div class="shadowBox">
<ion-card>
<ion-card-header>
Please enter your code
</ion-card-header>
<ion-card-content>
<form [formGroup]="qrForm" (ngSubmit)="proceed()">
<ion-list class="spacer">
<ion-item class="enablelastline">
<ion-input type="number" formControlName="qr" placeholder="Code"></ion-input>
<ion-icon color="danger" [hidden]="qrForm.controls['qr'].valid || qrForm.controls['qr'].errors['required']" name="close-circle" item-right></ion-icon>
</ion-item>
</ion-list>
<button ion-button full color="light" large type="submit" [disabled]="!qrForm.valid">Next</button>
</form>
</ion-card-content>
</ion-card>
</div>
</ion-content>
typescript:
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {NavController, AlertController } from 'ionic-angular';
import {NextPage} from './next';
@Component({
selector: 'enter-code',
templateUrl: 'code.html'
})
export class EnterCodePage {
public qrForm: FormGroup;
public submitted: boolean; // keep track on whether form is submitted
public events: any[] = []; // use later to display form changes
private validCodes: Array<String> = ['123456789', '987654321'];
constructor(private navCtrl: NavController, private alertCtrl: AlertController, private formBuilder: FormBuilder) {
this.qrForm = formBuilder.group({
qr: ['', Validators.compose([Validators.minLength(9), Validators.maxLength(9), Validators.required])]
});
}
proceed() {
if (this.validCodes.indexOf(this.qrForm.value.qr) > -1) {
this.submitted = true; // set form submit to true
this.navCtrl.push(NextPage, {
qr: this.qrForm.value.qr
});
} else {
this.alertCtrl.create({
title: 'Your code is invalid.',
subTitle: 'Your code is invalid. Please try again!',
buttons: ['OK']
}).present();
}
}
}
It is probably a mistake on my side but as much as I try, I cannot find it at this point. I use several forms in my app and all the other inputs work fine.
I’d appreciate any help here! Thanks in advance!