Angular 2：模板驱动表单，将对象从选定元素传递到提交对象

Question

您好，我是 Angular 2 的新手，我正在寻找解决此问题的好方法。所以我有一个用户对象，里面包含另一个对象。该用户是一个界面：

export interface userModel{
  name: string,
  service: Service
}

获得了一系列用于创建新用户的服务和表单。

<form #f="ngForm" (submit)="addUser(f.value,f.valid)">
    <label for="name" class="col-sm-1 control-label">Name</label>
    <div class="col-sm-4">
        <input class="form-control" [(ngModel)]="userModel.name" #name="ngModel" name="name" ng-maxlength="49" />
    </div>
    <label class="col-sm-1 control-label">Service</label>
        <select class="form-control" name="service" [(ngModel)]="userModel.service">
            <option *ngFor='let service of services' [value]='service'>{{service.name}}</option>
        </select>
    </div>
    <button class="btn btn-primary" type="submit">Create</button>
</form>

如何将 selected 服务对象传递给用户对象？当我这样填写时，我得到：

Object{
  "name": "something",
  "service": "[Object object]"
}

所以显然我不能将对象作为值传递给 select 元素。然后我将该值设置为 Service 的 id。修改接口：

export interface UserModel{
   name: string,
   serviceId: number
}

在提交之前，我在服务数组中通过该 ID 找到服务对象，并将其设置在用户对象中，其中包含服务对象。

userModel: UserModel;
user: User;

submit(model: UserModel ){
   this.user = {
     name : model.name,
     service: this.findService(model.serviceId) 
  }
}



ngOnInti(){
 this.userModel= <userModel>{};
}

这样可以吗？有更好的方法来管理这个吗？这是工作示例，只是（手写）代码的一部分。谢谢

Answer 1

它存储了 [Object object]，因为你有 value 属性，它可以对对象进行字符串化。由于您希望在选项选择时存储对象值，因此您应该使用 [ngValue] 而不是 [value]。基本上 [ngValue] 属性坚持并保持对象价值快乐。

标记

<select class="form-control" name="service" [(ngModel)]="userModel.service">
  <option *ngFor='let service of services' [ngValue]='service'>
     {{service.name}}
  </option>
</select>

Angular 2：模板驱动表单，将对象从选定元素传递到提交对象

Angular 2 : Template driven form, pass object from selected element to submitting object

typescript

angular2-forms

angular