-1

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?

Gourav Garg
  • 2,856
  • 11
  • 24
Dave
  • 15,639
  • 133
  • 442
  • 830

1 Answers1

0

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.

Ajit Hingmire
  • 195
  • 9
  • This results in a compile error. "inputSTyleClass" is underlined with a compile error, which is "Type '{ "border-red-500": boolean | undefined; }' is not assignable to type 'string'." – Dave Oct 13 '22 at 19:02
  • @Dave I have updated code & added stackblitz solution. Also gave alternate way with original code in the question – Ajit Hingmire Oct 14 '22 at 03:26