Angular PrimeNG InvalidState Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the InvalidState component in angular primeNG.

InvalidState component: It is used to show an invalid state style in the form module. When the class is set to invalid, it will provide the style for the input element as invalid.

Creating Angular application & module installation:

• Step 1: Create an Angular application using the following command.

  ng new appname

• Step 2: After creating your project folder i.e. appname, move to it using the following command.

  cd appname

• Step 3: Install PrimeNG in your given directory.

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

Project Structure: After the successful installation process, it will look like the following image:

Example 1: This is the basic example that shows how to use the Invalid State component applied to an input element.

app.component.html

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

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 { InputTextModule } from "primeng/inputtext";

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, InputTextModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: In this example, we will know how to use invalidState in a dropdown.

app.component.html

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

app.module.ts

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

• app.component.ts

Javascript

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" },
  ];
}

Output:

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