在PrimeNG中，如何将p下拉选择的值绑定到表单控件

Question

我使用的是Angular 13和PrimeNG 13。我想将下拉列表绑定到表单控件。在我的编辑表单中，我使用了一个类似的p下拉列表

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

我的"选项"；value是一个对象数组，看起来像这样。。。

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

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

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

然而，当我提交我的表单时，表单控件的"；clientId"；字段设置为objecct，｛name:'Mike'，customerId:3｝，而不仅仅是ID。如何调整我的p下拉列表，使其只绑定ID而不绑定eentire对象？

Answer 1

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

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

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

了解更多信息

吴总理官方文件

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