From 006f618c36f817374e62f6ba6e5b5de61a2a41cc Mon Sep 17 00:00:00 2001
From: Sebastian Seedorf <mail@sebse.de>
Date: Fri, 2 Jun 2017 17:36:32 +0200
Subject: [PATCH] added validation, error messages, help tooptips, async
 question loading and textarea input

---
 .idea/typescript-compiler.xml                 |   2 -
 .idea/workspace.xml                           | 726 +++++++++++++++---
 src/app/app.component.ts                      |  18 +-
 .../modules/dyn-form/dyn-form.component.ts    |  32 +-
 src/app/modules/dyn-form/dyn-form.module.ts   |   9 +-
 .../dyn-form/dyn-question.component.ts        |  67 +-
 .../inputs/counter-input.component.ts         |  15 +-
 .../dyn-form/inputs/custom-input.component.ts |  25 +-
 .../inputs/dropdown-input.component.ts        |  43 +-
 .../dyn-form/inputs/tag-input.component.ts    |  15 +-
 .../inputs/textarea-input.component.ts        |  54 ++
 .../dyn-form/services/question.service.ts     |  31 +-
 .../dyn-form/services/value.service.ts        |  12 +
 src/app/modules/dyn-form/types/keys.pipe.ts   |  12 +
 src/app/services/http-cached.service.ts       |  21 +-
 src/tsconfig.json                             |   4 +-
 16 files changed, 877 insertions(+), 209 deletions(-)
 create mode 100644 src/app/modules/dyn-form/inputs/textarea-input.component.ts
 create mode 100644 src/app/modules/dyn-form/services/value.service.ts
 create mode 100644 src/app/modules/dyn-form/types/keys.pipe.ts

diff --git a/.idea/typescript-compiler.xml b/.idea/typescript-compiler.xml
index 778bac5..c6b62a3 100644
--- a/.idea/typescript-compiler.xml
+++ b/.idea/typescript-compiler.xml
@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="TypeScriptCompiler">
-    <option name="isCompilerEnabled" value="true" />
-    <option name="nodeInterpreterTextField" value="$USER_HOME$/Documents/Portables/nodejs/node" />
     <option name="useConfig" value="true" />
     <option name="showAllErrors" value="true" />
   </component>
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0bd0570..8112a10 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,11 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="77c12afa-55f1-462c-96eb-1733ba14cab9" name="Default" comment="Merging completed">
+    <list default="true" id="77c12afa-55f1-462c-96eb-1733ba14cab9" name="Default" comment="">
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/textarea-input.component.ts" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/services/value.service.ts" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/types/keys.pipe.ts" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/typescript-compiler.xml" afterPath="$PROJECT_DIR$/.idea/typescript-compiler.xml" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.ts" afterPath="$PROJECT_DIR$/src/app/app.component.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/modules/dyn-form/services/question.service.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/services/question.service.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/services/http-cached.service.ts" afterPath="$PROJECT_DIR$/src/app/services/http-cached.service.ts" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/tsconfig.json" afterPath="$PROJECT_DIR$/src/tsconfig.json" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -19,69 +31,28 @@
   </component>
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
-    <leaf>
-      <file leaf-file-name="question.service.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/services/question.service.ts">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file leaf-file-name="dyn-form.component.ts" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="68">
-              <caret line="6" column="22" lean-forward="false" selection-start-line="6" selection-start-column="22" selection-end-line="6" selection-end-column="22" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="question.interface.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="0">
-              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="dropdown-input.component.ts" pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="141">
-              <caret line="45" column="12" lean-forward="false" selection-start-line="45" selection-start-column="12" selection-end-line="45" selection-end-column="12" />
+            <state relative-caret-position="51">
+              <caret line="6" column="13" lean-forward="true" selection-start-line="6" selection-start-column="13" selection-end-line="6" selection-end-column="13" />
               <folding>
-                <element signature="e#0#114#0" expanded="true" />
-                <marker date="1496129954275" expanded="true" signature="748:861" ph="..." />
+                <element signature="e#0#95#0" expanded="true" />
+                <marker date="1496417492032" expanded="true" signature="315:695" ph="..." />
+                <marker date="1496417492032" expanded="true" signature="600:683" ph="..." />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="counter-input.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts">
+      <file leaf-file-name="app.component.ts" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="0">
-              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+            <state relative-caret-position="270">
+              <caret line="21" column="8" lean-forward="false" selection-start-line="21" selection-start-column="8" selection-end-line="21" selection-end-column="8" />
               <folding>
-                <element signature="e#0#54#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="custom-input.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="0">
-              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="hidden-input.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="0">
-              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-              <folding>
-                <element signature="e#0#59#0" expanded="true" />
+                <element signature="e#0#40#0" expanded="true" />
               </folding>
             </state>
           </provider>
@@ -90,10 +61,41 @@
       <file leaf-file-name="tag-input.component.ts" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="0">
-              <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+            <state relative-caret-position="158">
+              <caret line="29" column="10" lean-forward="false" selection-start-line="29" selection-start-column="10" selection-end-line="29" selection-end-column="10" />
               <folding>
-                <element signature="e#0#80#0" expanded="true" />
+                <element signature="e#0#59#0" expanded="true" />
+                <marker date="1496417102606" expanded="true" signature="404:466" ph="..." />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="value.service.ts" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/services/value.service.ts">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="17">
+              <caret line="1" column="72" lean-forward="false" selection-start-line="1" selection-start-column="72" selection-end-line="1" selection-end-column="72" />
+              <folding>
+                <element signature="e#0#43#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="dyn-question.component.ts" pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="158">
+              <caret line="43" column="2" lean-forward="true" selection-start-line="43" selection-start-column="2" selection-end-line="43" selection-end-column="2" />
+              <folding>
+                <element signature="e#0#69#0" expanded="true" />
+                <marker date="1496417101926" expanded="true" signature="304:2231" ph="..." />
+                <marker date="1496417101926" expanded="true" signature="766:1071" ph="..." />
+                <marker date="1496417101926" expanded="true" signature="1121:1379" ph="..." />
+                <marker date="1496417101926" expanded="true" signature="1433:1763" ph="..." />
+                <marker date="1496417101926" expanded="true" signature="1816:2082" ph="..." />
+                <marker date="1496417101926" expanded="true" signature="2137:2218" ph="..." />
               </folding>
             </state>
           </provider>
