Блог

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

Подтверждение нового пароля не скрывается и не отображается , у кого-нибудь есть идеи о том, почему и как ?

#скриншот

#html-код

  <mat-form-field class="full-width" appearance="fill">
            <mat-label>New password</mat-label>
            <input matInput formControlName="password" type="{{(showPassword === false)?'password':'text'}}" />
            <mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword()">
              {{!showPassword?'visibility':'visibility_off'}}</mat-icon>
            <mat-error *ngIf="password.hasError('required')">
              {{errFormMsg.REQUIRED}}
            </mat-error>
          </mat-form-field>
          <mat-form-field class="full-width" appearance="fill">
            <mat-label>Confirm new password</mat-label>
            <input matInput formControlName="confirmPassword"
              type="{{(showPassword === false)?'confirmPassword':'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')">
              Password does not match
            </mat-error>
          </mat-form-field>
 

#код ts

 export class LoginComponent implements OnInit {
  accountId: any;
  email: string;
  isInProgress: boolean;
  signupForm: FormGroup;
  hasSubmit = false;
  apiErrMsg = null;
  errFormMsg = ERR_FORM_MSG;
  labels = LABELS;
  isRemembered = false;
  showPassword = false;
  isLoggingIn = false;
  code: string;
  generalStatus = FormStatus.LOGIN;
  securedEmail: string;
  showVerificationSuccessMessage: boolean;
  data: any;
  
  constructor(
    private fb: FormBuilder,
    private userService: UserService,
    private _userProfileService: UserProfileService,
    private _notificationService: NotificationService,
    private authService: AuthService,
    private route: Router,
    private router: ActivatedRoute,
    public dialog: MatDialog
  ) {
    this.signupForm = this.fb.group({
      confirmPassword: [
        '',
        [Validators.required, this.equalWithPasswordValidator.bind(this)],
      ],
      password: [
        '',
        [
          this.validatePasswordRequired,
          this.validateMinimumPassword,
          this.validatePasswordUpperCase,
          this.validatePasswordLowerCase,
          this.validatePasswordSpecialCharacter,
          this.validateOneNumber,
        ],
      ],
    });
  }

  
  toggleShowPassword() {
    this.showPassword = !this.showPassword;
    console.log("this.showPassword" , this.showPassword)
  }

  get password() {
    return this.signupForm.controls['password'];
  }
  get confirmPassword() {
    return this.signupForm.controls['confirmPassword'];
  }
 

Ваш вклад type и formControlName не нужно сопоставлять. type определяет тип ввода и formControlName определяет имя элемента управления формой. Ваш ввод должен быть либо типа 'password' , либо 'text'

Вы неправильно определили тип пароля подтверждения как

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

Это позволит ввести тип ввода как 'confirmPassword' . Там нет типа ввода типа 'confirmPassword' . Это должно быть

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

Ваш ввод пароля для подтверждения должен быть определен следующим образом

 <input matInput formControlName="confirmPassword"
       type="{{(showPassword === false)?'password':'text'}}" />
 

**Правка : ** Если вы хотите выполнять функцию переключения отдельно, вы можете использовать две переменные для переключения пароля и подтверждения пароля.

Пример Реализации

component.ts

 export class LoginComponent implements OnInit {
  .
  .
  showPassword = false;
  showConfirmPassword = false;
  .
  .
  toggleShowPassword(showBoolean) {
    showBoolean = !showBoolean;
  }
}
 

component.html

 <mat-form-field class="full-width" appearance="fill">
  <mat-label>New password</mat-label>
  <input matInput formControlName="password" type="{{(showPassword === false)?'password':'text'}}" />
  <mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword(showPassword)">
    {{!showPassword?'visibility':'visibility_off'}}</mat-icon>
  <mat-error *ngIf="password.hasError('required')">
    {{errFormMsg.REQUIRED}}
  </mat-error>
</mat-form-field>

<mat-form-field class="full-width" appearance="fill">
  <mat-label>Confirm new password</mat-label>
  <input matInput formControlName="confirmPassword" type="{{(showConfirmPassword === false)?'password':'text'}}" />
  <mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword(showConfirmPassword)">
    {{!showConfirmPassword?'visibility':'visibility_off'}}</mat-icon>
  <mat-error *ngIf="confirmPassword.hasError('required')">
    {{errFormMsg.REQUIRED}}
  </mat-error>
  <mat-error *ngIf="signupForm.get('confirmPassword').hasError('notEqual')">
    Password does not match
  </mat-error>
</mat-form-field>