In PrimeNG, how do I set a border color for the p-calendar component when no data is entered?

Question

I'm using Angular 14 and PrimeNG 14. I have a p-calendar component that I would like to style with a red border color if the user has not entered a value. I have

            <p-calendar
                            [showIcon]="true" 
                            [ngClass]="{'border-red-500': this.submitted && this.form.get('myDate')?.hasError('required')}"
                            formControlName="myDate"></p-calendar>

However, this does not do anything to change the style. What is the proper way to change the border color of the p-calendar component given certain conditions?

Answer 1

Border should be applied to input not p-calendar. Change your code to set inputStyleClass as below.

<p-calendar [showIcon]="true" [inputStyleClass]="this.submitted && this.form.get('myDate')?.hasError('required') ? 'red-bar': ''" formControlName="myDate">

I have created stackblitz for this. https://stackblitz.com/edit/primeng-calendar-demo-vjtcnp?file=src%2Fapp%2Fapp.component.html

Or even with your implementation, you can simply change your class definition to

.border-red-500 .p-inputtext {
  border: 1px solid red;
}

write the style in global styles.css.