@@ -101,13 +103,37 @@
       </file>
     </leaf>
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="TypeScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
+        <option value="$PROJECT_DIR$/bs-config.json" />
+        <option value="$PROJECT_DIR$/src/tsconfig.json" />
+        <option value="$PROJECT_DIR$/src/app/sizer.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.module.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.component.html" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/textarea-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/types/keys.pipe.ts" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/services/question.service.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/services/http-cached.service.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/services/value.service.ts" />
       </list>
     </option>
   </component>
@@ -128,6 +154,20 @@
     <option name="width" value="1456" />
     <option name="height" value="876" />
   </component>
+  <component name="ProjectInspectionProfilesVisibleTreeState">
+    <entry key="Project Default">
+      <profile-state>
+        <expanded-state>
+          <State>
+            <id />
+          </State>
+          <State>
+            <id>Internationalization issues</id>
+          </State>
+        </expanded-state>
+      </profile-state>
+    </entry>
+  </component>
   <component name="ProjectView">
     <navigator currentView="ProjectPane" proportions="" version="1">
       <flattenPackages />
@@ -143,6 +183,8 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="Scope" />
+      <pane id="Scratches" />
       <pane id="ProjectPane">
         <subPane>
           <PATH>
@@ -295,12 +337,38 @@
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="services" />
+              <option name="myItemId" value="types" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="AngularDynFormModule" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="question.service.ts" />
-              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.NestingTreeNode" />
+              <option name="myItemId" value="src" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="app" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="modules" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="dyn-form" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="services" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
           </PATH>
           <PATH>
@@ -335,13 +403,19 @@
           </PATH>
         </subPane>
       </pane>
-      <pane id="Scratches" />
-      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="HbShouldOpenHtmlAsHb" value="" />
+    <property name="nodejs_interpreter_path" value="$USER_HOME$/Documents/Portables/nodejs/node" />
+    <property name="settings.editor.selected.configurable" value="preferences.general" />
+    <property name="typescript-compiler-editor-notification" value="false" />
+  </component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\seedorf_s1\WebstormProjects\AngularDynFormModule\src\app\modules\dyn-form\inputs" />
+    </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
@@ -355,7 +429,7 @@
       </list>
     </option>
   </component>
-  <component name="RunManager">
+  <component name="RunManager" selected="npm.Start">
     <configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
       <method />
     </configuration>
@@ -394,6 +468,12 @@
       <method />
     </configuration>
     <configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
+      <node-interpreter>project</node-interpreter>
+      <node-options />
+      <gulpfile />
+      <tasks />
+      <arguments />
+      <envs />
       <method />
     </configuration>
     <configuration default="true" type="js.build_tools.npm" factoryName="npm">
@@ -416,10 +496,26 @@
       <recursive>false</recursive>
       <method />
     </configuration>
+    <configuration default="false" name="Start" type="js.build_tools.npm" factoryName="npm">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="start" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method />
+    </configuration>
+    <list size="1">
+      <item index="0" class="java.lang.String" itemvalue="npm.Start" />
+    </list>
   </component>
   <component name="ShelveChangesManager" show_recycled="false">
     <option name="remove_strategy" value="false" />
   </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
       <changelist id="77c12afa-55f1-462c-96eb-1733ba14cab9" name="Default" comment="" />
@@ -427,7 +523,11 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1496129405467</updated>
-      <workItem from="1496129414693" duration="548000" />
+      <workItem from="1496129414693" duration="16269000" />
+      <workItem from="1496212456684" duration="4548000" />
+      <workItem from="1496298794463" duration="23800000" />
+      <workItem from="1496385401533" duration="17758000" />
+      <workItem from="1496408793177" duration="8927000" />
     </task>
     <task id="LOCAL-00001" summary="Merging">
       <created>1496129612668</created>
@@ -436,33 +536,41 @@
       <option name="project" value="LOCAL" />
       <updated>1496129612668</updated>
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="Merging completed">
+      <created>1496129996798</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1496129996798</updated>
+    </task>
+    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="548000" />
+    <option name="totallyTimeSpent" value="71302000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="-8" y="-8" width="1456" height="876" extended-state="6" />
+    <editor active="true" />
     <layout>
-      <window_info id="TypeScript" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3293011" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.2496474" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293011" sideWeight="0.49717912" order="11" side_tool="false" content_ui="tabs" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25599435" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
-      <window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293011" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
-      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293011" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
-      <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
+      <window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3293011" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293011" sideWeight="0.50282085" order="7" side_tool="true" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293011" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3293011" sideWeight="0.49717912" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
+      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
+      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="true" content_ui="tabs" />
       <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
       <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
-      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
       <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
+      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
     </layout>
   </component>
@@ -504,6 +612,12 @@
         <option value="$PROJECT_DIR$/src/app/app.module.js.map" />
         <option value="$PROJECT_DIR$/src/app/app.component.js" />
         <option value="$PROJECT_DIR$/src/app/app.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/textarea-input.component.js" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/textarea-input.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/services/value.service.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/services/value.service.js" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/types/keys.pipe.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/types/keys.pipe.js" />
       </list>
     </option>
   </component>
