Componente InvalidState 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 InvalidState en angular primeNG.

Componente InvalidState: se utiliza para mostrar un estilo de estado no válido en el módulo de formulario. Cuando la clase se establece como no válida, proporcionará el estilo para el elemento de entrada como no válido.

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 : después del proceso de instalación exitoso, se verá como la siguiente imagen:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Estado no válido aplicado a un elemento de entrada. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG InvalidState component</h5>
<div class="p-grid p-fluid">
  <div class="p-field p-col-12 p-md-3">
    <input type="text" class="ng-invalid ng-dirty" pInputText />
  </div>
</div>

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

Producción:

Ejemplo 2: en este ejemplo, sabremos cómo usar invalidState en un menú desplegable.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG dropdowm component</h5>
<p-dropdown [options]="lang" placeholder="Select a Language"
 optionLabel="name" [showClear]="true" 
 class="ng-invalid ng-dirty">
</p-dropdown>

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

• aplicación.componente.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  lang = [
    { name: "HTML" },
    { name: "ReactJS" },
    { name: "Angular" },
    { name: "Bootstrap" },
    { name: "PrimeNG" },
  ];
}

Producción:

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