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
Post a Comment