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

Issue

1. Firstly I create from with initial values.
2. Then call API to fill the dropdown options.
3. 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:

Solution

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.

Answered By - UmpiH