在 PrimeNG 中，如何将 p-dropdown 选定值绑定到表单控件？答案

【问题标题】：In PrimeNG, how do I bind a p-dropdown selected value to a form control?在 PrimeNG 中，如何将 p-dropdown 选定值绑定到表单控件？
【发布时间】：2022-08-18 00:29:25
【问题描述】：

我正在使用 Angular 13 和 PrimeNG 13。我想将下拉列表绑定到表单控件。在我的编辑表单中，我使用了这样的 p-dropdown

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

我的 \"options\" 值是一个看起来像这样的对象数组......

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

在我的服务文件中，我触发了使用正确值设置表单的函数

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

但是，当我提交表单时，表单控件的 \"clientId\" 字段设置为对象 {name: \'Mike\', customerId: 3}，而不仅仅是 ID。如何调整我的 p-dropdown 使其仅绑定 ID 而不是整个对象？

editClientObj 是哪种对象？
它的类型为“ClientOrder”。老实说，我宁愿没有这个。如果我在表单中设置值（即 formbuilder 组），然后绑定到表单，我应该不需要将 \"ngModel\" 设置为附加对象，对吗？
您可以将 editClientObj 声明为字符串并在 editClientObj 中自动实现您想要的

标签： angular primeng angular13 form-control primeng-dropdowns

【解决方案1】：

您可以使用optionValue 输入绑定来选择 id 值

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

笔记：您不应该将反应式表单和模板驱动表单混合在一起。

For More Info

Prime Ng Official Doc

【讨论】：

@Chellappan வ 的答案似乎很好。也可以在值绑定一章下查看官方documentation。
谢谢。尽管这确实将值正确绑定到表单控件，但它引入了一个新问题——我可能想要编辑的最初选择的值不再被选中。始终选择第一个（占位符）值。
你为什么同时使用响应式表单和模板驱动表单，你能用一个试试吗？
这两种选择我都没有成功，但这可能是因为我对 PrimeNG 不太了解。我会对绑定到表单控件并显示表单构建器中包含的属性的任何解决方案感到满意。
你能检查一下吗？它工作正常：stackblitz.com/edit/primeng-dropdown-demo-ug6c6b?file=src/app/…。

【解决方案2】：

html代码：

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

.ts 组件代码：

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
    })
  }

}

【讨论】：

我看到您正在添加额外的字段“selectedClient”，但我的“this.form = this.formbuilder.group({ ...”中已经有了这个值，所以感觉就像我在两个地方跟踪那个值如果我添加一个字段“selectedClient”。有没有办法将控件的值绑定到表单组的值？
您可以将其从代码中删除，请参阅编辑。选定的值绑定到表单的“selClient”属性。