如何设置p-calendar被触碰且值无效时显示红色边框

实现方案 #

你的写法没有生效的核心原因是：p-calendar组件的可见边框默认是作用在组件内部.p-calendar类的容器元素上，你直接给p-calendar宿主元素加边框的样式优先级低于PrimeNG内置样式，无法覆盖默认效果。

你可以直接修改你的SCSS代码中触碰失效状态的选择器即可，修改后的完整代码如下：

:host ::ng-deep .overtime-log-form {
  .col-12 {
    padding: 0;
  }
  &-working-hours {
    display: flex;
    .field {
      &:first-child {
        margin-right: 2.0625rem;
      }
      .p-calendar {
        max-width: 81px;
        border:solid #e7e7e7 1px;
        border-radius: 5px;
      }
      // 触碰且值无效时显示红色边框
      p-calendar.ng-touched.ng-invalid .p-calendar {
        border-color: #ac2525;
      }
    }
  }
  #reason {
    min-height: 7.6rem;
    max-height: 7.6rem;
    overflow-y: auto!important;
  }
}

额外校验点 #

需要确认你的p-calendar组件已经绑定了Angular表单控制器（使用formControlName或者ngModel），这样Angular才会自动给p-calendar宿主元素添加ng-touched、ng-invalid这类状态类，样式才能正常触发。

内容的提问来源于stack exchange，提问作者Damith F'do