export class ValidationDemo {
msgs: Message[] = [];
userform: ControlGroup;
submitted: boolean;
genders: SelectItem[];
description: string;
constructor(fb: FormBuilder) {
this.userform = fb.group({
'firstname': new Control('', Validators.required),
'lastname': new Control('', Validators.required),
'password': new Control('', Validators.compose([Validators.required, Validators.minLength(6)])),
'description': new Control(''),
'gender': new Control('', 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 [ngFormModel]="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" [ngFormControl]="userform.controls['firstname']" #firstname="ngForm" placeholder="Required"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!firstname.valid&&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" [ngFormControl]="userform.controls['lastname']" #lastname="ngForm" placeholder="Required"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!lastname.valid&&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" [ngFormControl]="userform.controls['password']" #password="ngForm" placeholder="Required - Min(6)"/>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!password.valid&&password.dirty">
<i class="fa fa-close"></i>
<span *ngIf="password.errors['required']">Password is required</span>
<span *ngIf="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" [ngFormControl]="userform.controls['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" [ngFormControl]="userform.controls['gender']" [autoWidth]="false" #gender="ngForm"></p-dropdown>
</div>
<div class="ui-grid-col-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!gender.valid&&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>