angular - Trouble with form controls in Angular2 -


i have following component , html template display form. throws error:

exception: typeerror: cannot read property 'controls' of undefined in [signupform.controls['email'] in signupcomponent@20:35]

not sure need access touched feature? code has worked elsewhere, not sure need work?

import { component, inject, oninit } 'angular2/core'; import { validators, formbuilder, controlgroup, control } 'angular2/common';  import { router } 'angular2/router'; import { userservice } '../services/user.service';  @component({   selector: 'signup',   templateurl: 'client/dev/user/templates/signup.html',   styleurls: ['client/dev/user/styles/user.css'],   providers: [] })  export class signupcomponent {     title: string = "sign up";     signupform: controlgroup;    constructor( @inject(formbuilder) fb:formbuilder, @inject(userservice) private _userservice: userservice, private _router: router) {     this.signupform = fb.group({       "firstname": ["", validators.required],       "lastname": ["", validators.required],       "email": ["", validators.required],       "password": ["", validators.required]     });   }   onsubmit(details):void {     console.log("on submit here");     this._userservice.signup(details)     .subscribe((result) => {       if (result) {         console.log("link todo?");         this._router.navigate(['logincomponent']);       }     });   } } 

signup.html:

        <div class="form-group">             <label for="signup-email">email</label>             <input type="text" [ngformcontrol]="signupform.controls['email']" #email="ngform" class="form-control" id="signup-email">         </div>         <div *ngif="email.control.haserror('required') && email.control.touched" class="alert alert-danger">             email required         </div>         <div *ngif="email.control.haserror('email') && email.control.touched" class="alert alert-danger">             email invalid         </div> 

update:

        <div class="form-group">             <label for="signup-email">email</label>             <input type="text" [ngformcontrol]="signupform?.controls['email']" #email="ngform" class="form-control" id="signup-email">         </div>         <div *ngif="email.control.haserror('required') && email.control.touched" class="alert alert-danger">             email required         </div>         <div *ngif="email.control.haserror('email') && email.control.touched" class="alert alert-danger">             email invalid         </div> 


Comments