Angular2 (ngSubmit) not working

Question

I've just started Angular2 and facing following error when add (ngSubmit) attribute to my form

Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("


    <form [ERROR ->]#form="ngForm" (ngSubmit)="onSubmit()" novalidate>

Following are some of my dependencies from package.json.

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "jquery": "^3.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  }

I've following html form.

<form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>

    <div class="form-group">
        <label>Title</label>
        <input [(ngModel)]="model.Title" #title="ngModel" name="title" id="title" type="text" class="form-control" value="">
    </div>

    <div class="form-group">
        <label>Description</label>
        <textarea [(ngModel)]="model.Description" #description="ngModel" class="summernote form-control" name="description" id="description"></textarea>
    </div>

</form>

And following category.component file

import { Component } from '@angular/core';
import { FormBuilder} from '@angular/forms';
import { Category } from '../../../models/cms/Category';

@Component({
    selector: 'category',
    templateUrl: 'category.template.html'
})
export class CategoryComponent{

    model = new Category("dummyTitle","dummyDescription");

    onSubmit() {
        console.log(this.data);
    }   
}

Can someone please guide how to deal with this problem.

Answer 1

Make sure that button is inside the form and has type="submit". For example,

<ion-button type="submit"></ion-button>

Answer 2

In my case, my <button type="submit">Ok</button> was outside form tag. It must be inside form tag to work.

<form [formGroup]="myForm" (ngSubmit)="submitHandler()">

    <!-- ... form fields here ... -->

    <button type="submit">Ok</button> <!------- must be inside form -->
</form>

Answer 3

you are missing a import file import { NgForm } from '@angular/forms';

and you are using template Driven forms so you don't need FormBuilder.

try this way

signup-form.component.html

<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

signup-form.component.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'signup-form',
  templateUrl: 'app/signup-form.component.html',
})
export class SignupForm {
  registerUser(form: NgForm) {
    console.log(form.value);
  }
}

Answer 4

If you want to bind submit button outside of the form you have to give an id to the form and link this id to the button with form property and type submit:

<form id="myForm" [formGroup]="form" (ngSubmit)="onSubmit()">
...
</form>

<button form="myForm" type="submit"> 
  Submit Form 
</button>

Note: id doesn't have to be the same as formGroup name