Angular14+PrimeNG14：如何为未输入的p-calendar设置红色边框？

你的代码没生效的核心原因是：p-calendar是封装组件，你给组件标签加的border-red-500类只会作用在组件的根元素上，而实际的输入框是组件内部的子元素（比如带.p-inputtext类的元素），所以样式无法直接生效。以下是几种可行的解决方法：

方法一：样式穿透+动态类 #

1. 保留你现有的模板代码，确保submitted变量在表单提交时被设为true，且表单控件已添加required验证：

// 组件类中初始化表单
this.form = this.fb.group({
  myDate: [null, Validators.required]
});

// 提交方法
onSubmit() {
  this.submitted = true;
  if (this.form.valid) {
    // 执行提交逻辑
  }
}

2. 在组件的CSS/SCSS文件中添加样式穿透规则，定位到组件内部的输入框：

::ng-deep .border-red-500 .p-inputtext {
  border: 1px solid #ef4444 !important; // tailwind的border-red-500对应色值
}

方法二：直接根据表单验证状态设置样式 #

不需要额外添加动态类，直接通过表单控件的invalid和submitted/touched状态来定位：

::ng-deep .ng-invalid.ng-submitted .p-inputtext,
::ng-deep .ng-invalid.ng-touched .p-inputtext {
  border-color: #ef4444 !important;
}

这种方式更简洁，只要控件验证不通过且表单已提交/控件已被触摸，输入框就会自动显示红色边框。

方法三：使用PrimeNG的自定义样式类 #

通过styleClass属性动态传递类名，再配合样式穿透：

<p-calendar
  [showIcon]="true"
  [styleClass]="submitted && form.get('myDate')?.hasError('required') ? 'invalid-date' : ''"
  formControlName="myDate">
</p-calendar>

对应的样式：

::ng-deep .invalid-date .p-inputtext {
  border-color: red !important;
}

注意事项 #

• 确保::ng-deep的使用：Angular中组件样式默认隔离，::ng-deep可以穿透到子组件内部的DOM元素。
• 如果样式优先级不够，可添加!important强制覆盖PrimeNG的默认样式。
• 确认表单的required验证已正确绑定到myDate控件上。

内容的提问来源于stack exchange，提问作者Dave