Autocomplete: ng-invalid and ng-dirty immediatly on startup

[jakobschadeUCS]

Describe the bug

When I set the required attribute of the p-autocomplete component it is already on startup marked as dirty and invalid. So it has the red border without any user interaction.

Environment

Angular & PrimeNG 16

Reproducer

No response

Angular version

16.2.10

PrimeNG version

16.7.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.18.0

Browser(s)

Chrome

Steps to reproduce the behavior

<p-autoComplete
          #complete
          name="newAddress"
          [(ngModel)]="selectedAddress"
          [suggestions]="(suggestions$ | async) ?? []"
          (completeMethod)="completeAddress($event)"
          [required]="true"
          [forceSelection]="true"
          optionLabel="address"
        ></p-autoComplete>

selectedAddress: Address | undefined = undefined;

Expected behavior

it should not have the invalid class on startup.

[SoyDiego]

Maybe I'm wrong, but I think is not a problem of PrimeNG.

The default behavior you're observing is actually an aspect of Angular. When a required field is initially empty, Angular marks it as ng-dirty and ng-invalid on startup. This is because, by default, Angular assumes that required fields should be filled in by the user.
To have more control over the validation behavior, I recommend encapsulating the component within a FormGroup using FormBuilder.

https://stackoverflow.com/questions/70857966/angular-reactive-form-is-invalid-on-page-load
https://stackoverflow.com/a/22443959/8818885

[miguelchico]

Hi @jakobschadeUCS, could you try the same with PrimeNg version 16.6.x?

I’ve been facing a lot of issues with forms since I updated to 1.7.x

[cetincakiroglu]

Hi,

We're aware of the issues with the form component in 16.7.x, we'll address all of them within the 16.8.0 update. Could you please share a stackblitz reproducer so we can test if it happens in the fixed version of the autocomplete?

[miguelchico]

Hi,

We're aware of the issues with the form component in 16.7.x, we'll address all of them within the 16.8.0 update. Could you please share a stackblitz reproducer so we can test if it happens in the fixed version of the autocomplete?

Any ETA for that version @cetincakiroglu ?

[cetincakiroglu]

Hi,

We're aware of the issues with the form component in 16.7.x, we'll address all of them within the 16.8.0 update. Could you please share a stackblitz reproducer so we can test if it happens in the fixed version of the autocomplete?

Any ETA for that version @cetincakiroglu ?
We are planning to release 16.8 within 3 days

[ProfEibe]

Here is a stackblitz example.
It works when using 16.6, hopefully it will work again in 16.8 :)
https://stackblitz.com/edit/stackblitz-starters-oyjb3c?file=src%2Fapp%2Fapp.component.html

[ProfEibe]

@SoyDiego this did not happen in 16.6. there the p-autocomplete tag has the classes "ng-untouched ng-pristine ng-invalid"

sadly it was not fixed in 16.8. there are still the classes "ng-untouched ng-invalid ng-dirty" on the p-autocomplete tag.

@cetincakiroglu you can try it in my stackblitz example above. maybe it has something todo with the usage of angulars signals in the primeng code?

[cetincakiroglu]

Hi,

16.8 is now available could you please check it and give feedback if it happens in 16.8?

[ProfEibe]

no, sadly it is still not fixed in the new version.
I've already updated the stackblitz example: https://stackblitz.com/edit/stackblitz-starters-oyjb3c?file=src%2Fapp%2Fapp.component.html

in 16.6 its pristine on startup in 16.8 it is dirty.

[cetincakiroglu]

@ProfEibe
Thanks a lot I'll check it

[ProfEibe]

Thanks a lot, it's working!

(ps i'm the same guy as the creator, but used the wrong profile, so thanks from him too 💯)