无法重置 primeng angular 的 <p-password> 的输入字段

Question

我正在尝试重置 primeng 提供的组件 <p-password> 但无法重置。我正在使用反应形式。

演示 Link：https://stackblitz.com/edit/primeng-password-demo-hkkgph?file=src%2Fapp%2Fapp.component.ts

当我使用时重置有效

<input type="password"
            formControlName="password"
            [feedback]="false"
            pPassword
            />

但不在 <p-password>.

Answer 1

我认为这是 primeng angular 的 p 密码中的错误。但是，您可以通过在 HTML 中提供元素引用并从组件设置值来解决该问题。

使用#password 提供HTML 参考如下：

<form [formGroup]="passForm">
  <h5>Show Password</h5>

  <p-password #password formControlName="password" [toggleMask]="true" [feedback]="false">
  </p-password>

  <input class="p-mt-3" type="password" formControlName="password" [feedback]="false" pPassword/>

</form>

<button class="p-mt-3" (click)="reset()"> RESET</button>

在您的组件端代码中：

import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Password } from 'primeng/password';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `
      :host ::ng-deep .p-password input {
        width: 15rem;
      }
    `
  ]
})

export class AppComponent {
  value3: string;
  passForm: FormGroup;
  @ViewChild('password') password: Password;

  constructor(private fb: FormBuilder) {
    this.makeForm();
  }

  makeForm() {
    this.passForm = this.fb.group({
      password: [null, Validators.required]
    });
  }

  reset() {
    this.passForm.reset(); // To reset input field.
    this.password.input.nativeElement.value = ''; // To reset p-password.
  }
}

Answer 2

[已解决]：这是 primeng 11.3.0 版的问题。更新至版本 11.4.4。将解决问题。

无法重置 primeng angular 的 <p-password> 的输入字段

Unable to reset Input field of <p-password> of primeng angular

forms

passwords

primeng

angular

angular-reactive-forms