Fr3ak1n0ut Fr3ak1n0ut - 4 months ago 29
TypeScript Question

How to bind an objects property to a Angular2 form item using select

I have a problem with angular forms.
I am trying to create a form that uses data from a mongo collection and provides it via the

I have a FormBuilder that is initialized like this:

ngOnInit() {
this.addForm ={
department_pk: ['', Validators.required],
name_c: ['', Validators.required],
location_fk: [],
expirationdate_d: [],

The Problem is the
property. I am trying to fill the value of this property via the following
statement (I left the other form groups (for name_c, ...) out of this code snippet):

<form [formGroup]="addForm">
<div class="form-group">
<label>Location (*): </label>
<select class="form-control" formControlName="location_fk" (ngModelChange)="onChange($event)" name="select">
<option [ngValue]="i" *ngFor="let i of locations">{{i.name_c}}</option>

I managed to extract the value of
, however, I want to extract a property,
, from the collection, while still displaying
in the selection that is visible for the user. Is there any way to do this?


Did you tried this?

<option [ngValue]="i['propName']" *ngFor="let i of locations">{{i.name_c}}</option>


<option [ngValue]="i.propName" *ngFor="let i of locations">{{i.name_c}}</option>