added support for forms

projects/account/src/app/modules/device/device.component.html

@@ -1,12 +1,27 @@
 <router-outlet></router-outlet>
 <div fxLayout="column" fxLayoutAlign="center center">
-    <mat-tab-group mat-stretch-tabs>
+    <mat-tab-group>
         <mat-tab [label]="'Devices'">
             <account-device-list></account-device-list>
         </mat-tab>
         <mat-tab [label]="'Preferences'">
             <ng-template matTabContent>
-                <account-device-preferences></account-device-preferences>
+                <account-device-preferences
+                    [deviceSetup]="false"
+                    [preferencesForm]="preferencesForm"
+                    [preferences]="preferences"
+                >
+                </account-device-preferences>
+            </ng-template>
+        </mat-tab>
+        <mat-tab [label]="'Defaults'">
+            <ng-template matTabContent>
+                <account-device-edit
+                    [action]="'default edit'"
+                    [deviceForm]="defaultsForm"
+                    [defaults]="defaults"
+                >
+                </account-device-edit>
             </ng-template>
         </mat-tab>
     </mat-tab-group>

projects/account/src/app/modules/device/device.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { AccountDefaults } from '../../shared/models/defaults.model';
+import { AccountPreferences } from '../../shared/models/preferences.model';
 
 @Component({
     selector: 'account-device',
@@ -6,9 +10,42 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./device.component.scss']
 })
 export class DeviceComponent implements OnInit {
-    constructor() {
+    defaults: AccountDefaults;
+    defaultsForm: FormGroup;
+    preferences: AccountPreferences;
+    preferencesForm: FormGroup;
+
+    constructor(private formBuilder: FormBuilder, private route: ActivatedRoute) {
     }
 
     ngOnInit() {
+        this.route.data.subscribe(
+            (data: {defaults: AccountDefaults, preferences: AccountPreferences}) => {
+                this.defaults = data.defaults;
+                this.preferences = data.preferences;
+            }
+        );
+
+        this.defaultsForm = this.formBuilder.group(
+            {
+                city: [null],
+                country: [null],
+                name: [null],
+                pairingCode: [null],
+                placement: [null],
+                region: [null],
+                timezone: [null],
+                wakeWord: [null],
+                voice: [null]
+            }
+        );
+        this.preferencesForm = this.formBuilder.group(
+            {
+                dateFormat: [null, Validators.required],
+                measurementSystem: [null, Validators.required],
+                timeFormat: [null, Validators.required],
+            }
+        );
+
     }
 }