Validation PrimeNG input components indicate validation errors automatically when their value is marked as invalid.
First Name *:
Firstname is required
Last Name *:
Lastname is required
Password *:
Password is required Must be longer than 6 characters
Description:
Gender *:
Gender is required
Form Submitted
{{diagnostic}}
View on GitHub

import {Component,OnInit} from '@angular/core';
import {Validators,FormControl,FormGroup,FormBuilder} from '@angular/forms';
import {Message,SelectItem} from '../../../components/common/api';

@Component({
    templateUrl: 'showcase/demo/validation/validationdemo.html'
})
export class ValidationDemo implements OnInit {

    msgs: Message[] = [];

    userform: FormGroup;

    submitted: boolean;

    genders: SelectItem[];

    description: string;

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        this.userform = this.fb.group({
            'firstname': new FormControl('', Validators.required),
            'lastname': new FormControl('', Validators.required),
            'password': new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)])),
            'description': new FormControl(''),
            'gender': new FormControl('', Validators.required)
        });

        this.genders = [];
        this.genders.push({label:'Select Gender', value:''});
        this.genders.push({label:'Male', value:'Male'});
        this.genders.push({label:'Female', value:'Female'});
    }

    onSubmit(value: string) {
        this.submitted = true;
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
    }

    get diagnostic() { return JSON.stringify(this.userform.value); }

}


<p-growl [value]="msgs" sticky="sticky"></p-growl>

<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
    <p-panel header="Validate">
        <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
            <div class="ui-grid-row">
                <div class="ui-grid-col-2">
                    First Name *:
                </div>
                <div class="ui-grid-col-6">
                    <input pInputText type="text" formControlName="firstname" placeholder="Required"/>
                </div>
                <div class="ui-grid-col-4">
                    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['firstname'].valid&&userform.controls['firstname'].dirty">
                        <i class="fa fa-close"></i>
                        Firstname is required
                    </div>
                </div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2">
                    Last Name *:
                </div>
                <div class="ui-grid-col-6">
                    <input pInputText type="text" formControlName="lastname" placeholder="Required"/>
                </div>
                <div class="ui-grid-col-4">
                    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['lastname'].valid&&userform.controls['lastname'].dirty">
                        <i class="fa fa-close"></i>
                        Lastname is required
                    </div>
                </div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2">
                    Password *:
                </div>
                <div class="ui-grid-col-6">
                    <input pInputText type="password" formControlName="password" placeholder="Required - Min(6)"/>
                </div>
                <div class="ui-grid-col-4">
                    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['password'].valid&&userform.controls['password'].dirty">
                        <i class="fa fa-close"></i>
                        <span *ngIf="userform.controls['password'].errors['required']">Password is required</span>
                        <span *ngIf="userform.controls['password'].errors['minlength']">Must be longer than 6 characters</span>
                    </div>
                </div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2">
                    Description:
                </div>
                <div class="ui-grid-col-6">
                    <textarea pInputTextarea type="text" formControlName="description"></textarea>
                </div>
                <div class="ui-grid-col-4"></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2">
                    Gender *:
                </div>
                <div class="ui-grid-col-6">
                    <p-dropdown [options]="genders" formControlName="gender" [autoWidth]="false"></p-dropdown>
                </div>
                <div class="ui-grid-col-4">
                    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['gender'].valid&&userform.controls['gender'].dirty">
                        <i class="fa fa-close"></i>
                        Gender is required
                    </div>
                </div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2"></div>
                <div class="ui-grid-col-6">
                    <button pButton type="submit" label="Submit" [disabled]="!userform.valid"></button>
                </div>
                <div class="ui-grid-col-4"></div>
            </div>
            <div style="text-align:center;margin-top:20px" *ngIf="submitted">
                Form Submitted
                <br>
                {{diagnostic}}
            </div>
        </div>
    </p-panel>
</form>