Login page autofill problem (input fields)

Hello, im facing a strange issue.
I have saved my credentials in Chrome. Now, if im visit the login page the username and password is filled automaticly.

Problem is, that the ion-label is only a minus -. The texte “username” is missing but comes back if i click into the field or anywhere else on the page… also the login dont work if the minus is there. I need to click the login button twice.









  <div class="logincont">

    <form [formGroup]="loginForm">

    <ion-item class="logininput">

        <ion-label position="floating">Benutzername</ion-label>

      <ion-input [formControl]="loginForm.controls.username"></ion-input>


      <ion-item class="logininput">

        <ion-label position="floating">Passwort</ion-label>

      <ion-input type="password" [formControl]="loginForm.controls.password"></ion-input>


    <ion-button class="button Login" expand="full" (click)=show(); >Login</ion-button>

    <ion-button [routerLink]="['/registration']" expand="block" color="danger">Register</ion-button>





import { Component, OnInit } from '@angular/core';

import {  MenuController } from '@ionic/angular';

import { FormControl, FormGroup} from '@angular/forms';

import { AuthenticationService} from '../auth/auth.service';

import { first } from 'rxjs/operators';

import { Router, ActivatedRoute } from '@angular/router';


  selector: 'app-home',

  templateUrl: './home.page.html',

  styleUrls: ['./home.page.scss'],


export class HomePage implements OnInit {


    public menuCtrl: MenuController, 

    private auth: AuthenticationService,  

    private route: ActivatedRoute,

    private router: Router,

    ) {  

      if (this.auth.currentUserValue) { 



    loading = false;

    submitted = false;

    returnUrl: string;

    error = '';




    this.auth.login(this.loginForm.controls.username.value , this.loginForm.controls.password.value).pipe(first())


        data => {



        error => {

            this.error = error;

            this.loading = false;


    this.button = this.loginForm.value;



    ionViewWillEnter() {



  ngOnInit() {

    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/profile';

    this.loginForm =  new FormGroup({

      username: new FormControl(''),

      password: new FormControl(''),





This is because you having floating as the label position. Try fixed or stacked.

1 Like

Ahh ohh! :slight_smile: Thank you! That fixed the design. but i dont know why the first api call has empty values.