PrimeNG中，如何在没有输入数据的情况下为p-calendar组件设置边框颜色？

Question

我正在使用 Angular 14 和 PrimeNG 14。我有一个 p 日历组件，如果用户没有输入值，我想用红色边框颜色设置样式。我有

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

但是，这并不能改变风格。在特定条件下更改 p 日历组件边框颜色的正确方法是什么？

Answer 1

边框应应用于输入而不是 p 日历。更改代码以设置 inputStyleClass 如下。

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

我为此创建了 stackblitz。 https://stackblitz.com/edit/primeng-calendar-demo-vjtcnp?file=src%2Fapp%2Fapp.component.html

或者即使使用您的实现，您也可以简单地将您的类定义更改为

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

在全局styles.css 中编写样式。