CODEWITHSUNDEEP
angularprimeng
Igino Boffa
Igino Boffa

Reputation: 736

Dropdown won't open a second time

If I open a PrimeNG dropdown and select an option, it won't open a second time. I did nothing special about the code: I dynamically generate a form reading a JSON file, and this is the part regarding dropdowns: 

<p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values"></p-dropdown>

this is how I populated my item in the JSON file (an example):

 {
  "controlName": "ClientIDCodeQualifier",
  "label": "create_order_panel.client_identification",
  "type": "select",
  "values": [
  {
    "label": "None",
    "value": "0"
  },
  {
    "label": "Algorithm",
    "value": "22"
  },
  {
    "label": "Firm or Legal Entity",
    "value": "23"
  },
  {
    "label": "Natural person",
    "value": "24"
  }],
}

No errors are shown on the console when I try to open again the dropdown after I selected its value a first time, still, I can't open it again.

UPDATE

Based on the answers, this is what I'm trying to do now:

this is my HTML

<div *ngFor="let r of mainFields" class="p-grid p-col">
  <div *ngFor="let f of r" [ngClass]="getClass(f.size, f.type)">
  ....
  <p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="dummyNgModel[f.controlName]"></p-dropdown>

This is what I'm trying to do in the component:

   ngOnInit(){
   //reading the JSON file and loading all into this.mainFields
   const formControls = {};
   this.mainFields.forEach((row) => {
            row.forEach((field) => {
                let controlOptions;
                let value = ''
                if (field.defaultValue !== undefined && field.defaultValue !== '')
                    value = field.defaultValue;
                if (field.type === 'select') {
                    this.dummyNgModel[field.controlName] = value;
                }
                controlOptions = new FormControl(value);
                formControls[field.controlName] = controlOptions;
            });
        });
        this.orderForm = this.fb.group(formControls);
        //...
      }

But it still doesn't work

Upvotes: 2

Views: 1385

Answers (4)

Garryfischi
Garryfischi

Reputation: 66

Had the same problem that a PrimeNG drop-down in a dialog won't open a second time after selection.
I checked if the options still had values and they did.
There was no difference in using ngModel or name for me.

Adding appendTo="body" to the drop-down was the solution for me.

Upvotes: 4

Venkatesan
Venkatesan

Reputation: 1

Try this 

<p-dropdown [options]="cars" [(ngModel)]="selectedCar1">

export class DropdownDemo {

cars: SelectItem[];
selectedCar1: string;   

constructor() {

    this.cars = [
        {label: 'Audi', value: 'Audi'},
        {label: 'BMW', value: 'BMW'},
        {label: 'Fiat', value: 'Fiat'},
        {label: 'Ford', value: 'Ford'},
        {label: 'Honda', value: 'Honda'},
        {label: 'Jaguar', value: 'Jaguar'},
        {label: 'Mercedes', value: 'Mercedes'},
        {label: 'Renault', value: 'Renault'},
        {label: 'VW', value: 'VW'},
        {label: 'Volvo', value: 'Volvo'}
    ];

}

}

Upvotes: 0

Santironhacker
Santironhacker

Reputation: 1004

Can you give more details on how you build the form?

I'd suggest that you make sure that the formControlName is part of the form you build:

let form = formBuilder.group({
    ClientIDCodeQualifier: ['']
})

An workaround would be to introduce the NgModel value, and then when submitting your form, you set the stored value:

<p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="selectedValue"></p-dropdown>

ngOnSubmit() {
   this.form.controls['ClientIDCodeQualifier'].setValue(selectedValue);
}

And then verify if the form is valid. Hope it helps!

Upvotes: 0

Saad Maqbool
Saad Maqbool

Reputation: 295

I think you haven't NgModel tag to bind and save to selected value. That's why when you select value for the first time. It crashes because there is no variable to bind on

Upvotes: 0

Related Questions