Angular实现密码显隐功能时确认密码字段切换按钮失效问题

问题原因 #

你给确认密码字段的type属性配置了错误的取值：

type="{{(showPassword === false)?'confirmPassword':'text'}}"

HTML的标签不存在confirmPassword这个合法类型，只有当type为password时才会实现输入内容隐藏的效果，所以你的切换逻辑对确认密码字段不生效。

修复方案 #

把确认密码字段的type属性逻辑修改为和密码字段一致即可，修改后两个字段会同步切换显隐状态：

<mat-form-field class="full-width" appearance="fill">
  <mat-label>确认新密码</mat-label>
  <input matInput formControlName="confirmPassword"
    type="{{(showPassword === false)?'password':'text'}}" />
  <mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword()">
    {{!showPassword?'visibility':'visibility_off'}}</mat-icon>
  <mat-error *ngIf="confirmPassword.hasError('required')">
    {{errFormMsg.REQUIRED}}
  </mat-error>
  <mat-error *ngIf="signupForm.get('confirmPassword').hasError('notEqual')">
    密码不匹配
  </mat-error>
</mat-form-field>

可选优化（独立控制两个字段的显隐） #

如果你需要两个密码字段可以单独切换显隐状态，可以按如下方式调整：

1. 在TS代码中新增状态变量：

showConfirmPassword = false;

2. 新增对应切换方法：

toggleShowConfirmPassword() {
  this.showConfirmPassword = !this.showConfirmPassword;
}

3. 修改确认密码字段的绑定逻辑：

<input matInput formControlName="confirmPassword"
  type="{{(showConfirmPassword === false)?'password':'text'}}" />
<mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowConfirmPassword()">
  {{!showConfirmPassword?'visibility':'visibility_off'}}</mat-icon>

内容的提问来源于stack exchange，提问作者Brinda Anand