In PrimeNG, how do I bind a p-dropdown selected value to a form control?

Question

I'm using Angular 13 and PrimeNG 13. I would like to bind a dropdown to a form control. In my edit form, I use a p-dropdown like so

            <p-dropdown [options]="clients" placeholder="Select a Client" optionLabel="name"
                [(ngModel)]="editClientObj"  
                dataKey="clientId" 
                formControlName="clientId"></p-dropdown>

My "options" value is an array of objects that look like this ...

[{name: 'Mike', clientId: 3}, { ... }]

In my service file, I trigger the function that sets up the form with the proper values

  edit(obj:ClientOrder){
    this.editClientObj = obj;
    ...
    this.form = this.formbuilder.group({
    ...
      clientId: [obj.clientId, Validators.required]
    });

However when I submit my form, the form control's "clientId" field is set to the objecct, {name: 'Mike', customerId: 3}, instead of just the ID. How do I adjust my p-dropdown so that it only binds the ID and not th eentire object?

It's of type "ClientOrder". To be honest, I would prefer not to have this. If I set the value in the form (i.e. the formbuilder group), and then I bind to the form, I shouldn't need to set "ngModel" to an additional object, right? — Dave, Aug 11 '22 at 20:10
you could declare editClientObj as a string and automatically achieve what you desire in editClientObj — Fseee, Aug 11 '22 at 20:59

Chellappan வ · Accepted Answer · 2022-08-11T14:39:47.493

1

You could use optionValue input binding to select id value

<p-dropdown [options]="clients" placeholder="Select a Client" optionLabel="name"
                [(ngModel)]="editClientObj"  
                dataKey="clientId"  optionValue="clientId"
                formControlName="clientId"></p-dropdown>

Note: You should not mix reactive and template driven form together.

For More Info

Prime Ng Official Doc

edited Aug 11 '22 at 14:39

answered Aug 11 '22 at 14:13

Chellappan வ

23,645
3
29
60

The answer from @Chellappan வ seems fine. You can also check the official [documentation](https://www.primefaces.org/primeng/dropdown) under the chapter Value Binding. – riorudo Aug 11 '22 at 14:33
Thanks. Although this does properly bind the value to the form control, it introduces a new problem -- the originally selected value that I might want to edit is no longer selected. The first (placeholder) value is always selected. – Dave Aug 11 '22 at 16:34
2

Why are you using reactive form and template driven form together can you please use one and try? – Chellappan வ Aug 12 '22 at 01:34
I'm not having success with either option but it's probably because I'm not too knowledgeable with PrimeNG. I'd be happy with any solution that binds to a form control and also displays the property contained in my form builder. – Dave Aug 17 '22 at 12:58
Can you please check this Here it's working fine :https://stackblitz.com/edit/primeng-dropdown-demo-ug6c6b?file=src/app/app.component.ts. – Chellappan வ Aug 17 '22 at 13:04
If possible please reproduce the issue in this stackblitz – Chellappan வ Aug 17 '22 at 13:05
Would it be possible to have your demo have a preselected value in the drop down? – Dave Aug 18 '22 at 18:12
@Dave Updated https://stackblitz.com/edit/primeng-dropdown-demo-ug6c6b?file=src%2Fapp%2Fapp.component.ts please check – Chellappan வ Aug 19 '22 at 02:00
The demo doesn't appear to be working. When I change to try and select the other Mike option ("Mike 2") by changing "clientId = new FormControl(3); " to "clientId = new FormControl(2); ", it is not selecting "Mike 2". – Dave Aug 19 '22 at 16:38
Without dataKey binding it's working fine. Any specific reason using dataKey input property? – Chellappan வ Aug 19 '22 at 17:32
dataKey was/is not a requirement. I confirmed it worked on your demo. thx! – Dave Aug 20 '22 at 17:21

Fseee · Answer 2 · 2022-08-17T16:29:25.910

0

Html code:

<form [formGroup]="form">
  <p-dropdown [options]="clients" [autoDisplayFirst]="false" optionLabel="name"
    formControlName="selClient" optionValue="clientId">
  </p-dropdown>
</form>

.ts component code:

export class DropdownBindingComponent implements OnInit {

  clients: Client[];
  form: FormGroup = new FormGroup({});

  constructor(private fb: FormBuilder) {
    this.clients = [
      { name: 'Mike', clientId: 3 },
      { name: 'George', clientId: 4 },
      { name: 'Steph', clientId: 5 }
    ];
  }

  ngOnInit(): void {
    
    this.form = this.fb.group({
      selClient: [null, Validators.nullValidator]
    })

    this.form.valueChanges.subscribe((data) => {
      console.log("data change", data['selClient']);//output 3,4 or 5
    })
  }

}

edited Aug 17 '22 at 16:29

answered Aug 17 '22 at 14:23

Fseee

2,476
9
40
63

I see you're adding the extra field "selectedClient", but I already have this value in my "this.form = this.formbuilder.group({ ..." so it feels like I'm tracking that value in two places if I add a field "selectedClient". Is there any way to bind the value of the control to the form group's value? – Dave Aug 17 '22 at 16:22
You can remove it from the code, see edit. Selected value is binded to 'selClient' prop of the form. – Fseee Aug 17 '22 at 16:28

In PrimeNG, how do I bind a p-dropdown selected value to a form control?

2 Answers2