fix(register): registration form upgrade to use reactive form directives

Author: domfarolino

src/app/register/register.component.css

@@ -23,7 +23,6 @@ md-card {
 
 md-input {
  display:block;
- margin-top:25px;
 }
 
 md-spinner {

src/app/register/register.component.html

@@ -9,11 +9,11 @@ <h2>Angular2 Login Seed</h2>
  <md-card-content>
  <h2>Create an account</h2>
 
- <form *ngIf="!submitted" [ngFormModel]="form" (ngSubmit)="onSubmit()" #registerForm="ngForm">
- <md-input [ngFormModel]="name" ngControl="name" required placeholder="Name"></md-input>
- <md-input [ngFormModel]="username" ngControl="username" required placeholder="Username"></md-input>
- <md-input [ngFormModel]="email" ngControl="email" required placeholder="email@example.com"></md-input>
- <md-input [ngFormModel]="password" ngControl="password" required placeholder="Password" type="password"></md-input>
+ <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #registerForm="ngForm">
+ <md-input formControlName="name" required placeholder="Name"></md-input>
+ <md-input formControlName="username" required placeholder="Username"></md-input>
+ <md-input formControlName="email" required placeholder="email@example.com"></md-input>
+ <md-input formControlName="password" required placeholder="Password" type="password"></md-input>
  <button type="submit" [disabled]="!registerForm.form.valid" md-raised-button color="primary">Register</button>
  </form>
 

src/app/register/register.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { NgForm, Validators, ControlGroup, Control } from '@angular/common';
+import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MdButton } from '@angular2-material/button';
 import { MdInput } from '@angular2-material/input';
@@ -21,19 +21,19 @@ import { UserService } from '../shared/services/user/user.service';
  selector: 'register',
  templateUrl: 'app/register/register.component.html',
  styleUrls: ['app/register/register.component.css'],
- directives: [MD_CARD_DIRECTIVES, MdButton, MdInput, MdSpinner]
+ directives: [MD_CARD_DIRECTIVES, MdButton, MdInput, MdSpinner, REACTIVE_FORM_DIRECTIVES]
 })
 
 export class RegisterComponent implements OnInit {
  title = 'Register';
  loginLink = '/login';
  githubLink = 'https://github.com/domfarolino/angular2-login-seed';
 
- name: Control;
- username: Control;
- email: Control;
- password: Control;
- form: ControlGroup;
+ name: FormControl;
+ username: FormControl;
+ email: FormControl;
+ password: FormControl;
+ form: FormGroup;
 
  /**
  * Boolean used in telling the UI
@@ -56,19 +56,19 @@ export class RegisterComponent implements OnInit {
  /**
  * Initialize form Controls
  */
- this.name = new Control('', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(64)]));
- this.username = new Control('', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(64)]));
- this.email = new Control('', Validators.compose([Validators.required, Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")]));
- this.password = new Control('', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(32)]));
+ this.name = new FormControl('', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(64)]));
+ this.username = new FormControl('', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(64)]));
+ this.email = new FormControl('', Validators.compose([Validators.required, Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")]));
+ this.password = new FormControl('', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(32)]));
 
  /**
  * Initialize form
  */
- this.form = new ControlGroup({
- name: this.name,
- username: this.username,
- email: this.email,
- password: this.password
+ this.form = new FormGroup({
+ 'name': this.name,
+ 'username': this.username,
+ 'email': this.email,
+ 'password': this.password
  });
  }