PrimeNG Controls are not showing Invalid

Question

We are using PrimeNG autoComplete component in our app. we would show all valid invalid with "red". By default, Angular mark all input fields with ng-valid style class unless we have any validation which makes the control invalid. This seems to be standard in Angular. PrimeNg Control are not behaving the same.

Now if I select a value from location autocomplete dropdown thn delete it same for the phone type in a number then deleted , validations are no longer triggered

HTML

<div class="form-group col-xs-3 col-md-3"
                                           [ngClass]="{
                                         'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                         !ersaForm.get('phone').valid
                                         }">

                                        <label for="phoneId" class="control-label">Phone</label><br />
                                        <p-inputMask mask="(999) 999-9999" formControlName="phone" (onBlur)="checkValidity();" unmask="true"  styleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>

                                    </div>
  <div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':(ersaForm.get('location').touched || ersaForm.get('location').dirty ) &&
                                     !ersaForm.get('location').valid
                                     }">
                                    <label for="locationId" class="control-label">Location</label>
                                    <p-autoComplete formControlName="location" id="locationId" (onBlur)="checkValidity()" [suggestions]="iOffice" forceSelection="true" placeholder="Office (required)" inputStyleClass="form-control" (completeMethod)="searchOffice($event)" [style]="{'width': '100%','display': 'inline-flex','height':'34px'}" field="ORG_BRH_ADDR_LN" dataKey="ORG_BRH_NO" [dropdown]="true"></p-autoComplete>

                                </div>

TS Code

this.ersaForm = this._fb.group({
            phone: new FormControl('', Validators.required),
            location: ['', Validators.required],

            });

        checkValidity(): void {
                Object.keys(this.ersaForm.controls).forEach((key) => {
                    console.log('inside validation');
                    this.ersaForm.controls[key].markAsDirty;
                //    this.ersaForm.controls[key].
                });
            }

you will get a better response if you put a sample stackblitz project — Happy Coder, Aug 26 '20 at 23:38

score 1 · Answer 1 · answered Oct 05 '21 at 15:27

This is 2 years old now, but I hit this issue and worked out a solution. Hope it helps others out.

I'm using v.12 of PrimeNG.

For p-dropdowns at least, it appears that the border is changed to red when the element has both ng-invalid and ng-dirty classes applied to it. I needed the border to be red only when invalid. I added the following override, which solved the issue for me.

p-dropdown.ng-invalid > .p-dropdown {
    border-color: #f44336; // This color HEX value comes from PrimeNG.
}

You should consider using exported variables for PrimeNG theme colors, so you don't have to change this manually — Destabilizator, Jan 25 '23 at 19:42

PrimeNG Controls are not showing Invalid

1 Answers1