How to set the value of a dropdown (primeNg) taking only one property of the object

Question

I created a dropdown field where I want to send only a number as a select value. But to list the options dropdown created an object name: string, id: number to render the name on the screen. I would like to receive as value only this object id. Is there any way to do this?

form.componentts.:

interface ITemplatePDF {
  id: number;
  name: string;
}

  public templates_pdf: ITemplatePDF[];
  public selectedTemplatePDF: ITemplatePDF;

    this.templates_pdf = [
      { name: "Sem condições", id: 1 },
      { name: "Max. 2 condições", id: 2 },
      { name: "Max. 5 condições", id: 3 },
      { name: "5+ condições", id: 4 },
    ];

form.component.html:

<p-dropdown
   formControlName="template_pdf"
   optionLabel="name"
   [options]="templates_pdf"
   [(ngModel)]="selectedTemplatePDF"
    placeholder="Selecione o template da tabela PDF"
 >
</p-dropdown>

OBS: I saw in the documentation of the primeNg that now stops for a prop optionValuethat would solve my problem, but this is an old and complex project that’s using V8.2.14, and upgrading breaks down several components. Someone’s been through it and has a solution?

Answer 1

You can format the object in the format that primeNG expects {label, value}. Being the label indicating the name that will appear in the field, and value the return value.

this.templates_pdf = [
      { label: "Sem condições", value: 1 },
      { label: "Max. 2 condições", value: 2 },
      { label: "Max. 5 condições", value: 3 },
      { label: "5+ condições", value: 4 },
    ]