Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)
        );
    }
}
like image 609
Manu Avatar asked Sep 11 '16 01:09

Manu


1 Answers

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(
like image 134
Ignatius Andrew Avatar answered Oct 09 '22 03:10

Ignatius Andrew