formControlName的自定义值

Question

我需要填写一个表单控件，其中包含许多项目。由于选项数量很多，我更喜欢简单<select>的模态。

<form [formGroup]="form">
    <label>Item</label>
    <input formControlName="item" [readOnly]="true" (click)="showModal()"></input>    
</form>

模式可以显示可用项目，让用户选择其中一项，并相应地更新form.item属性。 但是，因为所选项目是一个复杂的对象（而不是一个简单的字符串），我的表单显示一个丑陋的[Object object]。如何告诉表单显示项目的特定属性？

这是我试图展示的对象：

export class Item {
    id: number;
    owner: string;
    description: string;
}

我想显示对象的属性description。

Answer 1

我想你应该这样做：

 <input formControlName="item" placeholder="form.controls['item'].value.description" [readOnly]="true" (click)="showModal()"></input>    

或尝试打印出您的对象以查看正在发生的事情

{{form.controls['item'].value | json}} 

或

{{form.controls['item'].value.description}}