Angular 2, typescript post to API model is null

Question

I have downloaded the following project: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api. I run it on VS2015 and IIS express. The project is fine but i want to call the API with Angular 2.

So i have setup my project in Visual Studio Code and made a project in Angular 2 and TypeScript. When I try to post to the API method named Register, the values are null ?

My Visual Studio Code service(Angular2)

import { Injectable } from 'angular2/core';

import { Account } from '../account/Account';
import { RegisterBindingModel } from '../account/RegisterBindingModel';
import {Http, Response, Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class AccountService {
    constructor(private _http: Http) {

    }
    
    createAccount(account: Account): Observable<string> {
        console.log('accountService.createAccount');
        let body = JSON.stringify({ account });
        console.log('T1' + body);
      
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

return this._http.post('https://localhost:44305/api/Account/Register', body, options)
                    .map(this.extractData)
                    .catch(this.handleError);

Browser error and post values:

Server API errors: Error2_In_API_Method

I can do a GET operation, but all my POST operations are NULL ?

Try adding [FromBody] attribute, to be: Register([FromBody]RegisterBindingModel model) — Harry Ninh
– Harry Ninh, Commented Jul 27, 2016 at 23:20
dont stringify the account, just directly pass it as parameter insttread of body — harishr
– harishr, Commented Jul 28, 2016 at 4:58
- I get the same error on the API when I add Register([FromBody]RegisterBindingModel model). The object parameters are there but they are all NULL. - If I don´t use the stringify operation and just post the account, then the hole object is NULL,. — Benjamin
– Benjamin, Commented Jul 28, 2016 at 5:29
I can see there is a difference in the payloadfrom the Ajax call and the Angular CAll. The Ajax look like this: {Email: "[email protected]", Password: "Password1!", ConfirmPassword: "Password1!"} ConfirmPassword : "Password1!" Email : "[email protected]" Password : "Password1!" — Benjamin
– Benjamin, Commented Jul 28, 2016 at 12:57

Benjamin · Accepted Answer · 2016-07-28 19:51:49Z

I found the following, not very effektiv, but working solution, where I map the account class objects to a new object. Then I stringify the new object and post it:

    createAccount(account: Account): Observable<string> {

        var obj = { Email: account.Email, Password: account.Password, ConfirmPassword: account.ConfirmPassword };

            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });
            let body = JSON.stringify(obj);

            return this._http.post('https://localhost:44305/api/Account/Register',  body, options)
                                .map(this.extractData)
                                .catch(this.handleError);
}

For the first error I had on the API, i solved it by changing the following:

Request.GetOwinContext().GetUserManager<ApplicationUserManager>();

To

HttpContext.Current.GetOwinContext().GetUserManager<ApplicationUserManager>();

And then I could get the GetOwinContext() from the POST

Collectives™ on Stack Overflow

Angular 2, typescript post to API model is null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related