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

Question

问题:当我在显示和隐藏密码之间切换时,输入的formControlName'密码'值不会反映出来.

流程:

1. 在密码字段中输入一些值.
2. 使用show password切换字段
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以识别它

 <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';
  }