Angular PrimeNG表单密码样式组件

Angular PrimeNG是PrimeTek开发的一个开源的前端UI框架，用于开发高效和可扩展的angular应用程序。在他们的项目中使用PrimeNG可以帮助开发人员减少开发时间，并专注于应用程序的其他重要领域。在这篇文章中，我们将看到Angular PrimeNG表单密码造型组件。

密码组件用于从用户那里获得敏感信息的输入，如密码、信用卡/借记卡CVV等。当它处于焦点位置时，会向用户显示一个密码强度指示器。密码组件有3个结构样式类，可以用来设计该组件。

Angular PrimeNG表单密码造型类：

p-password-panel。它是密码面板的容器。
p-password-meter。它是密码强度的测量元素。
p-password-info。它是密码强度的文本元素。

Angular PrimeNG表单密码样式属性：

placeholder。这是一个字符串，用作密码输入的占位符。
feedback。这指定了是否显示强度指示器。
toggleMask : 如果设置为 “true”，将显示一个图标，将输入的密码显示为纯文本。
weakLabel。这是输入的密码为弱密码时显示的标签。
mediumLabel。这是当输入的密码为中等时显示的标签。
strongLabel。这是输入的密码为强密码时要显示的标签。

语法:

// In app.component.html
<p-password 
    [(ngModel)]="..." 
    placeholder="...">
</p-password>

// In app.component.css
:host ::ng-deep .Password-Styling-Class{
    // CSS
}

创建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：这个例子展示了使用 “p-password-panel “类来改变密码组件面板的风格。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    Password Styling Component
</h3>
  
<p-password [(ngModel)]="password" 
            placeholder="Enter the Password">
</p-password>

app.component.css

:host ::ng-deep .p-password-panel {
    color: green;
    border: 2px solid green;
    background: #ffcccc;
}

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    password?: 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表单密码样式组件

例子2：在这个例子中，我们使用上述造型类来改变密码强度表的高度和边界半径，并改变文本的颜色和字体重量。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    Password Styling Component
</h3>
  
<p>Default Password Component</p>
<p-password [(ngModel)]="password" 
            placeholder="Enter the Password">
</p-password>
  
<p class="mt-6">
      Custom Styled Password Component
</p>
<p-password class="myPass"
              [(ngModel)]="myPassword" 
              placeholder="Enter the Password">
</p-password>

app.component.css

:host ::ng-deep .myPass .p-password-meter {
    border: 1px solid red;
    height: 15px;
    border-radius: 10px;
}
  
:host ::ng-deep .myPass .p-password-panel {
    color: green;
    font-weight: bold;
    font-size: 20px;
}

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    password?: string;
    myPassword?: 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表单密码样式组件