Show hide password with verification

@michelled wrote:

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

Posts: 2

Participants: 2

Read full topic