Question

我有三个带有单击按钮的密码输入框，我只需要使用fontawosme图标显示或隐藏密码类型（文本或密码）。

下面是我尝试作为代码的代码：

ts.file

changePasswordType(type) {
  if (type == 'oldPassword') {
    this.showPassword = !this.showPassword;
    this._pwdType = this.showPassword ? 'text' : 'password'
  } else if (type == 'newPassword') {
    this.newPassword = !this.newPassword;
    this._pwdType = this.newPassword ? 'text' : 'password'
  } else {
    this.confirmPassword = !this.confirmPassword;
    this._pwdType = this.confirmPassword ? 'text' : 'password'

  }
}

<div class="form-group position-relative">
  <label for="oldpassword" class="lable-title mb-0">Old Password</label>
  <input [type]="_pwdType" class="form-control" required name="old_password" [(ngModel)]="form.old_password" #old_password="ngModel" id="oldpassword">
  <button class="position-absolute hide-password" *ngIf="!showPassword" (click)="changePasswordType('oldPassword')">
              <i class="far fa-eye-slash"></i>
            </button>
  <button class="position-absolute hide-password " *ngIf="showPassword" (click)="changePasswordType('oldPassword')">
              <i class="far fa-eye"></i>
            </button>
</div>


<div class="form-group position-relative">
  <label for="newpassword" class="lable-title mb-0">New Password</label>
  <input [type]="_pwdType" class="form-control" required name="password" [(ngModel)]="form.password" #password="ngModel" id="newpassword">
  <button class="position-absolute hide-password" *ngIf="!newPassword" (click)="changePasswordType('newPassword')">
              <i class="far fa-eye-slash"></i>
            </button>
  <button class="position-absolute hide-password " *ngIf="newPassword" (click)="changePasswordType('newPassword')">
              <i class="far fa-eye"></i>
            </button>
</div>


<div class="form-group position-relative">
  <label for="conformpassword" class="lable-title mb-0">Confirm Password</label>
  <input [type]="_pwdType" class="form-control" required name="confirm_password" [(ngModel)]="form.confirm_password" #confirm_password="ngModel" id="conformpassword">
  <button class="position-absolute hide-password" *ngIf="!confirmPassword" (click)="changePasswordType('confirmPassword')">
              <i class="far fa-eye-slash"></i>
            </button>
  <button class="position-absolute hide-password " *ngIf="confirmPassword" (click)="changePasswordType('confirmPassword')">
              <i class="far fa-eye"></i>
            </button>
</div>

当单击按钮时，所有三个输入框都将转换为键入文本或密码。我只需要单击一个按钮，然后只有那个按钮应该显示文本或密码类型，并且图标应该分别更改

Answer 1

我还不是很了解这个问题，但可以肯定的是：

在.ts

中

showPassword  = false;

和.html

中

<input [type]="showPassword ? 'password':'text'">
<button (click)="showPassword  = !showPassword  ">
    <i [ngClass]="{'far fa-eye-slash': !showPassword  , 'far fa-eye': showPassword  }"></i>
</button>

StackBlitz上的工作代码，https://stackblitz.com/edit/angular-372rjc

如何将不同的参数发送到同一功能进行显示/隐藏

1 个答案: