Binding ngModel to a model for a select control

Question

In Angular 1.x, you could bind ngModel to a model for a select control:

<select ng-model="selectedPerson" 
   ng-options="person as person.name for person in people">
</select>

When an option is selected, the selectedPerson model will point to the person model that the user selected.

Is there a way to do the same thing in Angular2?

I've tried the following with no luck:

<select [(ngModel)] = "selectedPerson"> 
     <option *ngFor="#person of people"> {{ person.name }}</option>
</select>

I've also tried:

<select [(ngModel)] = "selectedPerson"> 
     <option *ngFor="#person of people" [value]="person"> {{ person.name }}</option>
</select>

In the first attempt, selectedPerson model references person.name rather than the person object. And in the second attempt, it is referencing an object, which doesn't appear to be a JSON object.

Any ideas what I am doing wrong? Is this even possible?

Solution 1

You could implement a <select> inside a form using the FormBuilder directive:

import { FormBuilder, Validators } from '@angular/forms';

export class LoginPage {

  constructor(form: FormBuilder) {
    this.cities = ["Shimla", "New Delhi", "New York"]; // List of cities
    this.loginForm = form.group({
      username: ["", Validators.required],
      password: ["", Validators.required],
      city: ["", Validators.required] // Setting the field to "required"
    });
  }

  login(ev) {
    console.log(this.loginForm.value); // {username: <username>, password: <password>, city: <city>}
  }

}

In your .html:

<form [ngFormModel]="loginForm" (submit)="login($event)">

    <input type="text" ngControl="username">
    <input type="password" ngControl="password">
    <select ngControl="city">
        <option *ngFor="#c of cities" [value]="c">{{c}}</option>
    </select>
    <button block type="submit" [disabled]="!loginForm.valid">Submit</button>

</form>

Official Documentation

Solution 2

I have the same issue trying to pass an object as selected value to a ngModel. An alternative solution I see is to use a stringified version of the object passing to a string, but that is very dirty.

In the end I have decided to create a separate index in the object which gets passed to the ngModel. This I use to select the Object and do the action.

Also issue raised in : https://github.com/angular/angular/issues/4843 and How to use select/option/NgFor on an array of objects in Angular2

Comments

[Chandermani]

I don't think it is possible at present. See this github.com/angular/angular/issues/4843