@@ -513,60 +627,338 @@
   <component name="VcsManagerConfiguration">
     <MESSAGE value="Merging" />
     <MESSAGE value="Merging completed" />
-    <option name="LAST_COMMIT_MESSAGE" value="Merging completed" />
+    <MESSAGE value="added validation, error messages, help tooptips, async question loading and textarea input" />
+    <option name="LAST_COMMIT_MESSAGE" value="added validation, error messages, help tooptips, async question loading and textarea input" />
   </component>
   <component name="XDebuggerManager">
-    <breakpoint-manager />
+    <breakpoint-manager>
+      <option name="time" value="2" />
+    </breakpoint-manager>
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
           <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
-          <folding>
-            <element signature="e#0#54#0" expanded="true" />
-          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        <state relative-caret-position="85">
+          <caret line="5" column="19" lean-forward="false" selection-start-line="5" selection-start-column="19" selection-end-line="5" selection-end-column="19" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        <state relative-caret-position="408">
+          <caret line="24" column="46" lean-forward="false" selection-start-line="24" selection-start-column="46" selection-end-line="24" selection-end-column="46" />
           <folding>
-            <element signature="e#0#59#0" expanded="true" />
+            <element signature="e#0#95#0" expanded="true" />
+            <marker date="1496417492032" expanded="true" signature="315:695" ph="..." />
+            <marker date="1496417492032" expanded="true" signature="600:683" ph="..." />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
-          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <caret line="0" column="84" lean-forward="false" selection-start-line="0" selection-start-column="75" selection-end-line="0" selection-end-column="84" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="323">
+          <caret line="21" column="27" lean-forward="false" selection-start-line="21" selection-start-column="27" selection-end-line="21" selection-end-column="27" />
           <folding>
-            <element signature="e#0#80#0" expanded="true" />
+            <element signature="e#0#69#0" expanded="true" />
+            <marker date="1496417101926" expanded="true" signature="304:2231" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="766:1071" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1121:1379" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1433:1763" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1816:2082" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="2137:2218" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="85">
+          <caret line="14" column="17" lean-forward="false" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" />
+          <folding>
+            <element signature="e#0#53#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="816">
+          <caret line="51" column="38" lean-forward="false" selection-start-line="51" selection-start-column="38" selection-end-line="51" selection-end-column="38" />
+          <folding>
+            <marker date="1496417102661" expanded="true" signature="399:512" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/textarea-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="629">
+          <caret line="37" column="21" lean-forward="true" selection-start-line="37" selection-start-column="21" selection-end-line="37" selection-end-column="21" />
+          <folding>
+            <marker date="1496416164940" expanded="true" signature="343:363" ph="..." />
           </folding>
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/services/question.service.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="68">
-          <caret line="6" column="22" lean-forward="false" selection-start-line="6" selection-start-column="22" selection-end-line="6" selection-end-column="22" />
+        <state relative-caret-position="799">
+          <caret line="47" column="7" lean-forward="true" selection-start-line="47" selection-start-column="7" selection-end-line="47" selection-end-column="7" />
           <folding />
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="374">
+          <caret line="22" column="6" lean-forward="true" selection-start-line="22" selection-start-column="6" selection-end-line="22" selection-end-column="6" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="408">
+          <caret line="24" column="46" lean-forward="true" selection-start-line="24" selection-start-column="46" selection-end-line="24" selection-end-column="46" />
+          <folding>
+            <element signature="e#0#95#0" expanded="true" />
+            <marker date="1496417492032" expanded="true" signature="315:695" ph="..." />
+            <marker date="1496417492032" expanded="true" signature="600:683" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="84" lean-forward="false" selection-start-line="0" selection-start-column="75" selection-end-line="0" selection-end-column="84" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="357">
+          <caret line="21" column="27" lean-forward="true" selection-start-line="21" selection-start-column="27" selection-end-line="21" selection-end-column="27" />
+          <folding>
+            <element signature="e#0#69#0" expanded="true" />
+            <marker date="1496417101926" expanded="true" signature="304:2231" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="766:1071" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1121:1379" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1433:1763" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1816:2082" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="2137:2218" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="238">
+          <caret line="14" column="17" lean-forward="true" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" />
+          <folding>
+            <element signature="e#0#53#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="272">
+          <caret line="16" column="7" lean-forward="true" selection-start-line="16" selection-start-column="7" selection-end-line="16" selection-end-column="7" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="867">
+          <caret line="51" column="38" lean-forward="false" selection-start-line="51" selection-start-column="38" selection-end-line="51" selection-end-column="38" />
+          <folding>
+            <marker date="1496417102661" expanded="true" signature="399:512" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="17">
+          <caret line="1" column="55" lean-forward="false" selection-start-line="1" selection-start-column="55" selection-end-line="1" selection-end-column="55" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/package.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js.map">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+      <provider editor-type-id="sourcemapFileViewerProvider">
+        <state />
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="459">
+          <caret line="27" column="23" lean-forward="false" selection-start-line="27" selection-start-column="23" selection-end-line="27" selection-end-column="23" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/tslint.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="136">
+          <caret line="8" column="14" lean-forward="false" selection-start-line="8" selection-start-column="14" selection-end-line="8" selection-end-column="14" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bs-config.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="119">
+          <caret line="7" column="21" lean-forward="false" selection-start-line="7" selection-start-column="21" selection-end-line="7" selection-end-column="21" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/sizer.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="136">
+          <caret line="8" column="9" lean-forward="true" selection-start-line="8" selection-start-column="9" selection-end-line="8" selection-end-column="9" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/@angular/forms/src/directives/validators.d.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="17">
+          <caret line="162" column="3" lean-forward="false" selection-start-line="162" selection-start-column="3" selection-end-line="162" selection-end-column="3" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="29" lean-forward="false" selection-start-line="0" selection-start-column="29" selection-end-line="0" selection-end-column="29" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="527">
+          <caret line="31" column="18" lean-forward="false" selection-start-line="31" selection-start-column="18" selection-end-line="31" selection-end-column="18" />
+          <folding>
+            <element signature="e#0#94#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="47" lean-forward="false" selection-start-line="0" selection-start-column="47" selection-end-line="0" selection-end-column="47" />
+          <folding>
+            <marker date="1496417102661" expanded="true" signature="399:512" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="168">
+          <caret line="17" column="6" lean-forward="false" selection-start-line="17" selection-start-column="6" selection-end-line="17" selection-end-column="6" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/textarea-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="117">
+          <caret line="38" column="18" lean-forward="false" selection-start-line="38" selection-start-column="18" selection-end-line="38" selection-end-column="18" />
+          <folding>
+            <marker date="1496416164940" expanded="true" signature="343:363" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/services/question.service.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="136">
+          <caret line="10" column="52" lean-forward="false" selection-start-line="10" selection-start-column="52" selection-end-line="10" selection-end-column="52" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/keys.pipe.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="17">
+          <caret line="1" column="0" lean-forward="false" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="527">
+          <caret line="31" column="10" lean-forward="false" selection-start-line="31" selection-start-column="10" selection-end-line="31" selection-end-column="10" />
+          <folding>
+            <element signature="e#0#53#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/services/response.interface.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="0">
           <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
