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

Question

问题：当我在显示和隐藏密码之间切换时，输入的 formControlName 'Password' 值没有反映出来。

流量 :

在密码字段中输入一些值。
使用显示密码切换字段
密码字段为空

我的观点：

 <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 中输入要播放的字段和按钮，并在 id 中输入 #input 以识别它

 <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

我知道这被标记为正确，但我找到了一种方法，方法是在输入旁边保留一个切换图标。

我有一个显示眼睛图标的图标，ios-eye-outline，当输入类型设置为 password 和一个带有一条线的眼睛图标，ios-eye-off-outline，当输入类型设置为 text.

我使用 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');
  }
}

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

Hide show password is not working in angular2 formBuilder

angular

ionic2

reactive