PrimeNG Dropdown: Showclear displays clear icon initially

1
votes

I'm using PrimeNG's Dropdown control throughout my Angular 7 app and it works fine. I usually always set the showClear property to true, which provides a little "x" button to the right of the text in the control that, when clicked, resets the selected to none. It works great. However, I just built a form with lots of those dropdowns, and all of them display the "x" before anything is ever selected. So the initial display of the dropdown shows the x, which shouldn't be there. In other areas of the app it works as I would expect, but on this form it doesn't. The only thing that I can think of that's different is that I'm using reactive forms for this form.

enter image description here

Here's the tag for that dropdown:

      <p-dropdown placeholder="Select Type" [showClear]="true" [options]="refTypes" 
        appendTo="body" formControlName="referralType" [style]="{'width':'100%'}">
      </p-dropdown>

Any idea what I might be missing here?

1
angularprimengprimeng-dropdowns

1 Answers

2
votes

When you build form first type pass null value for formControlName="referralType".

this.form = this.formBuilder.group({
  referralType: [null]
});