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

Posted 2023-02-22

【中文标题】如何通过 CSS 设置无效 p-inputNumber PrimeNg 表单组件的红色边框？

【英文标题】：How to set the red border of invalid p-inputNumber PrimeNg form component via CSS?

【发布时间】：2020-12-15 13:58:33

【问题描述】：

我正在使用 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 开发工具...而不是通过代码...

【问题讨论】：

你用的是什么css？ css / sass / scss？

试试.ui-inputtext .ng-invalid ...

我正在使用 SCSS

@KamranKhatti 它不工作:(

@AndreaNobili stackblitz 例子可以帮助调试，你可以再试一次.ui-inputtext .ng-invalid:not(form) ...

【参考方案1】：

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

.ui-inputtext.ng-dirty.ng-invalid , .ui-inputtext.ng-touched.ng-invalid
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 5px 1px rgba(255, 0, 0, 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, 0, 0.35);
    box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;

ng-touched 没有添加，即使你输入和离开它，这似乎是组件本身的错误?‍?

demo ??

【讨论】：

它不工作...您的演示引用到标准输入标签而不是 primeNG 数字输入标签

宾果人！！！你让我今天一整天都感觉很好 ！！！我还添加了“p-inputnumber.ng-untouched.ng-invalid .ui-inputtext”，以便在用户尚未插入值时将其变为红色

【参考方案2】：

这会起作用。

使用 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;
  

【讨论】：

@AndreaNobili 您现在可以查看吗？顺序和空格很重要。

它仍然无法正常工作...我将您的 CSS 样式放入我的 :host ::ng-deep 部分

如果您冷检查无效元素（来自 DOM）并将其放入问题中？这样我们就可以清楚哪些类将应用于元素。

我在原始帖子的末尾添加了所需的详细信息

无论如何尝试了您的最后一次更新，但它不起作用