Angular 将ngModel绑定到select控件的模型

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

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

我也试过：

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

{{person.name}

在第一次尝试中，

selectedPerson

模型引用的是

person.name

，而不是

person

对象。在第二次尝试中，它引用了一个对象，它看起来不是JSON对象

---

你知道我做错了什么吗？这可能吗

您可以使用

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

}

从'@angular/forms'导入{FormBuilder，Validators}；
导出类登录页{
构造函数（表单：FormBuilder）{
this.cities=[“Shimla”、“新德里”、“纽约”]；//城市列表
this.loginForm=form.group({
用户名：[“”，验证器。必需]，
密码：[“”，验证程序。必需]，
城市：[“”，Validators.required]//将字段设置为“required”
});
}
登录（ev）{
console.log（this.loginForm.value）；//{用户名：，密码：，城市：}
}
}

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

{{c}}
提交

---

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

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

还提出了以下问题：

---

而且

我认为目前不可能。看，这不是我想要的。使用ngControl仍然绑定到输入控件的值，而不是模型。选择下拉列表后，我将尝试将selectedPerson绑定到模型{name:''}，而不仅仅是名称。尝试更新示例以使用城市为对象的模型：{name:}。您将看到loginForm.city只是一个字符串。@pixelbits为什么不在构造函数中简单地设置

this.selectedPerson={}

，然后在选项中设置

[（ngModel）]=“selectedPerson.name”

和

[value]=person.name

？这将导致：

selectedPerson:{name:}

。这与绑定到模型不同。我可以从数据库中检索这些对象。我正在寻找ng options=“person as person.name for person in people”的等效项

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