单击复选框时如何显示输入的密码？

Question

在我的表单中，我有一个复选框，所以当我选中该复选框时，它应该显示在密码字段中输入的密码。我正在使用 Angular 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