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

12,609

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(
Share:
12,609
Manu
Author by

Manu

Updated on June 20, 2022

Comments

  • Manu
    Manu about 2 years

    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

    enter image description here

    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)
            );
        }
    }