angular - 隐藏显示密码在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 中播放的输入字段和按钮以及在 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-outlinetext

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