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

Forerunner

What are you using for css? css / sass / scss? – Trifocal

Try .ui-inputtext { .ng-invalid { ... } } – Rento

I am using SCSS – Forerunner

@KamranKhatti it is not working :( – Forerunner

@Forerunner stackblitz example could help to debug, you may give one more try to .ui-inputtext { .ng-invalid:not(form) { ... } } – Rento

Validators.required is when a "input" is null, a number it's not null never. Are you sure that the value is equal null? or is zero -in this case therere no error-? – Excretion

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

Frieze

It is not working...your demo referer to a standard input tag not a primeNG numeric input tag – Forerunner

BINGO man !!! You made my day !!! I also added "p-inputnumber.ng-untouched.ng-invalid .ui-inputtext," to have it red when the user have not yet inserted a value – Forerunner

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

Trifocal

@Forerunner can you check now ? order and spaces are important . – Trifocal

Man it still not working...I am putting your CSS style into my :host ::ng-deep { section – Forerunner

if you cold inspect the invalid element(from DOM) and put it in the question?So that we would be clear on what classes are getting applied to element. – Trifocal

I add required details at the end of my original post – Forerunner

anyway tried with your last update but it is not working – Forerunner

when the input element is invalid will have these list of classes ui-inputtext ui-corner-all ui-state-default ui-widget ng-invalid ui-state-filled ng-dirty ng-touched – Frieze

so the correct class is` .ui-inputtext.ng-dirty.ng-invalid` and .ui-inputtext.ng-touched.ng-invalid check my answer and the demo 🙂🙂 – Frieze

@malbarmavi this is not the case in here(in the question). – Trifocal