I had the password input working perfectly until I added the verification. Now the input only becomes active when the password is toggled to visible.
Please advise. I am still learning.
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
login: FormGroup;
showPassword: boolean;
showPin: boolean;
showConfirm: boolean;
// countries;
constructor(private fb: FormBuilder) {
this.login = this.fb.group({
password: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(8),
Validators.maxLength(20),
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}$')
])),
email: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(6),
Validators.maxLength(20),
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])),
});
}
formSubmit(login) {
console.log('test: ', login);
}
togglePasswordText() {
this.showPassword = !this.showPassword;
}
toggleConfirmText() {
this.showConfirm = !this.showConfirm;
}
ngOnInit() {
}
}
And the html
<div class="color-top">
<div class="logo-top"><img src="assets/bb-logo-400.png" /></div>
</div>
<div class="spacer"></div>
<h4 class="ion-text-center">Welcome back</h4>
<!-- <p class="info-text ion-text-center ion-no-padding">Enter the 4 digit pin you received in your email</p> -->
<ion-list>
<form [formGroup]="login" (ngSubmit)="formSubmit(login)">
<!-- email -->
<ion-item>
<p *ngIf="login.controls.email.invalid && login.controls.email.dirty" class="alert-msg">
You need to enter a valid email
</p>
<ion-label position="floating">Email</ion-label>
<ion-input formControlName="email" name="email" type="email"></ion-input>
</ion-item>
<!-- password -->
<ion-item *ngIf="showPassword">
<p *ngIf="login.controls.password.invalid && login.controls.password.dirty" class="alert-msg">
Your password is incorrect. Please try again.
</p>
<ion-label position="floating">Password</ion-label>
<ion-input type="text" *ngIf="!showPasswordText" formControlName="password"></ion-input>
<ion-icon slot="end" color="primary" name="eye" (click)="togglePasswordText()"></ion-icon>
</ion-item>
<ion-item *ngIf="!showPassword">
<ion-label position="floating">Password</ion-label>
<ion-input type="password" *ngIf="!showPasswordText" formControlName="password"></ion-input>
<ion-icon slot="end" color="medium" name="eye-off" (click)="togglePasswordText()"></ion-icon>
</ion-item>
</form>
</ion-list>
<ion-button expand="full" shape="round" color="primary" type="submit" [disabled]="!login.valid">
Login</ion-button>
<div class="form-info-text ion-text-center">
<p><a>Reset password</a></p>
</div>
</ion-content>
type or paste code here
if u feel this solved your problem do mark it as solution.