Form Submission in Angular2.0

I am just start learning angular 2.0.I have problem while submitting the forms,The Url where I learn forms:

http://learnangular2.com/forms/

here is my code:

<form [ngFormModel]="loginForm" (submit)="doLogin($event)">
    <input ngControl="email" type="email" placeholder="Your email">
    <input ngControl="password" type="password" placeholder="Your password">
  <button type="submit">Log in</button>
</form>

Javascript Part:

import {Component,FormBuilder, Validators} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import { Router } from 'angular2/router';
@Component({
  selector: 'my-form',
  templateUrl: 'app/form.component.html'
})
export class FormComponent {

doLogin(event){
console.log(this.loginForm.value);

}

};

Main.ts is:

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(AppComponent, [HTTP_PROVIDERS]);

Error is:

EXCEPTION: TypeError: this.form is undefined in [loginForm in FormComponent@6:6]

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Angular2 FORM with controls and validation. After a lot searching i concluded that using ngModel is best to get values from form. by using same it is easier to clear to controls of the forms. and validations gets easy. and used ngControl for checking validations. here is my working code for the form. <form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup"> <div class="col-md-7"> Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'> </div> <div class="col-md-7"> Password: <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'> </div> <div class="col-md-7"> <input type="radio" name='type' (click)='demoInfo.radio="Btech"' [checked]="'Btech' === demoInfo.radio">Btech <input type="radio" name='type' (click)='demoInfo.radio="Mtech"' [checked]="'Mtech' === demoInfo.radio">Mtech </div> <div class="col-md-7"> <select #selectOption (change)='demoInfo.select=selectOption.value' class='form-control' ngControl='select'>… Read more »

Jason
Guest

You still need to learn about ControlGroup,FormBuilder. This will fix your problem.

http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview

import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators,Control,ControlGroup } from 'angular2/common';

export class FormComponent {

loginForm: ControlGroup;

constructor(fb: FormBuilder) {
       this.loginForm = new ControlGroup({
            login: new Control(""),
            password: new Control("")
       });
}
doLogin(event){
console.log(this.loginForm.value);
}

article : http://blog.jhades.org/introduction-to-angular-2-forms-template-driven-vs-model-driven/ – start learning…

Jason
Guest
export class App {
  constructor() {
    this.name = 'Angular2';
    //create ControlGroup
    this.loginForm = new ControlGroup({
     email: new Control(""),
     password: new Control("")
   });
  }

  doLogin(event){
console.log(this.loginForm.value);

}
}

This may help you: NgFormModel