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

Question

我正在使用 angular 和 primeNG 下拉菜单。

代码优先

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 和名称），它是 id。 当我select'option A'时，otherId应该设置为1.

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

{
  id: number;
  name: string;
}

这是不正确的。

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

Answer 1

试试下面的方法

• 创建持有人属性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"
    }
  ];