PrimeNg Dropdown get ng-dirty class when its options update from API on page load

Question

Firstly I create from with initial values.
Then call API to fill the dropdown options.
When page loaded I notice that all dropdown have red border and have ng-dirty class before any edit from UI.

Note: I tried to make form pristine using: makeAsPristine() but nothing change.

<p-dropdown _ngcontent-fxt-c428="" formcontrolname="costCenterId" optionvalue="id" class="p-element p-inputwrapper ng-tns-c200-4 ng-untouched ng-invalid ng-star-inserted ng-dirty">

creation form:

Dropdown:

call API to fill projectpaymentMethods list:

Hello, could you present a little more code of your component and template ? — Alain Boudard, Jun 29 '22 at 08:30
I can't reproduce :( ... don't you have some `patchValue()` or `setValue()` call on your FormGroup ? — Alain Boudard, Jun 29 '22 at 12:31
you mean to call `setValue()` instead of create form in this way ? @AlainBoudard — Mouayad_Al, Jun 29 '22 at 13:42

UmpiH · Accepted Answer · 2022-07-03T15:30:39.197

2

I encountered the same issue today and I could only solve it with css magic:

::ng-deep p-dropdown.ng-untouched.ng-invalid.ng-dirty {
  .p-dropdown {
    border-color: #ced4da;
  }
}

I hope this helps.

edited Jul 03 '22 at 15:30

answered Jun 30 '22 at 09:49

UmpiH

46
5

2

I have this issue too, but this is not the way it should be solved. Because it affects on validation and in some cases which it must be red, it is not red because of setting this style. – Jalaleddin Hosseini Sep 19 '22 at 06:38

PrimeNg Dropdown get ng-dirty class when its options update from API on page load

1 Answers1