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.
-----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(''),
});
}
}