如何通过CSS设置无效的p-inputNumber PrimeNg表单组件的红色边框？

问题描述

我正在使用PrimeNG进行Angular项目，我正努力为某些无效的表单字段正确设置样式。

在我的表单中，我具体具有以下类型的字段：

<input id="commessa" class="p-invalid" aria-describedby="commessa-help" formControlName="commessa" type="text" pInputText required/>

与此CSS相关联：

:host ::ng-deep {

  .ng-invalid:not(form)  {
    border-left: 5px solid #a94442 !important; /* red */
    border-color: #f44336 !important ;
  }
  
}

工作正常：表单中无效的文本字段具有我期望的红色边框。

然后我有一个像这样的数字字段：

<p-inputNumber id="idOrdine" styleClass="test" formControlName="idOrdine"></p-inputNumber>

使用这种类型的字段，我无法获得无效字段的红色边框（例如，如果我有一个空的 p-inputNumber 字段，它是必填项）。

我尝试了很多事情，但是没有用。更改边框颜色的唯一方法是设置以下CSS规则：

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

但是以这种方式，它将所有输入字段设置为红色边框。

仅在无效的 p-inputNumber 字段上设置红色边框的解决方案是什么？

** EDIT-1：检查呈现字段的DOM：

<div _ngcontent-ugn-c193=""
    class="col-10">
    <p-inputnumber _ngcontent-ugn-c193=""
                    id="idOrdine"
                    styleclass="test"
                    formcontrolname="idOrdine"
                    ng-reflect-style-class="test"
                    ng-reflect-name="idOrdine"
                    class="ng-untouched ng-invalid ng-dirty">
        <input pinputtext=""
                class="ui-inputnumber-input ui-inputtext ui-corner-all ui-state-default ui-widget"
                aria-valueNow="null">
            <span ng-reflect-ng-class="[object Object]"
                    class="ui-inputnumber ui-widget">
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            </span>
        </p-inputnumber>
    </div>

与内部 input pinputtext 标记相关的CSS是：

body .ui-inputtext {
    font-size: 14px;
    color: #333333;
    background: #ffffff;
    padding: 0.429em;
    border: 1px solid #a6a6a6;
    transition: border-color 0.2s,Box-shadow 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

在这里（通过Chrome工具更改）它已更改的边框颜色...但是我只能通过Chrome开发人员工具来实现...不能通过代码...

解决方法

在全局样式文件中添加这些样式规则

.ui-inputtext.ng-dirty.ng-invalid,.ui-inputtext.ng-touched.ng-invalid{
    border: 1px solid red !important;
    background: rgba(255,0.35);
    box-shadow: 0 0 5px 1px rgba(255,0.2) inset !important;
}

已更新⭐

如果我们使用p-inputnumber组件

p-inputnumber.ng-dirty.ng-invalid .ui-inputtext,p-inputnumber.ng-touched.ng-invalid .ui-inputtext {
    border: 1px solid red !important;
    background: rgba(255,0.2) inset !important;
}

ng-touched甚至在您输入和离开它时都未添加，这似乎是组件本身的错误?

demo ??

,

这将起作用。

使用SCSS

.ng-invalid {
    .ui-inputtext { 
      border: 1px solid red; 
    }
}

使用CSS

.ng-invalid .ui-inputtext { 
  border: 1px solid red; 
}

具有ng-deep

::ng-deep .ng-invalid .ui-inputtext { 
  border: 1px solid red; 
}

or

::ng-deep .ng-invalid {
   .ui-inputtext {
  border: 1px solid red;
  }
}