How to set the red border of invalid p-inputNumber PrimeNg form component via CSS?

Question

I am working on an Angular project using PrimeNG and I am going mat trying to correctly set the style for some invalid form field.

In the specific in my form I have field of this type:

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

with this CSS associated:

:host ::ng-deep {

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

it works fine: the invalid text fields of my form have the red border as I expected.

Then I have numeric field like this:

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

with this type of field I can't obtain red border for invalid field (for example if I have an empty p-inputNumber field that is requiered).

I have tried a lot of things but it is not working. The only thing that changed my border color was set this CSS rule:

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

but in this way it set all the input field with the red border.

What could be a solution to set the red border only on the invalid p-inputNumber fields?

**EDIT-1: Inspecting the DOM the rendered field is:

<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>

The CSS related to the inner input pinputtext tag is:

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;
}

changing here (by Chrome tool) the border color it is changed...but I can do it only by Chrome dev tools...not via code...

Answer 1

in global style file add these style rule

.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;
}

updated ⭐

in case we use p-inputnumber component

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;
}

the ng-touched not added even when you enter and leave it that seem an error from the component itself ‍

demo

Answer 2

This will work.

With SCSS

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

With CSS

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

With ng-deep

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

or

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