auth.component: making use of the (reactive) forms api

src/app/auth/auth.component.html

@@ -9,29 +9,26 @@ <h1 class="text-xs-center">{{ title }}</h1>
           <a [routerLink]="['/register']" *ngIf="authType == 'login'">Need an account?</a>
         </p>
         <list-errors [errors]="errors"></list-errors>
-        <form (ngSubmit)="submitForm()">
+        <form [formGroup]="authForm" (ngSubmit)="submitForm()">
           <fieldset [disabled]="isSubmitting">
             <fieldset class="form-group">
               <input
-                name="username"
-                [(ngModel)]="credentials.username"
+                formControlName="username"
                 placeholder="Username"
                 class="form-control form-control-lg"
                 type="text"
                 *ngIf="authType == 'register'" />
             </fieldset>
             <fieldset class="form-group">
               <input
-                name="email"
-                [(ngModel)]="credentials.email"
+                formControlName="email"
                 placeholder="Email"
                 class="form-control form-control-lg"
                 type="text" />
             </fieldset>
             <fieldset class="form-group">
               <input
-                name="password"
-                [(ngModel)]="credentials.password"
+                formControlName="password"
                 placeholder="Password"
                 class="form-control form-control-lg"
                 type="password" />

src/app/auth/auth.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Errors, UserService } from '../shared';
@@ -11,30 +12,42 @@ export class AuthComponent implements OnInit {
   authType: String = '';
   title: String = '';
   errors: Errors = new Errors();
-  credentials: Object = {};
   isSubmitting: boolean = false;
+  authForm: FormGroup;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private userService: UserService
-  ) {}
+    private userService: UserService,
+    private fb: FormBuilder
+  ) {
+    // use FormBuilder to create a form group
+    this.authForm = this.fb.group({
+      'email': '',
+      'password': ''
+    });
+  }
 
   ngOnInit() {
     this.route.url.subscribe(data => {
       // Get the last piece of the URL (it's either 'login' or 'register')
       this.authType = data[data.length - 1].path;
       // Set a title for the page accordingly
       this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up';
+      // add form control for username if this is the register page
+      if (this.authType === 'register') {
+        this.authForm.addControl('username', new FormControl());
+      }
     });
   }
 
   submitForm() {
     this.isSubmitting = true;
     this.errors = new Errors();
 
+    let credentials = this.authForm.value;
     this.userService
-    .attemptAuth(this.authType, this.credentials)
+    .attemptAuth(this.authType, credentials)
     .subscribe(
       data => this.router.navigateByUrl('/'),
       err => {