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.
Name | Type | Default | Description |
---|---|---|---|
promptLabel | string | null | Text to prompt password entry. Defaults to PrimeNG I18N API configuration. |
mediumRegex | string | Regex for a medium level password. | ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}). |
strongRegex | string | Regex for a strong level password. | ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,}) |
weakLabel | string | null | Text for a weak password. Defaults to PrimeNG I18N API configuration. |
mediumLabel | string | null | Text for a medium password. Defaults to PrimeNG I18N API configuration. |
strongLabel | string | null | Text for a strong password. Defaults to PrimeNG I18N API configuration. |
feedback | boolean | true | Whether to show the strength indicator or not. |
toggleMask | boolean | false | Whether to show an icon to display the password as plain text. |
appendTo | string | null | Id of the element or "body" for document where the overlay should be appended to. |
inputStyle | any | null | Inline style of the input field. |
inputStyleClass | string | null | Style class of the input field. |
inputId | string | null | Identifier of the accessible input element. |
style | string | null | Inline style of the component. |
style | string | null | Inline style of the element. |
panelStyle | string | null | Inline style of the overlay panel element. |
styleClass | string | null | Style class of the element. |
panelStyleClass | string | null | Style class of the overlay panel element. |
placeholder | string | null | Advisory information to display on input. |
label | string | null | Label of the input for accessibility. |
ariaLabel | string | null | Defines a string that labels the input for accessibility. |
ariaLabelledBy | string | null | Specifies one or more IDs in the DOM that labels the input field. |
showClear | boolean | false | When enabled, a clear icon is displayed to clear the value. |
maxLength | number | null | specifies the maximum number of characters allowed in the input element. |
Name | Parameters | Description |
---|---|---|
onBlur | event: Blur event | Callback to invoke on blur of input field. |
onFocus | event: Focus event | Callback to invoke on focus of input field. |
onClear | - | Callback to invoke when input field is cleared. |
Name | Parameters |
---|---|
header | - |
content | - |
footer | - |
clearicon | - |
hideicon | - |
showicon | - |