From 45da6e81ed81dfd57ee20a016d57e6324efdd00d Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Fri, 4 Aug 2017 11:59:22 +0300
Subject: [PATCH] forms page done...

---
 .../components/navigation/navigation.model.ts |   6 +
 .../content/ui/forms/forms.component.html     | 124 ++++++++++++++++++
 .../content/ui/forms/forms.component.scss     |  17 +++
 .../main/content/ui/forms/forms.component.ts  |  67 ++++++++++
 src/app/main/content/ui/forms/forms.module.ts |  25 ++++
 src/app/main/content/ui/ui.module.ts          |   2 +
 6 files changed, 241 insertions(+)
 create mode 100644 src/app/main/content/ui/forms/forms.component.html
 create mode 100644 src/app/main/content/ui/forms/forms.component.scss
 create mode 100644 src/app/main/content/ui/forms/forms.component.ts
 create mode 100644 src/app/main/content/ui/forms/forms.module.ts

diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts
index 12f51dba..0e04362b 100644
--- a/src/app/core/components/navigation/navigation.model.ts
+++ b/src/app/core/components/navigation/navigation.model.ts
@@ -252,6 +252,12 @@ export class FuseNavigation
                     }
                 ]
             },*/
+            {
+                'title': 'Forms',
+                'type' : 'nav-item',
+                'icon' : 'web_asset',
+                'url'  : '/ui/forms'
+            },
             {
                 'title': 'Icons',
                 'type' : 'nav-item',
diff --git a/src/app/main/content/ui/forms/forms.component.html b/src/app/main/content/ui/forms/forms.component.html
new file mode 100644
index 00000000..572dc0b9
--- /dev/null
+++ b/src/app/main/content/ui/forms/forms.component.html
@@ -0,0 +1,124 @@
+<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">User Interface</span>
+            </div>
+            <div class="h1 mt-16">Forms</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p class="mb-32">
+            Angular reactive forms facilitate a reactive style of programming that favors explicit management of the
+            data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model
+            that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using
+            reactive patterns, testing, and validation.
+        </p>
+
+        <div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-sm="row">
+
+            <form class="md-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start"
+                  fxFlex="1"
+                  name="form" [formGroup]="form">
+
+                <div class="h2 mb-24">Reactive Form Example</div>
+
+                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
+
+                    <md-input-container fxFlex="100">
+                        <input mdInput placeholder="Company (disabled)" formControlName="company">
+                    </md-input-container>
+
+                </div>
+
+                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
+
+                    <md-input-container fxFlex="50">
+                        <input mdInput placeholder="First name" formControlName="firstName">
+                        <md-error *ngIf="formErrors.firstName.required">
+                            Required
+                        </md-error>
+                    </md-input-container>
+
+                    <md-input-container fxFlex="50">
+                        <input mdInput placeholder="Last name" formControlName="lastName">
+                        <md-error *ngIf="formErrors.lastName.required">
+                            Required
+                        </md-error>
+                    </md-input-container>
+
+                </div>
+
+                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" fxLayoutWrap>
+
+                    <md-input-container fxFlex="100">
+                        <textarea mdInput placeholder="Address" formControlName="address">
+                            1600 Amphitheatre Pkwy
+                        </textarea>
+                        <md-error *ngIf="formErrors.address.required">
+                            Required
+                        </md-error>
+                    </md-input-container>
+
+                    <md-input-container fxFlex="100">
+                        <textarea mdInput placeholder="Address 2" formControlName="address2"></textarea>
+                        <md-error *ngIf="formErrors.address2.required">
+                            Required
+                        </md-error>
+                    </md-input-container>
+
+                </div>
+
+                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
+
+                    <md-input-container fxFlex="33">
+                        <input mdInput placeholder="City" formControlName="city">
+                        <md-error *ngIf="formErrors.city.required">
+                            Required
+                        </md-error>
+                    </md-input-container>
+
+                    <md-input-container fxFlex="34">
+                        <input mdInput placeholder="State" formControlName="state">
+                        <md-error *ngIf="formErrors.state.required">
+                            Required
+                        </md-error>
+                    </md-input-container>
+
+                    <md-input-container fxFlex="33">
+                        <input mdInput #postalCode placeholder="Postal Code" value="94043"
+                               formControlName="postalCode">
+                        <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+                        <md-error *ngIf="formErrors.postalCode.maxlength">
+                            Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters
+                        </md-error>
+                    </md-input-container>
+
+                </div>
+
+            </form>
+
+            <div class="form-errors-model md-white-bg p-24 mat-elevation-z4">
+
+                <div class="h2 mb-24">Reactive Form Errors Model</div>
+
+                <pre><code>{{formErrors | json}}</code></pre>
+            </div>
+
+        </div>
+
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>
+
+
diff --git a/src/app/main/content/ui/forms/forms.component.scss b/src/app/main/content/ui/forms/forms.component.scss
new file mode 100644
index 00000000..33c43ccd
--- /dev/null
+++ b/src/app/main/content/ui/forms/forms.component.scss
@@ -0,0 +1,17 @@
+:host {
+
+    .content {
+
+        form {
+            max-width: 800px !important;
+        }
+
+        .form-errors-model {
+            flex: 1;
+
+            code {
+                background: none !important;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/main/content/ui/forms/forms.component.ts b/src/app/main/content/ui/forms/forms.component.ts
new file mode 100644
index 00000000..c32e110d
--- /dev/null
+++ b/src/app/main/content/ui/forms/forms.component.ts
@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector   : 'fuse-forms',
+    templateUrl: './forms.component.html',
+    styleUrls  : ['./forms.component.scss']
+})
+export class FuseFormsComponent implements OnInit
+{
+    form: FormGroup;
+    formErrors: any;
+
+    constructor(private formBuilder: FormBuilder)
+    {
+        this.formErrors = {
+            company   : {},
+            firstName : {},
+            lastName  : {},
+            address   : {},
+            address2  : {},
+            city      : {},
+            state     : {},
+            postalCode: {}
+        };
+    }
+
+    ngOnInit()
+    {
+        this.form = this.formBuilder.group({
+            company   : [{value: 'Google', disabled: true}, Validators.required],
+            firstName : ['', Validators.required],
+            lastName  : ['', Validators.required],
+            address   : ['', Validators.required],
+            address2  : ['', Validators.required],
+            city      : ['', Validators.required],
+            state     : ['', Validators.required],
+            postalCode: ['', [Validators.required, Validators.maxLength(5)]]
+        });
+
+        this.form.valueChanges.subscribe(() => {
+            this.onFormValuesChanged();
+        });
+    }
+
+    onFormValuesChanged()
+    {
+        for ( const field in this.formErrors )
+        {
+            if ( !this.formErrors.hasOwnProperty(field) )
+            {
+                continue;
+            }
+
+            // Clear previous errors
+            this.formErrors[field] = {};
+
+            // Get the control
+            const control = this.form.get(field);
+
+            if ( control && control.dirty && !control.valid )
+            {
+                this.formErrors[field] = control.errors;
+            }
+        }
+    }
+}
diff --git a/src/app/main/content/ui/forms/forms.module.ts b/src/app/main/content/ui/forms/forms.module.ts
new file mode 100644
index 00000000..ccbdb13f
--- /dev/null
+++ b/src/app/main/content/ui/forms/forms.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule, Routes } from '@angular/router';
+
+import { FuseFormsComponent } from './forms.component';
+
+const routes: Routes = [
+    {
+        path     : 'ui/forms',
+        component: FuseFormsComponent
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        FuseFormsComponent
+    ]
+})
+export class UIFormsModule
+{
+}
diff --git a/src/app/main/content/ui/ui.module.ts b/src/app/main/content/ui/ui.module.ts
index 20fe5a6d..f5ca2582 100644
--- a/src/app/main/content/ui/ui.module.ts
+++ b/src/app/main/content/ui/ui.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { UIFormsModule } from './forms/forms.module';
 import { UIIconsModule } from './icons/icons.module';
 import { UITypographyModule } from './typography/typography.module';
 import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
@@ -8,6 +9,7 @@ import { UIColorsModule } from './colors/colors.module';
 
 @NgModule({
     imports: [
+        UIFormsModule,
         UIIconsModule,
         UITypographyModule,
         UIHelperClassesModule,