settings.component: used reactive forms

src/app/settings/settings.component.html

@@ -7,48 +7,43 @@ <h1 class="text-xs-center">Your Settings</h1>
 
         <list-errors [errors]="errors"></list-errors>
 
-        <form (ngSubmit)="submitForm()">
+        <form [formGroup]="settingsForm" (ngSubmit)="submitForm()">
           <fieldset [disabled]="isSubmitting">
 
             <fieldset class="form-group">
               <input class="form-control"
                 type="text"
                 placeholder="URL of profile picture"
-                name="image"
-                [(ngModel)]="user.image" />
+                formControlName="image" />
             </fieldset>
 
             <fieldset class="form-group">
               <input class="form-control form-control-lg"
                 type="text"
                 placeholder="Username"
-                name="username"
-                [(ngModel)]="user.username" />
+                formControlName="username" />
             </fieldset>
 
             <fieldset class="form-group">
               <textarea class="form-control form-control-lg"
                 rows="8"
                 placeholder="Short bio about you"
-                name="bio"
-                [(ngModel)]="user.bio">
+                formControlName="bio">
               </textarea>
             </fieldset>
 
             <fieldset class="form-group">
               <input class="form-control form-control-lg"
                 type="email"
                 placeholder="Email"
-                name="email"
-                [(ngModel)]="user.email" />
+                formControlName="email" />
             </fieldset>
 
             <fieldset class="form-group">
               <input class="form-control form-control-lg"
                 type="password"
                 placeholder="New Password"
-                name="password"
-                [(ngModel)]="user.password" />
+                formControlName="password" />
             </fieldset>
 
             <button class="btn btn-lg btn-primary pull-xs-right"

src/app/settings/settings.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { User, UserService } from '../shared';
@@ -8,21 +9,46 @@ import { User, UserService } from '../shared';
   templateUrl: './settings.component.html'
 })
 export class SettingsComponent implements OnInit {
-  constructor(
-    private router: Router,
-    private userService: UserService
-  ) {}
-
   user: User = new User();
+  settingsForm: FormGroup;
   errors: Object = {};
   isSubmitting: boolean = false;
 
+  constructor(
+    private router: Router,
+    private userService: UserService,
+    private fb: FormBuilder
+  ) {
+    // create form group using the form builder
+    this.settingsForm = this.fb.group({
+      image: '',
+      username: '',
+      bio: '',
+      email: '',
+      password: ''
+    });
+    // Optional: subscribe to changes on the form
+    // this.settingsForm.valueChanges.subscribe(values => this.updateUser(values));
+  }
+
   ngOnInit() {
     // Make a fresh copy of the current user's object to place in editable form fields
     (<any>Object).assign(this.user, this.userService.getCurrentUser());
+    // Fill the form
+    this.settingsForm.patchValue(this.user);
+  }
+
+  logout() {
+    this.userService.purgeAuth();
+    this.router.navigateByUrl('/');
   }
 
   submitForm() {
+    this.isSubmitting = true;
+
+    // update the model
+    this.updateUser(this.settingsForm.value);
+
     this.userService
     .update(this.user)
     .subscribe(
@@ -34,8 +60,8 @@ export class SettingsComponent implements OnInit {
     );
   }
 
-  logout() {
-    this.userService.purgeAuth();
-    this.router.navigateByUrl('/');
+  updateUser(values: Object) {
+    (<any>Object).assign(this.user, values);
   }
+
 }