如何将formControl绑定到具有对象ID的对象？ PrimeNG下拉列表

问题描述

我正在使用angular和primeNG Dropdown。

代码优先

myForm = this.fb.group({
  id: [null],name: [''],otherId: [null]
});

options = [
  {
    id: 1,name: 'option A'
  },{
    id: 2,name: 'option B'
  },{
    id: 3,name: 'option C'
  },];

<div [formGroup]="myForm">

  <!-- id -->
  <div class="id-field">
    <input type="text" formControlName="id">
  </div>

  <!-- name -->
  <div class="name-field">
    <input type="text" formControlName="name">
  </div>

  <!-- otherId,This part of code is not correct-->
  <div class="otherId-field">
    <p-dropdown [options]="options" optionLabel="name" formControlName="otherId">
    </p-dropdown>
  </div>

</div>

从代码中可以看到，我将otherId与id绑定到一个选项（标识和名称）。 当我选择“选项A”时，应将otherId设置为1。

但我目前的做法是将otherId绑定到整个对象

{
  id: number;
  name: string;
}

那是不正确的。

那么有什么解决方案可以实现我想要的吗？

解决方法

尝试以下方法

• 创建所有者属性otherSelected
• 使用(ngModelChange)
观看下拉菜单中的更改
• 使用setValue
更新表单的值

请参见下面的代码和demo on Stackblitz

<div [formGroup]="myForm">
    <div class="id-field"><input type="text" formControlName="id"></div>
    <div class="name-field"><input type="text" formControlName="name"></div>
    <div class="otherId-field">
        <p-dropdown [(ngModel)]='otherSelected' (ngModelChange)='myForm.get("otherId").setValue(otherSelected.id)' dataKey='id' [options]="options"
                optionLabel="name" [ngModelOptions]="{standalone: true}">
        </p-dropdown>
    </div>

    </div>
    <pre>{{ myForm.value | json }}</pre> {{ otherSelected | json }}

  name = "Angular " + VERSION.major;
  otherSelected: { id: number | null } = { id: null };
  myForm = this.fb.group({
    id: [null],name: [""],otherId: [null]
  });

  options = [
    {
      id: 1,name: "option A"
    },{
      id: 2,name: "option B"
    },{
      id: 3,name: "option C"
    }
  ];