隐藏显示密码在angular2 formBuilder中不起作用

Question

Issue : When i toggle between show and hide password , the entered values of formControlName 'Password' is not reflecting.

flow :

1. enter some values in password field .
2. toggle the field using show password
3. password field is empty

my view part :

 <ion-input formControlName="password" placeholder="Password*" type="password" (ngModelChange)="onChange($event)"
                   autocomplete="off" [hidden]="showPasswordModel"></ion-input>

    <ion-input formControlName="password" placeholder="Password-" type="text" (ngModelChange)="onChange($event)"
               autocomplete="off" [hidden]="!showPasswordModel"></ion-input>


                <ion-item class="checkbox-container">
    <ion-label>Show password</ion-label>
    <ion-toggle  (click)="showPasswordModel = !showPasswordModel"></ion-toggle>
  </ion-item>

ts section

 constructor(private _formBuilder:FormBuilder) {

     this.loginForm = this._formBuilder.group({      
          password: ['', Validators.compose([Validators.required])]      
        });
--
}

hint : http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

Thanks in advance

Answer 1

Here you can see using type = Password HTML5 on element

Input Field and button to play in HTML and #input in id to identify it

 <ion-input #input formControlName="password" type="password"></ion-input>
 <button class="btn" type="button" (click)="showPassword(input)"> Show Password </button>

The .ts file function will be something Like this

showPassword(input: any): any {
   input.type = input.type === 'password' ?  'text' : 'password';
  }

Answer 2

I know this was marked as correct, but I found a way to do this by keeping a toggle icon next to the input.

I have an icon that displays an eye icon, ios-eye-outline , when the input type is set to password and a eye with a line through icon, ios-eye-off-outline , when the input type is set to text .

I used JavaScript to manipulate the input type, I also used JavaScript to get the current input type and decided to do the compare on that.

The showPassword boolean is used to hide and display the different icons.

The icon also will only display once the user has entered something into the password field, and hide it again when the field is empty.

Inside my *.html

<ion-item>
  <ion-label floating color="dark">Password</ion-label>
  <ion-input id="password" [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
  </ion-input>
  <button ion-button clear color="dark" type="button" class="password__btn__toggle" item-right (click)="togglePassword()" *ngIf="!showPassword && login.password"> <ion-icon id="password__icon" name="ios-eye-outline"> </ion-icon> </button>
  <button ion-button clear color="dark" type="button" class="password__btn__toggle" item-right (click)="togglePassword()" *ngIf="showPassword && login.password"> <ion-icon id="password__icon" name="ios-eye-off-outline"> </ion-icon> </button>
</ion-item>
<p [hidden]="password.valid || submitted == false" color="danger" padding-left>
  Password is required
</p>

inside my *.ts

public showPassword: boolean = false;

public togglePassword(input:any): void {
  let currentType:string = document.getElementById('password').querySelector('.text-input').getAttribute('type');

  if (currentType === 'password') {
    this.showPassword = true;
    document.getElementById('password').querySelector('.text-input').setAttribute('type', 'text');
  } else {
    this.showPassword = false;
    document.getElementById('password').querySelector('.text-input').setAttribute('type', 'password');
  }
}