angular 2 on from submit error self.context.onSubmit is not a function

Question

I am using 2.0.0-rc.6 in my angular 2 application. on form submit I am getting this error - self.context.onSubmit is not a function

also it is appending form values in browser.

http://localhost:3000/register

on submit the page reloading and url become like this.

http://localhost:3000/register?firstName=vcvvc&lastName=vcv&userName=cvv&password=vcv&password=vcv

the codes are

form

<form class="ui form" (ngSubmit)="onSubmit()" #registrationForm="ngForm">
----
----
 <button type="submit" class="ui button"> Register</button>
    </form>

the service

import { Component } from '@angular/core';
import { User } from '../models/user';
import { RegisterService } from '../services/register.service';

@Component({
    selector: 'side-panel',
    templateUrl: 'app/components/register.component.html'
})
export class RegisterComponent { 

    newuser: User = new User();
    theText: string;

    constructor(private _registerService: RegisterService){ 
    }

    onsubmit(){
        console.log('form submit clicked..');
        this._registerService.sendUser(this.newuser).subscribe(
            date =>{
                this.newuser = new User();
            },
            error => console.log(error)
        );
    }
}

Reflation

Remember javascript is case-sensitive. Your function should be renamed to onSubmit instead of onsubmit. – Bingen

ohh,OMG, this is problem late night coding :-).Thanks Harry – Reflation

Same issue for me, but I called the function ngSubmit instead of onSubmit! – Banjermasin

Answer 1

This error occurs when the name of the methods called in an event not matched with the template declaration and inside the class

In your template you have specified onSubmit() as camel case

<form class="ui form" (ngSubmit)="**onSubmit()**" #registrationForm="ngForm">

but inside the class, its not a camelCase "onsubmit()"

 onsubmit(){
        console.log('form submit clicked..');
        this._registerService.sendUser(this.newuser).subscribe(

Hydromancy