1

問題: パスワードの表示と非表示を切り替えると、formControlName 'Password' の入力値が反映されません。

フロー:

  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/

前もって感謝します

4

2 に答える 2

8

ここでは、要素で 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';
  }
于 2016-11-22T08:34:47.250 に答える