@@ -574,13 +966,145 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/services/http-base.service.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="141">
-          <caret line="45" column="12" lean-forward="false" selection-start-line="45" selection-start-column="12" selection-end-line="45" selection-end-column="12" />
+        <state relative-caret-position="-1649">
+          <caret line="20" column="7" lean-forward="false" selection-start-line="20" selection-start-column="4" selection-end-line="20" selection-end-column="7" />
           <folding>
-            <element signature="e#0#114#0" expanded="true" />
-            <marker date="1496129954275" expanded="true" signature="748:861" ph="..." />
+            <element signature="e#0#76#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="115" lean-forward="false" selection-start-line="0" selection-start-column="115" selection-end-line="0" selection-end-column="115" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="255">
+          <caret line="15" column="46" lean-forward="false" selection-start-line="15" selection-start-column="46" selection-end-line="15" selection-end-column="46" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/styles.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/systemjs.config.extras.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding>
+            <element signature="n#!!doc" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/systemjs.config.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="440">
+          <caret line="35" column="11" lean-forward="false" selection-start-line="35" selection-start-column="11" selection-end-line="35" selection-end-column="11" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/systemjs-angular-loader.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="0">
+          <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/tsconfig.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="102">
+          <caret line="6" column="16" lean-forward="false" selection-start-line="6" selection-start-column="16" selection-end-line="6" selection-end-column="16" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/services/http-cached.service.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="731">
+          <caret line="46" column="0" lean-forward="true" selection-start-line="46" selection-start-column="0" selection-end-line="46" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="51">
+          <caret line="6" column="13" lean-forward="true" selection-start-line="6" selection-start-column="13" selection-end-line="6" selection-end-column="13" />
+          <folding>
+            <element signature="e#0#95#0" expanded="true" />
+            <marker date="1496417492032" expanded="true" signature="315:695" ph="..." />
+            <marker date="1496417492032" expanded="true" signature="600:683" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="270">
+          <caret line="21" column="8" lean-forward="false" selection-start-line="21" selection-start-column="8" selection-end-line="21" selection-end-column="8" />
+          <folding>
+            <element signature="e#0#40#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/services/value.service.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="17">
+          <caret line="1" column="72" lean-forward="false" selection-start-line="1" selection-start-column="72" selection-end-line="1" selection-end-column="72" />
+          <folding>
+            <element signature="e#0#43#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="158">
+          <caret line="29" column="10" lean-forward="false" selection-start-line="29" selection-start-column="10" selection-end-line="29" selection-end-column="10" />
+          <folding>
+            <element signature="e#0#59#0" expanded="true" />
+            <marker date="1496417102606" expanded="true" signature="404:466" ph="..." />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="158">
+          <caret line="43" column="2" lean-forward="true" selection-start-line="43" selection-start-column="2" selection-end-line="43" selection-end-column="2" />
+          <folding>
+            <element signature="e#0#69#0" expanded="true" />
+            <marker date="1496417101926" expanded="true" signature="304:2231" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="766:1071" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1121:1379" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1433:1763" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="1816:2082" ph="..." />
+            <marker date="1496417101926" expanded="true" signature="2137:2218" ph="..." />
           </folding>
         </state>
       </provider>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c16687d..3be3a52 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
-import {Component, Inject} from '@angular/core';
+import {Component} from '@angular/core';
 import {QuestionInterface} from './modules/dyn-form/types/question.interface';
 import {QuestionService} from './modules/dyn-form/services/question.service';
