隱藏顯示密碼在angular2 formBuilder中不起作用

Question

問題 ：當我在顯示和隱藏密碼之間切換時，formControlName'Password'的輸入值無法反映。

流量 ：

1. 在密碼字段中輸入一些值。
2. 使用顯示密碼切換字段
3. 密碼字段為空

我的看法部分：

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

 constructor(private _formBuilder:FormBuilder) {

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

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

提前致謝

Answer 1

在這里您可以看到在元素上使用type = Password HTML5

輸入字段和按鈕以HTML格式播放，＃input以id標識

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

.ts文件功能將如下所示

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

Answer 2

我知道這被標記為正確，但是我找到了一種方法，可以在輸入旁邊保留一個切換圖標。

我有一個圖標，當輸入類型設置為password時，它顯示一個眼睛圖標ios-eye-outline ，而當輸入類型設置為text時，它帶有一個穿過圖標ios-eye-off-outline 。

我使用JavaScript來操縱輸入類型，還使用JavaScript來獲取當前輸入類型，並決定對此進行比較。

showPassword布爾值用於隱藏和顯示不同的圖標。

僅當用戶在密碼字段中輸入了內容后，該圖標才會顯示，並且在該字段為空時再次將其隱藏。

在我的*.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>

在我的*.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');
  }
}