Angular PrimeNG表单密码属性组件

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的网络解决方案。本文将讨论Angular PrimeNG表单密码属性组件。

密码组件用于从用户那里获得敏感信息的输入，如密码、信用卡/借记卡CVV等。当它处于焦点位置时，会向用户显示一个密码强度指示器。密码组件的所有属性列举如下。

Angular PrimeNG表格密码属性：

promptLabel。它指定了提示密码输入的文本。它显示在密码强度表的下面。它是一个字符串类型，默认值为空。
mediumRegex: 它指定了中等密码强度的重码。它是字符串类型，默认值是^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9]))(?=.{6,}).
strongRegex: 它指定了字符串密码强度的重码。它是字符串类型，默认为”_^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})” 。
weakLabel。当输入的密码为弱密码时，它是显示的标签。它是一个字符串类型，默认值为空。
mediumLabel。当输入的密码是中等强度时，它是显示的标签。它是一个字符串类型，默认值为空。
strongLabel。当输入的密码是强密码时，它将显示标签。它是一个字符串类型，默认值为空。
feedback。它指定了是否显示密码强度表。它是一个布尔类型，默认值为真。
toggleMask：如果设置为 “true”，将显示一个图标以查看密码的纯文本。它是一个布尔类型，默认值是false。
appendTo。它接受一个元素或 “主体 “的ID，该元素或 “主体 “是覆盖物应该被附加到的文件。它是一个字符串类型，默认值为空。
inputStyle。它是密码输入栏的内联样式。它接受任何类型的数据，默认值为空。
inputStyleClass。它是输入字段的风格类。它是一个字符串类型，默认值为空。
inputId。它是可访问输入元素的ID。它是一个字符串类型，默认值为空。
style。它是密码组件的内联样式。它是一个字符串类型，默认值为空。
styleClass。它是密码组件的风格类。它是一个字符串类型，默认值为空。
placeholder。它指定了密码输入的占位符字符串。它是一个字符串类型，默认值为空。
label。它指定了可访问性的输入标签。它是一个字符串类型，默认值为空。
ariaLabel。它是一个字符串，用于标记输入的可访问性。它是一个字符串类型，默认值为空。
ariaLabelledBy。它在DOM中指定一个以上的ID来标记输入字段。它是一个字符串类型，默认值为空。
showClear: 它指定是否为密码显示一个清晰的图标按钮。它是一个布尔类型，默认值是false。

语法:

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

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG表单密码属性组件

Project Structure

例1：本例说明了使用promptLabel、weakLabel、mediumLabel和strongLabel属性来相应地定制密码的标签。

app.component.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

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

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 { }

输出:

Angular PrimeNG表单密码属性组件

示例2：本例使用密码组件的showClear、placeholder、inputStyle和toggleMask属性来渲染显示/隐藏密码图标、改变输入样式、显示清除图标按钮等。

app.component.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

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

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 { }

输出:

Angular PrimeNG表单密码属性组件