Componente de contraseña de Angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente Contraseña en Angular PrimeNG.

Componente de contraseña: se utiliza para representar el indicador de seguridad de los campos de contraseña. 

Propiedades:

• promptLabel : se utiliza para mostrar algún texto para solicitar la entrada de contraseña. Es de tipo de datos de string, el valor predeterminado es nulo.
• mediumRegex : es la expresión regular mediana que se utilizará para verificar la contraseña. Es de tipo de datos de string, el valor predeterminado es la expresión regular para una contraseña de nivel medio.
• strongRegex : es la expresión regular media que se utilizará para verificar la contraseña. Es del tipo de datos de string, el valor predeterminado es la expresión regular para una contraseña de nivel seguro.
• débilEtiqueta : se utiliza para mostrar texto para una entrada de contraseña débil. Es de tipo de datos de string, el valor predeterminado es nulo.
• mediumLabel : se utiliza para mostrar texto para una entrada de contraseña mediana. Es de tipo de datos de string, el valor predeterminado es nulo.
• strongLabel : se utiliza para mostrar texto para una entrada de contraseña segura. Es de tipo de datos de string, el valor predeterminado es nulo.
• retroalimentación : Se utiliza para mostrar el indicador de fuerza o no. Es del tipo de datos booleano, el valor predeterminado es verdadero.
• toggleMask : se utiliza para mostrar un icono para mostrar la contraseña como texto sin formato. Es del tipo de datos booleano, el valor predeterminado es falso.
• appendTo : esta propiedad toma el ID del elemento al que se agrega la superposición. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputStyle : se utiliza para establecer el estilo en línea del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputStyleClass : se utiliza para establecer la clase de estilo del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputId : es un identificador de ID del elemento de entrada subyacente. Es de tipo de datos de string, el valor predeterminado es nulo.
• style : Se utiliza para establecer el estilo Inline del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass : se utiliza para establecer la clase de estilo del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• marcador de posición : se utiliza para establecer el texto del marcador de posición para la entrada. Es de tipo de datos de string, el valor predeterminado es nulo.

Plantillas:

• encabezado: Es la parte del encabezado del elemento.
• content: Es la parte de contenido del elemento.
• pie de página: Es la parte de pie de página para el elemento.

Estilo:

• p-password-panel: es un contenedor de estilo del panel de contraseñas.
• p-password-meter: es un elemento medidor de estilo de la seguridad de la contraseña.
• p-password-info: Es un texto para mostrar fuerza.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

  ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

  cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto : Se verá como lo siguiente.

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Contraseña. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Password Component</h5>
<p-password [feedback]="false"></p-password>
<p-password [disabled]="true" [feedback]="false"></p-password>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { PasswordModule } from "primeng/password";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PasswordModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad toggleMask en el componente de contraseña. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG password component</h5>
<p-password [toggleMask] ="true"></p-password>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { PasswordModule } from "primeng/password";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PasswordModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/password