将ngModel绑定到选择控件的模型

Question

在Angular 1.x中,您可以将ngModel绑定到select控件的模型:

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

选择选项后,selectedPerson模型将指向person用户选择的模型.

有没有办法在Angular2中做同样的事情？

我试过以下没有运气:

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

我也尝试过:

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

在第一次尝试中,selectedPerson模型引用person.name而不是person对象.在第二次尝试中,它引用了一个似乎不是JSON对象的对象.

我有什么想法我做错了吗？这甚至可能吗？

Answer 1

<select>您可以使用以下指令在表单内实现FormBuilder：

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>}
  }

}

在你的 .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>

官方文档