Angular 2: a template driven form to pass an object from a selected element to an object

Question

Hello, I am new to Angular 2, and I am looking for a good way to solve this from some time. So I have a user object that contains another object inside. This user is the interface:

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

Got an array of services and forms to create a new user.

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

How to pass the selected service object to the User object? When I fill it this way, I get:

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

Therefore, obviously, I cannot pass an object as a value to select an element. Then I set this value to the service id instead. Changed interface:

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

And before sending, I find the service object with this identifier in the services array and set it in the User object with the service object inside.

userModel: UserModel;
user: User;

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



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

? ? (handwriten).

Answer 1

[Object object], value, . Object , [ngValue] [value]. [ngValue] .

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