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

Question

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 <select> directive. I have a FormBuilder that is initialized like this:

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

The Problem is the location_fk property. I am trying to fill the value of this property via the following <select> 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>
        </select>
    </div>
</form>

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

slaesh · Accepted Answer · 2016-09-21 06:45:26Z

1

Did you tried this?

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

or

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

answered Sep 21, 2016 at 6:45

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fr3ak1n0ut Over a year ago

Thank you, that did the trick! thought that i tried that already, kinda confused that didn´t work :P

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related