CODEWITHSUNDEEP
angularformsangular2-formbuilder
Andrea
Andrea

Reputation: 795

Custom value for formControlName

I need to fill a form control with an item chosen among many. Because of the high number of options, I preferred a modal to a simple <select>.

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

The modal is able to display the available items, let the user select one of them, and update the form.item property accordingly. However, because the selected item is a complex object (and not a simple string), my form display an ugly [Object object]. How can I tell the form to show a specific property of item?

This is the object I'm trying to display:

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

I'd like to show the property description of the object.

Upvotes: 2

Views: 2446

Answers (1)

pouyada
pouyada

Reputation: 377

I guess you should do something like this:

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

or try to print out your object and see what's in it

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

or

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

Upvotes: 2

Related Questions