how to give the custom message to calendar for required field in Prime-NG

Question

how to give the custom message to calendar for required field in Prime-NG.

If the form is submitted we will get the default message as Please fill out this field but can we get the custom message for p-calendar.

I have tried with

<p-calendar [showIcon]="true" required="true" requiredMessage="Please select date.">

<p-calendar [showIcon]="true" required="true "oninvalid="this.setCustomValidity('Please select the Date')"
oninput="this.setCustomValidity('')"  />

above code works for only input tag not with p-calendar.

How to resolve this issue.

not able to set the custom message for p-calendar. it'll work for input tag. @devpato — AVINASH M, Nov 07 '19 at 07:15
The information you have provided is not enough! Please tell what type of form you have used? Is it reactive or template driven? — Surjeet Bhadauriya, Nov 11 '19 at 06:46

score 2 · Answer 1 · answered Nov 11 '19 at 07:51

A you are using template driven form you have to use ngModel to bind the value.

So make <p-calendar> to use ngModel.

<p-calendar name="calendar" #calendar="ngModel" [(ngModel)]="calendarDate"  
 showTime="showTime" hourFormat="24" [utc]="true" required></p-calendar>

And handle require validation when a it is invalid.

<div *ngIf="f.submitted && calendar.invalid" class="invalid-feedback">
    <div *ngIf="calendar.errors.required">Date is required</div>
</div>

Working Demo

but can we get the custom message like **Please fill out this page** as the image i have uploaded @SurjeetBhadauriya — AVINASH M, Nov 11 '19 at 11:29

score 0 · Answer 2 · edited Mar 25 '22 at 12:48

You need to use formGroup attribute of the p-calendar and assign the value as the name of your form. For example:

<form #myForm="ngForm">
  <p-calendar formGroup="myForm" [required]="true"></p-calendar>
  <button [disabled]="!myForm.valid" (click)='submitForm()'><Submit</button>
</form>

In this manner, your template-driven form validation will be binded with the primeng elements. Therafter, you can use CSS and logic to display the error message you want to show.

how to give the custom message to calendar for required field in Prime-NG

2 Answers2

Working Demo