Angular 验证和 PrimeNG 组件的 CSS 问题答案

【问题标题】：CSS Problem with Angular validation and PrimeNG componentsAngular 验证和 PrimeNG 组件的 CSS 问题
【发布时间】：2019-04-10 07:53:06
【问题描述】：

当我在 PrimeNG 组件中使用“required”属性时，我遇到了以下问题：

问题是，.ng-invalid 的 css 样式在 p-calendar 组件上，而不是在输入本身上。

有没有办法将ng-invalid 类从组件移动到组件内部的输入？它会轻松解决我的问题吗？

感谢您的帮助！

【问题讨论】：

你为什么不简单地使用.ng-invalid input选择输入？
问题依旧：5px边框在组件上，而不是组件内的输入

标签： angular primeng core-ui

【解决方案1】：

我也有同样的问题。诀窍是将边框从组件移动到输入。这不是 Primeng 组件的详尽列表，我会在遇到它们时添加它们。

p-calendar.ng-invalid,
p-dropdown.ng-invalid,
p-selectbutton.ng-invalid {
  border-left: none;

  .ui-calendar input,
  .ui-dropdown,
  .ui-selectbutton {
    border-left: 5px solid red;
  }
}

【讨论】：