Question

在Angular 1.x中，您可以将ngModel绑定到选择控件的模型：

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

Official Documentation

Answer 2

尝试将对象作为选定值传递给ngModel时遇到同样的问题。我看到的另一种解决方案是使用传递给字符串的对象的字符串化版本，但这非常脏。

最后，我决定在对象中创建一个单独的索引，该索引将传递给ngModel。这用于选择对象并执行操作。

此问题也出现在：https://github.com/angular/angular/issues/4843 和How to use select/option/NgFor on an array of objects in Angular2

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

2 个答案: