Issue
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?
Solution
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.
Answered By - Chellappan வ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.