Angular Reactive Form using PrimeNG and its Validation

In this article, we will create a userForm with PrimeNG Components and we will generate and validate the form using the Angular Reactive form.

From PrimeNG components, we need a Card, Button and InputText.
From Angular Forms , we need Reactive forms

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Reactive form for generate and validate the form
import { ReactiveFormsModule } from '@angular/forms'; 

// primeng components
import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { CardModule } from 'primeng/card';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule, // <- import here
    InputTextModule,  // <- import here
    ButtonModule,  // <- import here
    CardModule  // <- import here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lets create the form using the form builder

// app.component.ts

import { Component } from '@angular/core';

// FormBuilder to create form and Validators for validations
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  userForm = this.fb.group({
    firstName: ['', Validators.required], 
    lastName: [''],
    address: this.fb.group({ // <- another group of element
      street: [''],
      postCode: ['', Validators.required]
    })
  });

  constructor(private fb: FormBuilder) { };

  addUser() {
    console.log(this.userForm.value);
  }

}

<!-- app.component.html -->

<p-card styleClass="user-form" class="flex justify-content-center">
  <form [formGroup]="userForm" (ngSubmit)="addUser()" novalidate>
    <div class="field">
      <label for="firstName" class="block">First Name</label>
      <input type="text" pInputText placeholder="First Name" formControlName="firstName" />
      <small class="p-error block" *ngIf="
          userForm.get('firstName')?.invalid && userForm.get('firstName')?.dirty
        ">
        First name is required</small>
    </div>
    <div class="field">
      <label for="lastName" class="block">Last Name</label>
      <input type="text" pInputText placeholder="Last Name" formControlName="lastName" />
    </div>

    <div formGroupName="address">
      <h2>Address</h2>
      <div class="field">
        <label for="street" class="block">Street</label>
        <input type="text" pInputText placeholder="Street" formControlName="street" />
      </div>
      <div class="field">
        <label for="postCode" class="block">PostCode</label>
        <input type="text" pInputText placeholder="PostCode" formControlName="postCode" />
        <small class="p-error block" *ngIf="
            userForm.get('address')?.get('postCode')?.invalid &&
            userForm.get('address')?.get('postCode')?.dirty
          ">
          PostCode is required</small>
      </div>
    </div>

    <button pButton type="submit" label="Submit" [disabled]="userForm.invalid"></button>
  </form>
</p-card>

add some css also

/* app.component.css */

:host >>> .user-form {
  width: 30%;
}

:host >>> .p-inputtext {
  width: 100%;
}

Here is the output

Thanks for reading…

For More Angular PrimeNG tutorials, please follow https://medium.com/@haseenakhader.uk
https://youtube.com/@haseena.khader