+import {ValueService} from './modules/dyn-form/services/value.service';
 
 @Component({
   selector: 'my-app',
@@ -8,16 +9,21 @@ import {QuestionService} from './modules/dyn-form/services/question.service';
 })
 
 export class AppComponent  {
-  public formQuestions: QuestionInterface[] = [];
+  public formQuestions: QuestionInterface[] = null;
+  public formValue: Object = null;
 
-  constructor(private questionService: QuestionService) {
+  constructor(private questionService: QuestionService, private valueService: ValueService) {
     this.questionService.getQuestions((res, err) => {
-      this.formQuestions = res;
+      if (!err)
+        this.formQuestions = res;
+    });
+    this.valueService.getValues((res, err) => {
+      if (!err)
+        this.formValue = res;
     });
   }
 
-
-  submit(value: any) {
+  static submit(value: any) {
     console.log('send', value);
   }
 }
diff --git a/src/app/modules/dyn-form/dyn-form.component.ts b/src/app/modules/dyn-form/dyn-form.component.ts
index 608100c..32446ee 100644
--- a/src/app/modules/dyn-form/dyn-form.component.ts
+++ b/src/app/modules/dyn-form/dyn-form.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
 import {QuestionInterface} from './types/question.interface';
 import {FormControl, FormGroup} from '@angular/forms';
 
@@ -6,33 +6,39 @@ import {FormControl, FormGroup} from '@angular/forms';
   selector: 'dyn-form',
   template: `
     <form (ngSubmit)="submit()" [formGroup]="form">
-      <dyn-question *ngFor="let question of questions" [hidden]="question.properties.methods && question.properties.methods.indexOf(type)==-1" [question]="question" [form]="form" [type]="type"></dyn-question>
+      <dyn-question *ngFor="let question of questions" [hidden]="question.properties.methods && question.properties.methods.indexOf(type)==-1" [question]="question" [form]="form" [type]="type" (onChange)="valueChange.emit(this.form.value)"></dyn-question>
       <div class="form-row">
-        <button type="submit">Save</button>
+        <button [disabled]="form.invalid" type="submit">Save</button>
       </div>
     </form>
     `
 })
