Как показать пароль, введенный при нажатии флажка?

Question

в моей форме у меня есть один флажок, поэтому при установке флажка должен отображаться пароль, введенный в поле пароля. Я делаю это, используя угловой 7.

  <div class="form-group">
  <label for="Password" class="control-label">Password</label>
  <div>
  <input type="password" class="form-control" name="Password" ngModel 
  #pwd="ngModel" placeholder="Password" required  pattern="^(?=.*[a-z])(? 
  =.* 
    [A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$">
    <div *ngIf= pwd.invalid>
      <small class="form-text text-danger" *ngIf= 
     pwd.errors.required>Password Required</small>
      <small class="form-text text-danger" 
      *ngIf=pwd.errors.pattern>Minimum eight characters, at least one 
      uppercase letter, one lowercase letter, one number and one special 
       character.</small>


  </div>
</div>
</div>
<div class="form-group form-check">
  <input type="checkbox" class="form-check-input" 
    [disabled]="pwd.invalid">
  <label class="form-check-label" id="show" for="exampleCheck1">Show 
  Password</label>
</div>

При установке флажка должен отображаться парольвведено в поле пароля.

Answer 1

Привет и добро пожаловать на Stackoverflow! Попробуйте переключиться между type = "password" и type = "text" на основе значения флажка.

Добавьте #showPassword к вашему входу флажка, например:

<input #showPassword type="checkbox" class="form-check-input" [disabled]="pwd.invalid">

Тогдав поле вашего пароля:

<input type="showPassword.checked ? 'text' : 'password'" .... />

РЕДАКТИРОВАТЬ (если вы еще не решили его и для других):

component.ts

// show/hide boolean variable
showPassword: boolean;

constructor() {
  // init value in constructor
  this.showPassword = false;
}

// click event, show/hide based on checkbox value
showHidePassword(e) {
    this.showPassword = e.target.checked;
}

component.html

<input [type]="showPassword ? 'text' : 'password'" />

<input type="checkbox" (change)="showHidePassword($event)" > toggle view