Search code examples
angularprimengprimeng-dropdowns

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

  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: enter image description here

Dropdown: enter image description here

call API to fill projectpaymentMethods list: enter image description here

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.