Angular PrimeNG Form Password Properties Component

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. This article will discuss the Angular PrimeNG Form Password Properties Component.

The Password Component is used to take the input of sensitive information like passwords, credit/debit card CVV, etc from the user. When it is in focus a password strength indicator is shown to the user. All the properties of the Password component are listed below.

Angular PrimeNG Form Password Properties:

• promptLabel: It specifies the text to prompt password entry. It is shown below the password strength meter. It is a string type & the default value is null.
• mediumRegex: It specifies the regex for medium password strength. It is of string type & the default value is “^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})“.
• strongRegex: It specifies the regex for string password strength. It is of string type & this defaults to “^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})”.
• weakLabel: It is the label to show when the entered password is weak. It is a string type & the default value is null.
• mediumLabel: It is the label to show when the entered password is of medium strength. It is a string type & the default value is null.
• strongLabel: It is the label to show when the entered password is strong. It is a string type & the default value is null.
• feedback: It specifies whether to show the password strength meter or not. It is a boolean type & the default value is true.
• toggleMask: If this is set to true an icon will be shown to see the password as plain text. It is a boolean type & the default value is false.
• appendTo: It accepts the ID of an element or “body” for the document to which the overlay should be appended to. It is a string type & the default value is null.
• inputStyle: It is the inline style for the password input field. It accepts any type of data & the default value is null. 
• inputStyleClass: It is the style class for the input field. It is a string type & the default value is null.
• inputId: It is the ID for the accessible input element. It is a string type & the default value is null.
• style: It is the inline style of the password component. It is a string type & the default value is null.
• styleClass: It is the style class of the password component. It is a string type & the default value is null.
• placeholder: It specifies the placeholder string for the password input. It is a string type & the default value is null.
• label: It specifies the input label for accessibility. It is a string type & the default value is null.
• ariaLabel: It is a string that labels the input for accessibility. It is a string type & the default value is null.
• ariaLabelledBy: It specifies more than 1 ID in the DOM that labels the input field. It is a string type & the default value is null.
• showClear: It specifies whether to show a clear icon button for the password or not. It is a boolean type & the default value is false.

Syntax:

<p-password
    placeholder="..."
    [showClear]="..."
    [toggleMask]="..."
    promptLabel="..."
    weakLabel="..."
    mediumLabel="..."
    strongLabel="..."
    [inputStyle]="..."
    ...
    [(ngModel)]="...">
</p-password>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: This example illustrates the use of the promptLabel, weakLabel, mediumLabel, and strongLabel properties to customize the label of the password accordingly.

• app.component.html

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    Password Properties Component
</h3>

<h4>Default Password Component</h4>
<p-password placeholder="Enter the password"
            promptLabel="Choose a password"
            weakLabel="The password is weak"
            mediumLabel="The password is medium"
            strongLabel="The password is strong"
            [(ngModel)]="password1">
</p-password>

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    password1?: string;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { DividerModule } from 'primeng/divider';
import { PasswordModule } from 'primeng/password';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        DividerModule,
        PasswordModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This example used the showClear, placeholder, inputStyle, and toggleMask properties of the password component to render the show/hide password icon, change input style, show a clear icon button, etc.

• app.component.html

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    Password Properties Component
</h3>

<p-password placeholder="Enter the password"
            [showClear]="true"
            [toggleMask]="true"
            [inputStyle]="{'border-color': 'green'}"
            [(ngModel)]="password1">
</p-password>

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    password1?: string;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { PasswordModule } from 'primeng/password';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        PasswordModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/password