Angular PrimeNG表单密码事件组件

Angular PrimeNG是一个为Angular应用程序制作的UI组件集合。它使开发者无需投入太多的时间就能轻松地建立起漂亮而高效的Web界面。在这篇文章中，我们将讨论Angular PrimeNG表单密码事件组件。

密码组件用于从用户那里获取敏感信息的输入。它将用户输入的所有字符变成子弹。当用户输入密码时，PrimeNG内置的密码组件还显示一个密码强度指示器。

Angular PrimeNG表格密码事件：

onFocus:这个事件接受一个回调，当密码输入获得焦点时，回调会被调用。
onBlur: 这个事件接受一个回调，当密码输入失去焦点时，回调将被调用。
onClear: 这个事件接受一个回调，当密码输入的值被清除时，回调将被调用。

Angular PrimeNG表单密码事件属性：

showClear: 这是一个布尔属性，用于显示清除密码输入的清除图标。

语法:

<p-password 
    (event-name)="callback()"
    [(ngModel)]="pass1">
</p-password>

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

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

ng new myapp

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

cd myapp

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

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG表单密码事件组件

Project Structure

例子1：在这个例子中，我们使用了密码组件的onFocus和onBlur事件，在输入焦点状态改变时显示一条信息。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    Password Events Component
</h3>
  
<p-password 
    (onFocus)="passOnFocus()"
    (onBlur)="passOnBlur()"
    [(ngModel)]="pass1">
</p-password>
  
<p-toast></p-toast>

app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private msg: MessageService) { }
    pass1: string = "";
  
    passOnFocus() {
        this.msg.add({
            severity: "success",
            summary: "Password In Focus",
            detail: "onFocus Event Triggered"
        })
    }
  
    passOnBlur() {
        this.msg.add({
            severity: "error",
            summary: "Password Out of Focus",
            detail: "onBlur Event Triggered"
        })
    }
}

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';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        PasswordModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表单密码事件组件

例子2：在这个例子中，我们使用了密码组件的onClear事件，在使用清除图标清除密码输入时向用户显示一条信息。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    Password Events Component
</h3>
  
<p-password 
    (onClear)="passOnClear()"
    [showClear]="true"
    [(ngModel)]="pass1">
</p-password>
  
<p-toast></p-toast>

app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private msg: MessageService) { }
    pass1: string = "";
  
    passOnClear() {
        this.msg.add({
            severity: "info",
            summary: "Password Cleared",
            detail: "onClear Event Triggered"
        })
    }
}

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';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        PasswordModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表单密码事件组件