Angular2 submit a form to the server - http

Question

I have googled for this problem and I found a lot of links which couldn't help me solve my problem. All I want to do is to send forms data to the controller. it goes to the controller but the data is not present in there.
here are my codes:
app.component.ts
import {Component, OnInit} from "angular2/core";
import {AsyncRoute, Router, RouteDefinition, ROUTER_PROVIDERS, RouteConfig, Location, ROUTER_DIRECTIVES, RouteParams} from "angular2/router";
import {CitiesComponent} from "./components/cities.component";
import { CitiesService } from './components/cities.service';
import { HTTP_PROVIDERS } from 'angular2/http';
import 'rxjs/Rx';
declare var System: any;
#Component({
selector: "app",
templateUrl: "/app/app.html",
providers: [CitiesService, HTTP_PROVIDERS, ROUTER_PROVIDERS],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent implements OnInit {
public routes: RouteDefinition[] = null;
constructor(private router: Router,
private location: Location) {
}
ngOnInit() {
if (this.routes === null) {
this.routes = [
new AsyncRoute({
path: "/City",
name: "City",
loader: () => System.import("app/components/cities.component").then(c => c["CitiesComponent"])
})
];
this.router.config(this.routes);
}
}
getLinkStyle(route: RouteDefinition) {
return this.location.path().indexOf(route.path) > -1;
}
}
cities.ts
export interface ICities {
Id: string;
State: string;
Title: string;
}
cities.component.ts
import {Component, OnInit} from "angular2/core";
import { FORM_DIRECTIVES } from 'angular2/common';
import { RouteParams, Router } from 'angular2/router';
import { ICities } from './cities';
import { CitiesService } from './cities.service';
#Component({
selector: "cities",
templateUrl: "/partial/cities",
directives: [FORM_DIRECTIVES]
})
export class CitiesComponent implements OnInit {
public City: ICities;
cities: ICities[];
errorMessage: string;
constructor(private _citiesService: CitiesService, private _router: Router,
private _routeParams: RouteParams) { }
ngOnInit() {
this._citiesService.getCities()
.subscribe(
cities => this.cities = cities,
error => this.errorMessage = <any>error);
//this.message = "anything!"
}
onSubmit(form: ICities): void {
console.log('you submitted value 23:', form);
this._citiesService.addCity(form);
}
}
cities.services.ts
import { Injectable } from 'angular2/core';
import { Http, Response, Headers, RequestOptions, RequestMethod, Request} from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { ICities } from './cities';
#Injectable()
export class CitiesService {
private _citiesInsert = '/Cities/CitiesInsert';
private _citiesList = '/Cities/GetCities';
constructor(private _http: Http) { }
getCities(): Observable<ICities[]> {
return this._http.get(this._citiesList)
.map((response: Response) => <ICities[]>response.json())
.do(data => console.log('All: ' + JSON.stringify(data)))
.catch(this.handleError);
}
addCity(city: ICities) {
let body = JSON.stringify({ city });
let headers = new Headers({ 'Content-Type': 'application/json' });
//let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
var url = '/Cities/CitiesInsert';
this._http.post(this._citiesInsert, JSON.stringify(city), headers)
.map(this.extractData)
.catch(this.handleError)
.subscribe(
(res2) => {
console.log('subsribe %o', res2)
}
);
}
private extractData(res: Response) {
let body = res.json();
alert("extract data: " + body);
return body.data || {};
}
private handleError(error: Response) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
alert("error: " + error);
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
cities.cshtml
<cities>
<div class="col-md-12">
<div class="portlet box blue ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> مشخصات
</div>
<div class="tools">
<a title="" data-original-title="" href="" class="collapse"> </a>
<a title="" data-original-title="" href="#portlet-config" data-toggle="modal" class="config"> </a>
<a title="" data-original-title="" href="" class="reload"> </a>
<a title="" data-original-title="" href="" class="remove"> </a>
</div>
</div>
<div class="portlet-body form">
<form role="form" #f="ngForm" (ngSubmit)="onSubmit(f.value)" >
<div class="form-body">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>وضعیت</label>
<select ngControl="State" class="form-control input-small selectpicker">
<option value="ACTIVATED" selected="selected">فعال</option>
<option value="DEACTIVE">غیرفعال</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>عنوان</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input class="form-control" ngControl ="Title" placeholder="عنوان شهر" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="form-actions right">
<button class="btn">
<i class="fa fa-ban"></i> صرفنظر
</button>
<button class="btn green" type="submit">
<i class="fa fa-save"></i> ذخیره
</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="portlet mt-element-ribbon light portlet-fit ">
<div class="ribbon ribbon-right ribbon-clip ribbon-shadow ribbon-border-dash-hor ribbon-color-success uppercase">
<div class="ribbon-sub ribbon-clip ribbon-right"></div> لیست اطلاعات
</div>
<div class="portlet-title">
<div class="caption">
<i class="icon-layers font-green"></i>
<span class="caption-subject font-green bold uppercase">شهرها</span>
</div>
</div>
<div class="portlet-body">
<div class='table-responsive'>
<table class='table' *ngIf='cities && cities.length'>
<thead>
<tr>
<th>
Title
</th>
</tr>
</thead>
<tbody>
<tr *ngFor='#city of cities'>
<td>{{ city.Title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</cities>
CitiesController.cs
[HttpPost]
public void CitiesInsert(Cities city)
{
Console.Write(city);
}

Answer 1

Try something like this:
<form [ngFormModel]="loginForm" (submit)="doLogin($event)"
and in your component
doLogin(event) {
console.log(this.loginForm.value);
event.preventDefault();
}