Getting error clicking on button "EXCEPTION: Error during evaluation of "click" "

Question

Component:

import {Component , EventEmitter} from 'angular2/core';
import {fixedHeader} from '../header/fixed-header.component.ts';
import {FooterComponent} from '../footer/footer.component.ts';
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common';
import {HttpService} from "./http-service.ts";

import {ControlMessages} from './control-messages.component.ts';
import {ValidationService} from './validation_service.ts';

import {Http} from "angular2/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/Rx';
import {Headers} from "angular2/http";

@Component({
    selector:'registration-component'
    directives:[fixedHeader, FooterComponent , ControlMessages],
    providers: [HttpService],
    template:`
<fixed-header></fixed-header>   
<form [ngFormModel]="userForm">  

<div class="container" id="wrap">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                    <br><br>
                    <legend><b>Client Personal Details:</b></legend>
                        <div class="row">
                            <div class="col-xs-6 col-md-3">
                                <h4>   Client Name:</h4>
                            </div>
                            <div class="col-xs-6 col-md-8">
                                <input type="text" id="fullname"  class="form-control input-lg" placeholder="Full Name"  ngControl="fullname" #fullname/> 
                            </div>
                            <div class="col-xs-6 col-md-1">
                                <control-messages control="fullname"></control-messages>
                            </div>  
                        </div>
                        <button class="btn btn-lg btn-success btn-block signup-btn" 
        [disabled]="!userForm.valid" 
        (click) ="saveUser(fullname.value)" >
    Create Account
</button>
                        <br><br>
            </div>
        </div>            
    </div> 
</form> 
<footer-component></footer-component>
    `   
})


export class RegistrationComponent
{   
    response : string;
    userForm: any;
    constructor(
      private _formBuilder: FormBuilder) {

        this.userForm = this._formBuilder.group({
          'fullname': ['', Validators.required],

      });
    }

    constructor(private _httpService: HttpService) {}

    saveUser( fullname : string)
            {
                const data = {
                            fullname : fullname
                };

                    this._httpService.createPost(data)
                        .subscribe(
                            data => this.response = data, 
                            error => console.log(error)
                        );
            }

}

Service:

import {Injectable} from 'angular2/core';
import {Http , Headers , RequestOptions} from "angular2/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/Rx';

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

    createPost(data:any)
    {
        const body = JSON.stringify(data);
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this._http.post('storeSignUpData/', body, {
                headers: headers
                })
                //.map(res => res.json().data);
                .catch(this.handleError)
    }

    private handleError (error: any) {
        console.error("Error");
        console.error(error);
    }

}

main.ts


   import {bootstrap}        from 'angular2/platform/browser';
import {AppComponent}     from './app.component.ts';
import {HTTP_PROVIDERS , JSONP_PROVIDERS} from "angular2/http";
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common';
bootstrap(
        AppComponent, [
                         ROUTER_PROVIDERS , FORM_PROVIDERS , HTTP_PROVIDERS , JSONP_PROVIDERS ,
                         provide(
                                 LocationStrategy, {useClass: HashLocationStrategy}
                                 )
                         ]
        );


Error:

     angular2.dev.js:23501 EXCEPTION: Error during evaluation of "submit"BrowserDomAdapter.logError @
angular2.dev.js:23501BrowserDomAdapter.logGroup @ angular2.dev.js:23512ExceptionHandler.call @ angular2.dev.js:1185(anonymous function) @ angular2.dev.js:12489NgZone._notifyOnError @ angular2.dev.js:13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13437Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13456NgZone.run @ angular2.dev.js:13418outsideHandler @ angular2.dev.js:13253Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220 angular2.dev.js:23501 ORIGINAL EXCEPTION: TypeError: Cannot read property 'createPost' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:23501ExceptionHandler.call @ angular2.dev.js:1194(anonymous function) @ angular2.dev.js:12489NgZone._notifyOnError @ angular2.dev.js:13533collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13437Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13456NgZone.run @ angular2.dev.js:13418outsideHandler @ angular2.dev.js:13253Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220 angular2.dev.js:23501 ORIGINAL STACKTRACE:

Getting error while posting data to server. I dont know what is going wrong. guys any idea ..

It would be a lot easier for you and people reading the answer if you'd reduce you example to the minimum that's necessary to reprocude the problem. Does the problem really only occur if you form has ~20 controls? How many can you remove while still getting the error? — Günter Zöchbauer
Did you add HttpService to providers somewhere (bootstrap, root component, ...)? If yes, how does the code look like exactly? — Günter Zöchbauer
yes , its included , GET method is working properly , but for posting data its giving error. — dhananjay_shingote

Eric Martinez Eric Martinez · Accepted Answer · 2016-03-28T13:33:08

Your error is pretty clear

EXCEPTION: TypeError: Cannot read property 'createPost' of undefined

That means that this._httpService is undefined.

The only thing I can see is the mix of single and double quotes in your imports, you should change them all to be single quotes.

For example your faulty line is this one using double quotes (among the other ones that are using double quotes)

import {HttpService} from "./http-service.ts";

You should change it to use single quotes

import {HttpService} from './http-service.ts';

And probably the ones you have inside your service are causing troubles too.

This is an issue being tracked in this issue in angular2's repo, and answered in this issue in TypeScript's repo.

Edit

The above comment is still valid, but I just saw what I think (again) is your problem

You have two constructors

constructor(
  private _formBuilder: FormBuilder) {
   // ...
}

constructor(private _httpService: HttpService) {}

Keep one of them

constructor(private _formBuilder: FormBuilder, private _httpService: HttpService) {
   // ...
}

Getting error clicking on button "EXCEPTION: Error during evaluation of "click" "

1 Answers