Signup form broken in canary #2680
Description
- I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.
| Item | Version |
|---|---|
| generator-angular-fullstack | 5.0.0-beta.3 |
| Node | v8.9.3 |
| npm | 5.6.0 |
| Operating System | Ubuntu 16.04 |
| Item | Answer |
|---|---|
| Transpiler | TypeScript |
| Markup | HTML |
| CSS | SCSS |
| Router | ui-router |
| Client Tests | Mocha |
| DB | MongoDB |
| Auth | Y |
The signup form is broken in canary (starting from a new project yo angular-fullstack plop). In signup.component.ts, the function register(form) always receives the form = undefined. This leads the console to report the following error:
ERROR TypeError: Cannot read property 'invalid' of undefined at SignupComponent.register (signup.component.ts:37) at Object.eval [as handleEvent] (SignupComponent.html:7) at handleEvent (core.js:13581) at callWithDebugContext (core.js:15090) at Object.debugHandleEvent [as handleEvent] (core.js:14677) at dispatchEvent (core.js:9990) at core.js:12332 at SafeSubscriber.schedulerFn [as _next] (core.js:4351) at SafeSubscriber.__tryOrUnsub (Subscriber.js:239) at SafeSubscriber.next (Subscriber.js:186) at Subscriber._next (Subscriber.js:126) at Subscriber.next (Subscriber.js:90) at EventEmitter.Subject.next (Subject.js:55) at EventEmitter.emit (core.js:4319) at NgForm.onSubmit (forms.js:5751) at Object.eval [as handleEvent] (SignupComponent.html:7) at handleEvent (core.js:13581) at callWithDebugContext (core.js:15090) at Object.debugHandleEvent [as handleEvent] (core.js:14677) at dispatchEvent (core.js:9990) at core.js:10611 at HTMLFormElement.<anonymous> (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.js:4744) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at ZoneTask.invokeTask [as invoke] (zone.js:499) at invokeTask (zone.js:1540) at HTMLFormElement.globalZoneAwareCallback (zone.js:1566) Can someone identify the issue in the current implementation of the signup form signup.html?
<div class="container"> <div class="row"> <div class="col-sm-12"> <h1>Sign up</h1> </div> <div class="col-sm-12"> <form class="form" name="form" (ngSubmit)="register(form)" novalidate #signupForm="ngForm"> <div class="form-group" [class.has-success]="name.valid && submitted" [class.has-error]="!name.valid && submitted"> <label>Name</label> <input type="text" name="name" class="form-control" [(ngModel)]="user.name" required #name="ngModel"> <p class="help-block" [hidden]="name.valid || (name.pristine && !signupForm.submitted)"> A name is required </p> </div> <div class="form-group" [class.has-success]="email.valid && signupForm.submitted" [class.has-error]="!email.valid && signupForm.submitted"> <label>Email</label> <input type="email" name="email" class="form-control" [(ngModel)]="user.email" required mongoose-error #email="ngModel"> <p class="help-block" [hidden]="email.valid || (email.pristine && !signupForm.submitted)"> Please enter a valid email address. </p> <p class="help-block" [hidden]="!errors.email"> {{ errors.email }} </p> </div> <div class="form-group" [class.has-success]="password.valid || (password.pristine && !signupForm.submitted)" [class.has-error]="!password.valid || (password.pristine && !signupForm.submitted)"> <label>Password</label> <input type="password" name="password" class="form-control" [(ngModel)]="user.password" minlength="8" maxlength="128" required mongoose-error #password="ngModel"/> <p class="help-block" [hidden]="password.valid || (password.pristine && !signupForm.submitted)"> Password must be between 8 and 128 characters. </p> <p class="help-block" [hidden]="errors.password"> {{ errors.password }} </p> </div> <div class="form-group" [class.has-success]="confirmPassword.valid || (confirmPassword.pristine && !signupForm.submitted)" [class.has-error]="!confirmPassword.valid || (confirmPassword.pristine && !signupForm.submitted)"> <label>Confirm Password</label> <input type="password" name="confirmPassword" class="form-control" [(ngModel)]="user.confirmPassword" ac-match-control="password" required #confirmPassword="ngModel"> <p class="help-block" [hidden]="confirmPassword.valid || (confirmPassword.pristine && !signupForm.submitted)"> Please confirm your password. Passwords must match. </p> </div> <div> <button class="btn btn-inverse btn-lg btn-register" type="submit" [disabled]="!signupForm.form.valid"> Sign up </button> <a class="btn btn-default btn-lg btn-login" href="/login"> Login </a> </div> </form> </div> </div> <hr> </div>