-export class DynFormComponent implements OnInit {
+export class DynFormComponent implements OnChanges {
   @Input() questions: QuestionInterface[];
-  @Input() value: any;
+  @Input() value: {[_:string]: any};
   @Input() type: "'insert'|'update'|'delete'|'view'";
   @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
   @Output() onSubmit: EventEmitter<any> = new EventEmitter<any>();
 
   private form: FormGroup;
 
-  public ngOnInit () {
-    let controls = {};
-    for(let i = 0; i < this.questions.length; i++) {
-      let key = this.questions[i].properties.key;
-      controls[key] = new FormControl(this.value[key]);
+  public ngOnChanges(changes: SimpleChanges) {
+    console.log("changes form", changes);
+    if (changes['questions']) {
+      let controls = {};
+      for(let i = 0; this.questions && i < this.questions.length; i++) {
+        let key = this.questions[i].properties.key;
+        controls[key] = new FormControl();
+      }
+      this.form = new FormGroup(controls);
+    }
+    if ((changes['questions'] || changes['value']) && this.form && this.value) {
+      this.form.patchValue(this.value);
     }
-    this.form = new FormGroup(controls);
   }
 
   private submit() {
-    console.log("isValid", this.form.valid);
-    this.onSubmit.emit(this.form.value);
+    if (this.form.valid)
+      this.onSubmit.emit(this.form.value);
   }
 }
diff --git a/src/app/modules/dyn-form/dyn-form.module.ts b/src/app/modules/dyn-form/dyn-form.module.ts
index baea750..48c6f18 100644
--- a/src/app/modules/dyn-form/dyn-form.module.ts
+++ b/src/app/modules/dyn-form/dyn-form.module.ts
@@ -4,10 +4,13 @@ import { NgModule } from '@angular/core';
 import { DynFormComponent } from './dyn-form.component';
 import {DynQuestionComponent} from './dyn-question.component';
 import {CounterInputComponent} from './inputs/counter-input.component';
-import {KeysPipe, TagInputComponent} from './inputs/tag-input.component';
+import {TagInputComponent} from './inputs/tag-input.component';
 import {HiddenInputComponent} from './inputs/hidden-input.component';
 import {DropdownInputComponent} from './inputs/dropdown-input.component';
 import {QuestionService} from './services/question.service';
+import {TextareaInputComponent} from './inputs/textarea-input.component';
+import {ValueService} from './services/value.service';
+import {KeysPipe} from './types/keys.pipe';
 
 
 @NgModule({
@@ -25,10 +28,12 @@ import {QuestionService} from './services/question.service';
     TagInputComponent,
     HiddenInputComponent,
     DropdownInputComponent,
+    TextareaInputComponent,
     KeysPipe
   ],
   providers: [
-    QuestionService
+    QuestionService,
+    ValueService
   ],
 })
 export class DynFormModule { }
diff --git a/src/app/modules/dyn-form/dyn-question.component.ts b/src/app/modules/dyn-form/dyn-question.component.ts
index 296d4a7..1d9aee1 100644
--- a/src/app/modules/dyn-form/dyn-question.component.ts
+++ b/src/app/modules/dyn-form/dyn-question.component.ts
@@ -1,27 +1,38 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {QuestionInterface} from './types/question.interface';
-import {FormGroup} from '@angular/forms';
+import {FormGroup, ValidationErrors} from '@angular/forms';
 
 @Component({
   selector: 'dyn-question',
   template: `
-    <div [ngSwitch]="question.type" [formGroup]="form">
-      <label [for]="question.properties.key">{{question.properties.label}}</label>
-        <tag-input *ngSwitchCase="'flag'"
-                   [formControlName]="question.properties.key" [id]="question.properties.key"
-                   [nullable]="question.constraints.optional" [readonly]="type=='view'"
-                   [items]="question.properties.options"
-                   (ngModelChange)="change()"></tag-input>
-        <hidden-input *ngSwitchCase="'hidden'"
-                   [formControlName]="question.properties.key" [id]="question.properties.key"
-                   [nullable]="question.constraints.optional" [readonly]="type=='view'"
-                   (ngModelChange)="change()"></hidden-input>
-        <dropdown-input *ngSwitchCase="'dropdown'"
-                   [formControlName]="question.properties.key" [id]="question.properties.key"
-                   [nullable]="question.constraints.optional" [readonly]="type=='view'" 
-                   [items]="question.properties.options"
-                   (ngModelChange)="change()"></dropdown-input>
-    </div>
+      <div [ngSwitch]="question.type" [formGroup]="form">
+          <label [for]="question.properties.key">{{question.properties.label ? question.properties.label + (question.constraints.optional ? '' : ' *') : ''}}</label>
+          <i [hidden]="question.description" class="help circle icon" (mouseover)="onHover(true)" (mouseout)="onHover(false)">Help</i>
+          <a [hidden]="!hoverState" class="ui pointing red basic label">{{question.description}}</a><br>
+          
+          <tag-input *ngSwitchCase="'flag'"
+                     [formControlName]="question.properties.key" [id]="question.properties.key"
+                     [nullable]="question.constraints.optional" [readonly]="type=='view'"
+                     [items]="question.properties.options"
+                     (ngModelChange)="change()"></tag-input>
+          <hidden-input *ngSwitchCase="'hidden'"
+                        [formControlName]="question.properties.key" [id]="question.properties.key"
+                        [nullable]="question.constraints.optional" [readonly]="type=='view'"
+                        (ngModelChange)="change()"></hidden-input>
+          <dropdown-input *ngSwitchCase="'dropdown'"
+                          [formControlName]="question.properties.key" [id]="question.properties.key"
+                          [nullable]="question.constraints.optional" [readonly]="type=='view'"
+                          [items]="question.properties.options"
+                          (ngModelChange)="change()"></dropdown-input>
+          <textarea-input *ngSwitchCase="'textbox'"
+                          [formControlName]="question.properties.key" [id]="question.properties.key"
+                          [nullable]="question.constraints.optional" [readonly]="type=='view'"
+                          (ngModelChange)="change()"></textarea-input>
+          
+          <ul [hidden]="!errorList.length">
+              <li *ngFor="let error of errorList">{{error}}</li>
+          </ul>
+      </div>
   `
 })
 export class DynQuestionComponent {
@@ -29,8 +40,26 @@ export class DynQuestionComponent {
   @Input() type: "'insert'|'update'|'delete'|'view'";
   @Input() form: FormGroup;
   @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
+  public hoverState: any = false;
+  private errorList: Array<string> = [];
+
+  onHover(state: boolean) {
+    this.hoverState = state;
+  }
 
   change() {
-    this.onChange.emit();
+    setTimeout(() => {
+      this.errorList = [];
+      let control = this.form.controls[this.question.properties.key];
+      if (control.untouched || control.valid)
+        return null;
+      let errors: ValidationErrors = control.errors;
+      for (let key in errors) {
+        if (errors.hasOwnProperty(key)) {
+          this.errorList.push(errors[key].message);
+        }
+      }
+      this.onChange.emit();
+    }, 0);
   }
 }
diff --git a/src/app/modules/dyn-form/inputs/counter-input.component.ts b/src/app/modules/dyn-form/inputs/counter-input.component.ts
index 5fd0d80..660b036 100644
--- a/src/app/modules/dyn-form/inputs/counter-input.component.ts
+++ b/src/app/modules/dyn-form/inputs/counter-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core';
+import {Component, forwardRef} from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
 import {CustomInputComponent} from "./custom-input.component";
 
@@ -6,9 +6,9 @@ import {CustomInputComponent} from "./custom-input.component";
   selector: 'counter-input',
   template:
       `
-    <button (click)="onChange(-1)" (blur)="onBlur()">-</button>
+    <button (click)="onChange(-1)">-</button>
     {{value}}
-    <button (click)="onChange(1)" (blur)="onBlur()">+</button>
+    <button (click)="onChange(1)">+</button>
   `,
   providers: [
     {
@@ -23,6 +23,7 @@ import {CustomInputComponent} from "./custom-input.component";
     }]
 })
 export class CounterInputComponent extends CustomInputComponent {
+
   // set initial value
   public writeValue(obj: any): void {
     if (obj) {
@@ -33,9 +34,12 @@ export class CounterInputComponent extends CustomInputComponent {
 
   // validates the form, returns null when valid else the validation object
   public validate(c: FormControl): ValidationErrors {
+    if (!this.initComplete)
+      return null;
     return (!this.parseError) ? null : {
       numberParseError: {
         valid: false,
+        message: "Not a valid number!"
       },
     };
   }
@@ -47,9 +51,4 @@ export class CounterInputComponent extends CustomInputComponent {
 
     super.change();
   }
-
-  // on touched
-  protected onBlur(): void {
-    super.blur();
-  }
 }
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/inputs/custom-input.component.ts b/src/app/modules/dyn-form/inputs/custom-input.component.ts
index 1a2f61b..85a2b74 100644
--- a/src/app/modules/dyn-form/inputs/custom-input.component.ts
+++ b/src/app/modules/dyn-form/inputs/custom-input.component.ts
@@ -1,10 +1,20 @@
 import {ControlValueAccessor, FormControl, ValidationErrors, Validator} from '@angular/forms';
+import {AfterViewInit} from '@angular/core';
 
-export abstract class CustomInputComponent implements ControlValueAccessor, Validator {
+export abstract class CustomInputComponent implements ControlValueAccessor, Validator, AfterViewInit {
   protected value: any;
   protected parseError: boolean;
   private propagateChange: (_: any) => void = () => {};
   private propagateTouch: () => void = () => {};
+  protected initComplete: boolean = false;
+  private isTouched: boolean = false;
+
+  public ngAfterViewInit() {
+    setTimeout(() => {
+      this.initComplete = true;
+      this.change();
+    }, 0);
+  }
 
   // set initial value
   public abstract writeValue(obj: any): void;
@@ -23,12 +33,17 @@ export abstract class CustomInputComponent implements ControlValueAccessor, Vali
   public abstract validate(c: FormControl): ValidationErrors;
 
   // on change
-  protected change(): void {
+  protected change(noTouch?: boolean): void {
+    if (!noTouch)
+      this.touch();
     this.propagateChange(this.value);
   }
 
-  // on touch
-  protected blur(): void {
-    this.propagateTouch();
+  // on change
+  protected touch(): void {
+    if (!this.isTouched) {
+      this.propagateTouch();
+      this.isTouched = true;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/inputs/dropdown-input.component.ts b/src/app/modules/dyn-form/inputs/dropdown-input.component.ts
index 96d18f3..8891776 100644
--- a/src/app/modules/dyn-form/inputs/dropdown-input.component.ts
+++ b/src/app/modules/dyn-form/inputs/dropdown-input.component.ts
@@ -1,18 +1,6 @@
-import {Component, forwardRef, Inject, Input, OnChanges, Pipe, PipeTransform, SimpleChanges} from '@angular/core';
+import {Component, forwardRef, Input, OnChanges, SimpleChanges} from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
 import {CustomInputComponent} from "./custom-input.component";
-import {HttpCachedService} from '../../../services/http-cached.service';
-
-@Pipe({name: 'keys'})
-export class KeysPipe implements PipeTransform {
-  transform(value: Object, args:string[]) : any {
-    let keys = [];
-    for (let key in value) {
-      keys.push({key: key, value: value[key]});
-    }
-    return keys;
-  }
-}
 
 @Component({
   selector: 'dropdown-input',
@@ -42,10 +30,6 @@ export class DropdownInputComponent extends CustomInputComponent implements OnCh
   private listedItems: Array<{key: string, value: string}> = [];
   private constVal: string;
 
-  constructor(private httpCachedService: HttpCachedService) {
-    super();
-  }
-
   // set initial value
   public writeValue(obj: any): void {
     console.log("init: ", obj);
@@ -54,15 +38,18 @@ export class DropdownInputComponent extends CustomInputComponent implements OnCh
   }
 
   public ngOnChanges(changes: SimpleChanges) {
-    if (changes['items'] || changes['nullable']) {
+    console.log("onchnage: ", this.value);
+    if (changes['items'] || changes['nullable'] || changes['readonly']) {
       if (this.nullable)
         this.listedItems = [{key: "", value: "N/A"}, {key: null, value: "N/A"}].concat(this.items);
       else
-        this.listedItems = [].concat(this.items);
+        this.listedItems = this.items;
+      this.updateConst();
     }
-    this.updateConst();
   }
 
+
+
   private updateConst() {
     if (this.readonly) {
       for (let i=0; i<this.listedItems.length; i++) {
@@ -72,19 +59,29 @@ export class DropdownInputComponent extends CustomInputComponent implements OnCh
         }
       }
     }
-    console.log(this.readonly, this.listedItems, this.value, this.constVal);
   }
 
   // validates the form, returns null when valid else the validation object
   public validate(c: FormControl): ValidationErrors {
+    console.log("validate", this.value, this.initComplete, this.nullable, this.items);
+    if (!this.initComplete)
+      return null;
     if (this.value===null) {
-      return this.nullable ? null : {notNullable: {valid: false}};
+      return this.nullable ? null : {notNullable: {
+        valid: false,
+        message: "This field is required!"
+      }};
     }
     for (let i=0; i<this.items.length; i++) {
+      console.log(this.items[i].key, this.value);
       if (this.items[i].key==this.value)
         return null;
     }
-    return {invalidValue: {valid: false}};
+    console.log("ret invalid");
+    return {invalidValue: {
+      valid: false,
+      message: "This value is invalid. Please select another value!"
+    }};
   }
 
   // on button click
diff --git a/src/app/modules/dyn-form/inputs/tag-input.component.ts b/src/app/modules/dyn-form/inputs/tag-input.component.ts
index c2acd5e..ee46d32 100644
--- a/src/app/modules/dyn-form/inputs/tag-input.component.ts
+++ b/src/app/modules/dyn-form/inputs/tag-input.component.ts
@@ -1,18 +1,7 @@
-import {Component, forwardRef, Input, Pipe, PipeTransform} from '@angular/core';
+import {Component, forwardRef, Input} from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
 import {CustomInputComponent} from "./custom-input.component";
 
-@Pipe({name: 'keys'})
-export class KeysPipe implements PipeTransform {
-  transform(value: Object, args:string[]) : any {
-    let keys = [];
-    for (let key in value) {
-      keys.push({key: key, value: value[key]});
-    }
-    return keys;
-  }
-}
-
 @Component({
   selector: 'tag-input',
   template:
@@ -61,7 +50,7 @@ export class TagInputComponent extends CustomInputComponent {
     console.log("writeValue", isUpdated, this.value);
 
     if (isUpdated) {
-      setTimeout(() => super.change(), 0);
+      setTimeout(() => super.change(true), 0);
     }
   }
 
diff --git a/src/app/modules/dyn-form/inputs/textarea-input.component.ts b/src/app/modules/dyn-form/inputs/textarea-input.component.ts
new file mode 100644
index 0000000..a8c1071
--- /dev/null
+++ b/src/app/modules/dyn-form/inputs/textarea-input.component.ts
@@ -0,0 +1,54 @@
+import {Component, forwardRef, Input} from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
+import {CustomInputComponent} from "./custom-input.component";
+
+@Component({
+  selector: 'textarea-input',
+  template:
+      `
+    <textarea *ngIf="!readonly" (keyup)="onChange($event)">{{value}}</textarea>
+    <span *ngIf="readonly">{{value}}</span>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextareaInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => TextareaInputComponent),
+      multi: true,
+    }]
+})
+export class TextareaInputComponent extends CustomInputComponent {
+  @Input() readonly: boolean = false;
+  @Input() nullable: boolean = false;
+
+
+  // set initial value
+  public writeValue(obj: any): void {
+    if (obj) {
+      this.value = obj + '';
+    }
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    if (!this.initComplete)
+      return null;
+    console.log("no error?", !!(this.nullable || this.value));
+    return this.nullable || (this.value) ? null : {notNullable: {
+      valid: false,
+      message: "This field is required!"
+    }};
+  }
+
+  // on button click
+  protected onChange($event: KeyboardEvent): void {
+    this.value = $event.target['value'];
+    console.log("NEW:", this.value, $event.target, $event.target['value']);
+
+    super.change();
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/services/question.service.ts b/src/app/modules/dyn-form/services/question.service.ts
index 0f20611..d392974 100644
--- a/src/app/modules/dyn-form/services/question.service.ts
+++ b/src/app/modules/dyn-form/services/question.service.ts
@@ -8,14 +8,14 @@ export class QuestionService {
 
   }
   public getQuestions(cb: (res: QuestionInterface[], err: any) => void) {
-    setTimeout(() => cb([
+    setTimeout(() => cb(QuestionService.orderItems([
       {
         type: 'flag',
         description: 'This is a help tooltip',
         properties: {
           key: 'flags',
           label: 'Form Type Flags',
-          order: 1,
+          order: 3,
 
           // dropdown && flags
           options: [{key: 'alpha', value: 'A'}, {key: 'beta', value: 'B'}, {key: 'gamma', value: 'C'}, {key: 'delta', value: 'D'}]
@@ -41,11 +41,34 @@ export class QuestionService {
         description: 'ID',
         properties: {
           key: 'ID',
-          order: 3
+          order: 1
+        }, constraints: {
+          optional: false
+        }
+      }, {
+        type: 'textbox',
+        description: 'This is a very long box. Fill it!',
+        properties: {
+          key: 'textarea',
+          label: 'Textareaaaa',
+          order: 4
         }, constraints: {
           optional: false
         }
       }
-    ], null), 4000);
+    ]), null), 10);
+  }
+
+  private static orderItems(list: Array <any>) {
+    function compare(a: any, b: any) {
+      if (a.properties.order < b.properties.order)
+        return -1;
+      if (a.properties.order > b.properties.order)
+        return 1;
+      return 0;
+    }
+
+    list.sort(compare);
+    return list;
   }
 }
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/services/value.service.ts b/src/app/modules/dyn-form/services/value.service.ts
new file mode 100644
index 0000000..b1c383d
--- /dev/null
+++ b/src/app/modules/dyn-form/services/value.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import {HttpCachedService} from '../../../services/http-cached.service';
+
+@Injectable()
+export class ValueService {
+  constructor(private httpCachedService: HttpCachedService) {
+
+  }
+  public getValues(cb: (res: Object, err: any) => void) {
+    setTimeout(() => cb({flags:{alpha:true}, ID: 50, textarea: "a long text", cooldrop: "u"}, null), 15);
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/types/keys.pipe.ts b/src/app/modules/dyn-form/types/keys.pipe.ts
new file mode 100644
index 0000000..7b67b97
--- /dev/null
+++ b/src/app/modules/dyn-form/types/keys.pipe.ts
@@ -0,0 +1,12 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'keys'})
+export class KeysPipe implements PipeTransform {
+  transform(value: Object, args:string[]) : any {
+    let keys = [];
+    for (let key in value) {
+      keys.push({key: key, value: value[key]});
+    }
+    return keys;
+  }
+}
\ No newline at end of file
diff --git a/src/app/services/http-cached.service.ts b/src/app/services/http-cached.service.ts
index 503b060..6d67e82 100644
--- a/src/app/services/http-cached.service.ts
+++ b/src/app/services/http-cached.service.ts
@@ -7,7 +7,7 @@ import { ResponseInterface } from './response.interface';
 export class HttpCachedService extends HttpService {
   private _stored: any = {}; // {data: ResponseInterface, e: Response}
 
-  get refreshTime() {
+  static get refreshTime() {
     return 3*1000;
   }
 
@@ -16,7 +16,7 @@ export class HttpCachedService extends HttpService {
   }
 
   getJSON(uri: string, query: {[propName: string]: any}, dataFunc: (data: ResponseInterface, e: Response | any) => void) {
-    var hash: string = this._hashRequest("GET", uri, query);
+    const hash: string = this._hashRequest('GET', uri, query);
     if (this._stored.hasOwnProperty(hash)) {
       if (this._stored[hash] instanceof Array) {
         // pending request, add to event emitter
@@ -31,30 +31,29 @@ export class HttpCachedService extends HttpService {
       super.getJSON(uri, query, (data, e) => {
         // request recieved, emit to caller and event subscriber
         dataFunc(data, e);
-        for (var i = this._stored[hash].length - 1; i >= 0; i--) {
+        for (let i = this._stored[hash].length - 1; i >= 0; i--) {
           this._stored[hash][i](data, e);
         }
         this._stored[hash] = {
           data: data,
           e: e
         };
-        var that = this;
-        setTimeout(function() {
-          delete that._stored[hash];
-        }, this.refreshTime);
+        setTimeout(() => {
+          delete this._stored[hash];
+        }, HttpCachedService.refreshTime);
       });
     }
   }
 
   private _hashRequest(method: string, uri: string, query?: Object): string {
     function objectToString(obj: Object = {}) {
-      var keys: string[] = [];
-      var result: string = '{';
-      for (var key in obj)
+      const keys: string[] = [];
+      let result: string = '{';
+      for (let key in obj)
         if (obj.hasOwnProperty(key))
           keys.push(key);
       keys.sort();
-      for (var i = keys.length - 1; i >= 0; i--) {
+      for (let i = keys.length - 1; i >= 0; i--) {
         result += keys[i]+':"'+obj[keys[i]]+'",'
       }
       result += '}';
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 0bb1df7..004c8e4 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -4,8 +4,8 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
-    "mapRoot":"/src/",
-    "sourceRoot":"/src/",
+    "mapRoot":"/",
+    "sourceRoot":"/src/app",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [ "es2015", "dom" ],