Whenever I try to submit a form with two input fields and one select list, the submitted value for the select list is always 0. I am unsure where I am making a mistake. When I post this form to an API, all values are correct except for the 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 } from '@angular/core';
import { NgForm } from '@angular/forms';
import { FORM_PROVIDERS, ControlGroup, FormBuilder, Validators } from '@angular/common';
import {UserService} from '../../services/user.service';
import {OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { Router } from '@angular/router';
import { HttpHelper} from '../../utils/httphelper.utils';
import 'rxjs/Rx';
import {InviteModel} from '../../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;
}