typescript - Angular 2 issue while Posting Form -

i trying submit form has 2 input field , 1 select list when submit form select list value 0. have clue doing wrong.i post form api getting value correct instead of select list value.

html

<form class="form-horizontal" id='myform' role="form" [ngformmodel]="inviteuserform" (ngsubmit)="invite(inviteuserform.value)">                        <div class="input-group margin-bottom-20">                          <span class="input-group-addon"><i class="fa fa-user"></i></span>                          <input type="text" [(ngmodel)]='inviteuser.username'class="form-control" id="username" placeholder="name" autofocus                                 [ngformcontrol]="inviteuserform.controls['username']"                                 #username="ngform" />                      </div>                      <div class="input-group margin-bottom-20">                          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>                          <input type="email" [(ngmodel)]='inviteuser.email' class="form-control" id="email" placeholder="email" autofocus                                 [ngformcontrol]="inviteuserform.controls['email']"                                 #email="ngform" />                      </div>                        <div class="input-group margin-bottom-20">                          <span class="input-group-addon"><i class="fa fa-glass"></i></span>                          <select [(ngmodel)]='inviteuser.partner' class="form-control" [ngformcontrol]="inviteuserform.controls['partner']"                                 #partner="ngform">                              <option *ngfor="let p of _partners" [value]="p.id">{{p.name}}</option>                          </select>                      </div>                      <button type="button" class="btn-u btn-u-default margin-right-5" data-dismiss="modal">close</button>                      <button type="submit" [disabled]="!inviteuserform.valid" class="btn-u pull-right">invite</button>                  </form>

component

import { component, inject } '@angular/core'; import { ngform }    '@angular/forms'; import { form_providers, controlgroup, formbuilder, validators } '@angular/common'; import {userservice} '../../services/user.service'; import {oninit} '@angular/core'; import {observable} 'rxjs/observable'; import { router }  '@angular/router'; import { httphelper} '../../utils/httphelper.utils'; import 'rxjs/rx'; import {invitemodel} '../../models/invite.model'; @component({     selector: 'invite-user',     templateurl: '../../app/components/user/invite-user.html',     providers: [userservice, httphelper] })  export class inviteusercomponent {     inviteuserform: controlgroup;     private _partners: observable<any[]>;     private name: string;     private email: string;     private partner: number;     private _data: observable<any[]>;     inviteuser: invitemodel;      constructor(         @inject(formbuilder) public formbuilder: formbuilder,         @inject(userservice) private _userservice: userservice) {          this.inviteuser = new invitemodel();         this.inviteuserform = this.formbuilder.group({             'username': [this.inviteuser.username, validators.required],             'email': [this.inviteuser.email, validators.required],             'partner': [this.inviteuser.partner, validators.required]         });     }     ngoninit() {         this._userservice.partners()             .subscribe(data => this._partners = data,             error => {                 console.log("error while retriving partners");                 this._userservice.handleerror(error);             }             );     }      invite(inviteuser) {         console.log(inviteuser);         this._userservice.inviteuser(inviteuser)             .subscribe(data => {                 console.log(data);                 this._data = data;             },             error => {                 console.log("error while retriving partners");                 this._userservice.handleerror(error);             });     } } 

model

export class invitemodel {      public username: string;     public email: string;     public partner: number;  } 

image

i believe using [value] nothing value attribute, stores value string. while assigning value partner number silently failing (i guess).

i'd suggest use [ngvalue](preserve value type) instead of [value]