小编dev*_*ess的帖子

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

你好,我是Angular 2的新手,我正在寻找一种解决这个问题的好方法.所以我的用户对象里面包含另一个对象.该用户是一个界面:

export interface userModel{
  name: string,
  service: Service
}
Run Code Online (Sandbox Code Playgroud)

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

<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>
Run Code Online (Sandbox Code Playgroud)

如何将选定的服务对象传递给User对象?当我这样填充它时,我得到:

Object{
  "name": "something",
  "service": "[Object object]"
}
Run Code Online (Sandbox Code Playgroud)

所以显然我不能将对象作为值传递给select元素.然后我将该值设置为Service的id.修改界面:

export interface UserModel{
   name: string,
   serviceId: number
}
Run Code Online (Sandbox Code Playgroud)

在提交之前,我通过服务数组中的id找到Service对象,并将其设置在User对象中,其中包含Service对象.

userModel: UserModel;
user: User;

submit(model: UserModel ){
   this.user = {
     name : model.name,
     service: …
Run Code Online (Sandbox Code Playgroud)

typescript angular2-forms angular

4
推荐指数
1
解决办法
3262
查看次数

标签 统计

angular ×1

angular2-forms ×1

typescript ×1