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.

132432142134

-----HTML-------

<ion-header>

  <ion-toolbar>

    <ion-title></ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

  <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> 

      <ion-item class="logininput">

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

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

    </ion-item>  

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

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

    </form>

  </div>

</ion-content>


home.page.ts

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';

@Component({

  selector: 'app-home',

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

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

})

export class HomePage implements OnInit {

  constructor(

    public menuCtrl: MenuController, 

    private auth: AuthenticationService,  

    private route: ActivatedRoute,

    private router: Router,

    ) {  

      if (this.auth.currentUserValue) { 

      this.router.navigate(['/dashboard']);

  }}

    loading = false;

    submitted = false;

    returnUrl: string;

    error = '';

    loginForm:FormGroup;

    button:any;

  show(){

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

    .subscribe(

        data => {

            this.router.navigate([this.returnUrl]);

        },

        error => {

            this.error = error;

            this.loading = false;

        });

    this.button = this.loginForm.value;

  }

   

    ionViewWillEnter() {

      this.menuCtrl.enable(false);

    }

  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.