Password displays strength indicator for password fields.
import { PasswordModule } from 'primeng/password';
Two-way value binding is defined using ngModel.
<p-password [(ngModel)]="value" [feedback]="false"></p-password>
Password can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-password formControlName="value" [feedback]="false"></p-password>
</form>
Strength meter is displayed as a popup while a value is being entered.
<p-password [(ngModel)]="value"></p-password>
When toggleMask is present, an icon is displayed to show the value as plain text.
<p-password [(ngModel)]="value" [toggleMask]="true"></p-password>
3 templates are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
<p-password [(ngModel)]="value">
<ng-template pTemplate="header">
<h6>Pick a password</h6>
</ng-template>
<ng-template pTemplate="footer">
<p-divider></p-divider>
<p class="mt-2">Suggestions</p>
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</ng-template>
</p-password>
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<p-password [(ngModel)]="value" [feedback]="false"></p-password>
<label for="password">Password</label>
</span>
Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
<p-password [(ngModel)]="value" class="ng-invalid ng-dirty"></p-password>
When disabled is present, the element cannot be edited and focused.
<p-password [(ngModel)]="value" [disabled]="true"></p-password>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-password-panel | Container of password panel |
| p-password-meter | Meter element of password strength |
| p-password-info | Text to display strength |
Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props. Screen reader is notified about the changes to the strength of the password using a section that has aria-live while typing.
<label for="pwd1">Password</label>
<p-password> id="pwd1"></p-password>
<span id="pwd2">Password</span>
<p-password> aria-labelledby="pwd2"></p-password>
<p-password> aria-label="Password"></p-password>
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
| escape | Hides the strength meter if open. |
API defines helper props, events and others for the PrimeNG Password module.
Password displays strength indicator for password fields.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
Defines the templates used by the component.
Password directive.
Defines the input properties of the component.