Login page shows error in ios when user name and password are auto filled by the browser

I have login form in my page. In iOS it prompts me if it want to populate the the user name and password from saved passwords. Later when I click login, It shows by validation that is done for empty fields. This will be the case only when either of the fields are never in focus. Once both the fields gets focus atleast once, I can login . What might be the issue?

My html code is as below

        <ion-item>
            <ion-label class="color-code">Email</ion-label>
            <ion-input autocomplete="on" autofocus="" tabindex="1" type="email" name="email" [(ngModel)]='userName'></ion-input>
        </ion-item>
        <p text-right no-lines>
            <a class="anchorColor" (click)="forgotEmail()">Forgotten email</a>
        </p>

        <ion-item>
            <ion-label class="color-code">Password</ion-label>
            <ion-input autocomplete="on" type="password" [(ngModel)]='password' name="password" (keyup.enter)="login()"></ion-input>
        </ion-item>
        <p text-right no-lines>
            <a class="anchorColor" (click)="forgotPassword()">Forgotten password</a>
        </p>
    </div>
    <div padding class="sign">
        <button ion-button color="bmapink" class="textTransform shadow" block (click)="login()">Sign in</button>
    </div>

.ts code is as below

login() {
      if (this.userName != "" && this.password != "" && this.userName != null && this.password != null) {

else {
        this.utilFunctions.presentToast(AppSettings.EMPTY_CREDENTIALS);
      }
    } 

ionic info

Ionic:

ionic (Ionic CLI) : 4.3.1 (C:\Users\kishore\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.3, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 2.0.3, (and 15 other plugins)

System:

Android SDK Tools : 26.1.1 (C:\Users\kishore\AppData\Local\Android\Sdk)
NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

1 Like

yes it does nt support autofill as you are developing it for mobiles i also face this same issue … it considers autofill data as null

1 Like

I came across this problem. This Stack Overflow solution got the autofill working.