InputText: invalid property is not respected - overriden by ng-invalid style

Describe the bug

When using the invalid property of a pInputText (introduced in v20) with an Angular FormControl, the .ng-touched class is applied immediately when validation fails. This results in a red border being shown before we intend to display it — which we expected to control via the invalid property.

Minimal code to reproduce:

control = inject(NonNullableFormBuilder).control('', [Validators.required]);

<!-- NOTE: We want to show an error state when the control is invalid and touched -->
<input
    pInputText
    [formControl]="control"
    [invalid]="control.invalid && control.touched"
  />

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/mxngo3su

Environment

Win 11

Angular version

20.1.2

PrimeNG version

v20

Node version

20.19.2

Browser(s)

Chrome 138

Steps to reproduce the behavior

1. Click into the input
2. Start writing something "xy" and remove it (but still focusing the input!). As soon as the "x" is removed the input shows a red border (Styled via .p-inputtext.ng-invalid.ng-dirty)
3. Click outside the input, the control is now touched and the p-invalid class is successfully set by primeng

Expected behavior

The input should only show a red border when the invalid condition is met.