From 5f66284d0202a8c438a03277d8cffed30f7c238a Mon Sep 17 00:00:00 2001
From: Caesar2011 <mail@sebse.de>
Date: Tue, 30 May 2017 07:37:33 +0200
Subject: [PATCH] Added Dropdown and Hidden Input

---
 .idea/workspace.xml                           | 405 +++++++-----------
 src/app/app.component.html                    |  23 +-
 src/app/app.component.ts                      |  51 ++-
 src/app/app.module.ts                         |  23 +-
 .../modules/dyn-form/dyn-form.component.ts    |  18 +-
 src/app/modules/dyn-form/dyn-form.module.ts   |   6 +-
 .../dyn-form/dyn-question.component.ts        |  20 +-
 .../inputs/dropdown-input.component.ts        |  98 +++++
 .../dyn-form/inputs/hidden-input.component.ts |  33 ++
 .../dyn-form/inputs/tag-input.component.ts    |   7 +-
 src/app/services/hello.service.ts             |   8 +
 src/tsconfig.json                             |   2 +
 12 files changed, 392 insertions(+), 302 deletions(-)
 create mode 100644 src/app/modules/dyn-form/inputs/dropdown-input.component.ts
 create mode 100644 src/app/modules/dyn-form/inputs/hidden-input.component.ts
 create mode 100644 src/app/services/hello.service.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 639a8e8..e84326a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,18 +2,18 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="6120f49a-9ac6-41db-b526-7ddb25dbd802" name="Default" comment="Added Tag Input">
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.ts" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.ts" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.ts" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts" />
-      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.ts" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.ts" />
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/app/services/hello.service.ts" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/bs-config.json" afterPath="$PROJECT_DIR$/bs-config.json" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/app.component.html" afterPath="$PROJECT_DIR$/src/app/app.component.html" />
       <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/app.module.ts" afterPath="$PROJECT_DIR$/src/app/app.module.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/tag-input.component.ts" afterPath="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.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/" />
@@ -28,81 +28,16 @@
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="app.component.html" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
+      <file leaf-file-name="question.interface.ts" pinned="false" current-in-tab="true">
+        <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="289">
-              <caret line="17" column="34" lean-forward="false" selection-start-line="17" selection-start-column="34" selection-end-line="17" selection-end-column="34" />
+            <state relative-caret-position="240">
+              <caret line="12" column="18" lean-forward="false" selection-start-line="12" selection-start-column="18" selection-end-line="12" selection-end-column="18" />
               <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <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="374">
-              <caret line="22" column="28" lean-forward="true" selection-start-line="22" selection-start-column="28" selection-end-line="22" selection-end-column="28" />
-              <folding>
-                <element signature="e#0#42#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="app.module.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/app.module.ts">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="85">
-              <caret line="5" column="42" lean-forward="false" selection-start-line="5" selection-start-column="42" selection-end-line="5" selection-end-column="42" />
-              <folding />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <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="270">
-              <caret line="26" column="32" lean-forward="true" selection-start-line="26" selection-start-column="32" selection-end-line="26" selection-end-column="45" />
-              <folding>
-                <element signature="e#0#77#0" expanded="true" />
-                <marker date="1495191502955" expanded="true" signature="297:321" ph="..." />
-                <marker date="1495191502955" expanded="true" signature="297:504" ph="..." />
-                <marker date="1495191502955" expanded="true" signature="391:497" ph="..." />
-                <marker date="1495191502955" expanded="true" signature="435:492" ph="..." />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="dyn-question.component.ts" pinned="false" current-in-tab="false">
-        <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="170">
-              <caret line="11" column="96" lean-forward="false" selection-start-line="11" selection-start-column="96" selection-end-line="11" selection-end-column="96" />
-              <folding>
-                <element signature="e#0#69#0" expanded="true" />
-                <marker date="1495191136422" expanded="true" signature="284:667" ph="..." />
-                <marker date="1495191136422" expanded="true" signature="410:656" ph="..." />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file leaf-file-name="tag-input.component.ts" pinned="false" current-in-tab="true">
-        <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="306">
-              <caret line="48" column="5" lean-forward="true" selection-start-line="48" selection-start-column="5" selection-end-line="48" selection-end-column="5" />
-              <folding>
-                <element signature="e#0#80#0" expanded="true" />
-                <marker date="1495191211520" expanded="true" signature="672:734" ph="..." />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
     </leaf>
   </component>
   <component name="FileTemplateManagerImpl">
@@ -147,15 +82,20 @@
         <option value="$PROJECT_DIR$/src/app/tag-input.component.ts" />
         <option value="$PROJECT_DIR$/src/app/modules/DynFormModule/dyn-form.module.ts" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/index.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/types/question.interface.ts" />
+        <option value="$PROJECT_DIR$/bs-config.json" />
         <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/app.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/tsconfig.json" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.ts" />
-        <option value="$PROJECT_DIR$/bs-config.json" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/services/hallo.service.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.module.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.component.ts" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts" />
+        <option value="$PROJECT_DIR$/src/app/app.component.html" />
       </list>
     </option>
   </component>
@@ -169,10 +109,10 @@
     <handled-path value="$PROJECT_DIR$/node_modules" />
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="-8" />
-    <option name="y" value="-8" />
-    <option name="width" value="1456" />
-    <option name="height" value="876" />
+    <option name="x" value="1344" />
+    <option name="y" value="-11" />
+    <option name="width" value="1857" />
+    <option name="height" value="1092" />
   </component>
   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
   <component name="ProjectView">
@@ -190,8 +130,8 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="Scratches" />
       <pane id="Scope" />
+      <pane id="Scratches" />
       <pane id="ProjectPane">
         <subPane>
           <PATH>
@@ -291,6 +231,10 @@
               <option name="myItemId" value="types" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="question.interface.ts" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.NestingTreeNode" />
+            </PATH_ELEMENT>
           </PATH>
           <PATH>
             <PATH_ELEMENT>
@@ -330,7 +274,7 @@
     <property name="nodejs_interpreter_path" value="/usr/bin/node" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="HbShouldOpenHtmlAsHb" value="" />
-    <property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
+    <property name="settings.editor.selected.configurable" value="preferences.keymap" />
     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
     <property name="javascript.nodejs.core.library.configured.version" value="6.10.3" />
     <property name="add_unversioned_files" value="true" />
@@ -338,11 +282,13 @@
   </component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/app/modules/dyn-form/inputs" />
       <recent name="$PROJECT_DIR$" />
       <recent name="$PROJECT_DIR$/src" />
       <recent name="/media/sebastian/Daten/nextcloud/Documents/Programmierung/HTML" />
     </key>
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/app/modules/dyn-form/inputs" />
       <recent name="C:\Users\seedorf_s1\WebstormProjects\AngularDynFormModule\src\app\modules\dyn-form\inputs" />
       <recent name="$PROJECT_DIR$/src/app" />
     </key>
@@ -432,14 +378,14 @@
       <scripts>
         <script value="start" />
       </scripts>
-      <node-interpreter value="$USER_HOME$/Documents/Portables/nodejs/node" />
+      <node-interpreter value="project" />
       <envs />
       <method />
     </configuration>
     <configuration default="false" name="Install" type="js.build_tools.npm" factoryName="npm" singleton="false">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="install" />
-      <node-interpreter value="$USER_HOME$/Documents/Portables/nodejs/node" />
+      <node-interpreter value="project" />
       <envs />
       <method />
     </configuration>
@@ -468,6 +414,11 @@
       <workItem from="1495045995828" duration="627000" />
       <workItem from="1495046636215" duration="12312000" />
       <workItem from="1495176737534" duration="11529000" />
+      <workItem from="1495322147875" duration="8418000" />
+      <workItem from="1495404227191" duration="8164000" />
+      <workItem from="1495554511133" duration="16816000" />
+      <workItem from="1495648986976" duration="1434000" />
+      <workItem from="1496122581598" duration="16000" />
     </task>
     <task id="LOCAL-00001" summary="Initial commit">
       <created>1494973365190</created>
@@ -494,22 +445,22 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="34281000" />
+    <option name="totallyTimeSpent" value="69129000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="-8" y="-8" width="1456" height="876" extended-state="6" />
+    <frame x="1344" y="-11" width="1857" height="1092" extended-state="6" />
     <editor active="true" />
     <layout>
       <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.5" order="9" 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.24894217" sideWeight="0.5" order="1" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.17030568" sideWeight="0.5" order="1" 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="12" 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="2" side_tool="true" content_ui="tabs" />
-      <window_info id="Run" 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="7" side_tool="false" 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.32985386" sideWeight="0.5" order="3" 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.32881" sideWeight="0.5" order="7" side_tool="false" 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="2" 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.32985386" sideWeight="0.5" order="4" side_tool="false" 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="8" 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="0" 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="8" 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="10" 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.32985386" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <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="5" side_tool="false" content_ui="tabs" />
@@ -532,27 +483,31 @@
         <option value="$PROJECT_DIR$/src/app/app.module.js.map" />
         <option value="$PROJECT_DIR$/src/app/tag-input.component.js" />
         <option value="$PROJECT_DIR$/src/app/tag-input.component.js.map" />
-        <option value="$PROJECT_DIR$/src/app/app.component.js.map" />
         <option value="$PROJECT_DIR$/src/app/counter-input.component.js" />
+        <option value="$PROJECT_DIR$/src/app/app.component.js.map" />
         <option value="$PROJECT_DIR$/src/app/app.component.js" />
         <option value="$PROJECT_DIR$/src/app/custom-input.module.js.map" />
         <option value="$PROJECT_DIR$/src/app/custom-input.component.js" />
         <option value="$PROJECT_DIR$/src/app/app.module.js" />
         <option value="$PROJECT_DIR$/src/app/custom-input.module.js" />
-        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.js.map" />
-        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.js" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.js" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.js" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.js.map" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.js" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js.map" />
-        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.js" />
-        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-question.component.js.map" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.js" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.js" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.js" />
-        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.js.map" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/custom-input.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/counter-input.component.js.map" />
         <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/tag-input.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.js" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/hidden-input.component.js.map" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.js" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.js.map" />
       </list>
     </option>
   </component>
@@ -571,77 +526,11 @@
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
-      <option name="time" value="1" />
+      <option name="time" value="2" />
     </breakpoint-manager>
     <watches-manager />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="200">
-          <caret line="10" column="70" lean-forward="false" selection-start-line="10" selection-start-column="70" selection-end-line="10" selection-end-column="70" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/.gitignore">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="60">
-          <caret line="3" column="20" lean-forward="true" selection-start-line="3" selection-start-column="20" selection-end-line="3" selection-end-column="20" />
-          <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" />
-          <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="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$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="120">
-          <caret line="6" column="25" lean-forward="false" selection-start-line="6" selection-start-column="25" selection-end-line="6" selection-end-column="26" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/systemjs.config.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="660">
-          <caret line="33" column="15" lean-forward="false" selection-start-line="33" selection-start-column="15" selection-end-line="33" selection-end-column="15" />
-        </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="60">
-          <caret line="8" column="11" lean-forward="false" selection-start-line="8" selection-start-column="11" selection-end-line="8" selection-end-column="11" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1120">
-          <caret line="57" column="31" lean-forward="false" selection-start-line="57" selection-start-column="31" selection-end-line="57" selection-end-column="31" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/bs-config.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/app.component.spec.ts" />
     <entry file="file://$PROJECT_DIR$/src/index.html">
       <provider selected="true" editor-type-id="text-editor">
@@ -695,17 +584,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="80">
           <caret line="4" column="37" lean-forward="false" selection-start-line="4" selection-start-column="37" selection-end-line="4" selection-end-column="37" />
-          <folding>
-            <element signature="e#0#75#0" expanded="false" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/tsconfig.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" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -720,7 +598,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="400">
           <caret line="20" column="27" lean-forward="false" selection-start-line="20" selection-start-column="27" selection-end-line="20" selection-end-column="27" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -730,7 +607,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="206">
           <caret line="12" column="43" lean-forward="false" selection-start-line="12" selection-start-column="43" selection-end-line="12" selection-end-column="43" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -738,7 +614,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="340">
           <caret line="50" column="34" lean-forward="false" selection-start-line="50" selection-start-column="34" selection-end-line="50" selection-end-column="34" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -746,23 +621,14 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="415">
           <caret line="29" column="13" lean-forward="true" selection-start-line="29" selection-start-column="13" selection-end-line="29" selection-end-column="13" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/index.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/app/modules/dyn-form/index.ts" />
     <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-17">
           <caret line="8" column="32" lean-forward="false" selection-start-line="8" selection-start-column="32" selection-end-line="8" selection-end-column="32" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -770,9 +636,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="221">
           <caret line="13" column="21" lean-forward="false" selection-start-line="13" selection-start-column="21" selection-end-line="13" selection-end-column="21" />
-          <folding>
-            <element signature="e#0#43#0" expanded="false" />
-          </folding>
         </state>
       </provider>
     </entry>
@@ -780,7 +643,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="17">
           <caret line="49" column="25" lean-forward="false" selection-start-line="49" selection-start-column="25" selection-end-line="49" selection-end-column="25" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -788,106 +650,165 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="440">
           <caret line="49" column="0" lean-forward="false" selection-start-line="49" selection-start-column="0" selection-end-line="49" 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$/node_modules/@angular/forms/src/directives/validators.d.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="255">
-          <caret line="15" column="0" lean-forward="false" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
-          <folding />
+        <state relative-caret-position="198">
+          <caret line="10" column="11" lean-forward="true" selection-start-line="10" selection-start-column="11" selection-end-line="10" selection-end-column="11" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.js.map">
+      <provider 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 selected="true" editor-type-id="sourcemapFileViewerProvider">
+        <state />
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/inputs/dropdown-input.component.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="289">
-          <caret line="17" column="34" lean-forward="false" selection-start-line="17" selection-start-column="34" selection-end-line="17" selection-end-column="34" />
-          <folding />
+        <state relative-caret-position="920">
+          <caret line="46" column="25" lean-forward="true" selection-start-line="46" selection-start-column="25" selection-end-line="46" selection-end-column="25" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/bs-config.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="119">
+        <state relative-caret-position="140">
           <caret line="7" column="14" lean-forward="false" selection-start-line="7" selection-start-column="14" selection-end-line="7" selection-end-column="14" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/tsconfig.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="220">
+          <caret line="11" column="15" lean-forward="false" selection-start-line="11" selection-start-column="15" selection-end-line="11" selection-end-column="15" />
           <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.module.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="272">
-          <caret line="16" column="4" lean-forward="true" selection-start-line="16" selection-start-column="4" selection-end-line="16" selection-end-column="4" />
-          <folding>
-            <element signature="e#0#53#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="20">
+          <caret line="1" column="25" lean-forward="false" selection-start-line="1" selection-start-column="25" selection-end-line="1" selection-end-column="25" />
+          <folding />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.ts">
+    <entry file="file://$PROJECT_DIR$/src/app/modules/dyn-form/types/question.interface.js.map">
+      <provider 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 selected="true" editor-type-id="sourcemapFileViewerProvider">
+        <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="185">
-          <caret line="19" column="14" lean-forward="false" selection-start-line="19" selection-start-column="14" selection-end-line="19" selection-end-column="14" />
-          <folding />
+        <state relative-caret-position="236">
+          <caret line="41" column="0" lean-forward="true" selection-start-line="41" selection-start-column="0" selection-end-line="41" selection-end-column="0" />
+        </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="40">
+          <caret line="2" column="87" lean-forward="false" selection-start-line="2" selection-start-column="87" selection-end-line="2" selection-end-column="87" />
         </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="170">
-          <caret line="11" column="96" lean-forward="false" selection-start-line="11" selection-start-column="96" selection-end-line="11" selection-end-column="96" />
+        <state relative-caret-position="360">
+          <caret line="18" column="50" lean-forward="false" selection-start-line="18" selection-start-column="50" selection-end-line="18" selection-end-column="50" />
           <folding>
             <element signature="e#0#69#0" expanded="true" />
-            <marker date="1495191136422" expanded="true" signature="284:667" ph="..." />
-            <marker date="1495191136422" expanded="true" signature="410:656" ph="..." />
+            <marker date="1495568889288" expanded="true" signature="284:1364" ph="..." />
+            <marker date="1495568889288" expanded="true" signature="410:707" ph="..." />
+            <marker date="1495568889288" expanded="true" signature="755:998" ph="..." />
+            <marker date="1495568889288" expanded="true" signature="1050:1353" ph="..." />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/services/hello.service.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="100">
+          <caret line="5" column="19" lean-forward="false" selection-start-line="5" selection-start-column="19" selection-end-line="5" selection-end-column="19" />
+        </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="85">
-          <caret line="5" column="42" lean-forward="false" selection-start-line="5" selection-start-column="42" selection-end-line="5" selection-end-column="42" />
-          <folding />
+        <state relative-caret-position="60">
+          <caret line="3" column="22" lean-forward="false" selection-start-line="3" selection-start-column="22" selection-end-line="3" selection-end-column="22" />
         </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="374">
-          <caret line="22" column="28" lean-forward="true" selection-start-line="22" selection-start-column="28" selection-end-line="22" selection-end-column="28" />
+        <state relative-caret-position="560">
+          <caret line="29" column="27" lean-forward="false" selection-start-line="29" selection-start-column="27" selection-end-line="29" selection-end-column="27" />
           <folding>
-            <element signature="e#0#42#0" expanded="true" />
+            <element signature="e#0#40#0" expanded="true" />
           </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="460">
+          <caret line="25" column="21" lean-forward="false" selection-start-line="25" selection-start-column="21" selection-end-line="25" selection-end-column="21" />
+        </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="140">
+          <caret line="15" column="4" lean-forward="false" selection-start-line="15" selection-start-column="4" selection-end-line="15" selection-end-column="4" />
+        </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="270">
-          <caret line="26" column="32" lean-forward="true" selection-start-line="26" selection-start-column="32" selection-end-line="26" selection-end-column="45" />
-          <folding>
-            <element signature="e#0#77#0" expanded="true" />
-            <marker date="1495191502955" expanded="true" signature="297:321" ph="..." />
-            <marker date="1495191502955" expanded="true" signature="297:504" ph="..." />
-            <marker date="1495191502955" expanded="true" signature="391:497" ph="..." />
-            <marker date="1495191502955" expanded="true" signature="435:492" ph="..." />
-          </folding>
+        <state relative-caret-position="260">
+          <caret line="15" column="49" lean-forward="false" selection-start-line="15" selection-start-column="49" selection-end-line="15" selection-end-column="49" />
+        </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="37" lean-forward="false" selection-start-line="0" selection-start-column="37" selection-end-line="0" selection-end-column="37" />
+        </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="300">
+          <caret line="15" column="0" lean-forward="false" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
         </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="306">
-          <caret line="48" column="5" lean-forward="true" selection-start-line="48" selection-start-column="5" selection-end-line="48" selection-end-column="5" />
-          <folding>
-            <element signature="e#0#80#0" expanded="true" />
-            <marker date="1495191211520" expanded="true" signature="672:734" ph="..." />
-          </folding>
+        <state relative-caret-position="400">
+          <caret line="23" column="14" lean-forward="false" selection-start-line="23" selection-start-column="14" selection-end-line="23" selection-end-column="14" />
+        </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="240">
+          <caret line="12" column="18" lean-forward="false" selection-start-line="12" selection-start-column="18" selection-end-line="12" selection-end-column="18" />
+          <folding />
         </state>
       </provider>
     </entry>
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46e4321..ae6471b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,22 +1 @@
-<form #formCounter="ngForm">
-    <counter-input [(ngModel)]="resultCounter" name="res"></counter-input>
-</form>
-
-<p>Value:</p>
-<pre>{{ resultCounter }}</pre>
-
-
-<hr>
-
-<form #formTag="ngForm">
-    <tag-input [(ngModel)]="resultTag" name="res" [id]="'a'" [items]="{'alpha': 'A', 'beta': 'B', 'gamma': 'G'}"></tag-input>
-    <tag-input [(ngModel)]="resultTag2" name="res2" [id]="'b'" [items]="{'alpha': 'A', 'beta': 'B', 'gamma': 'G'}" [nullable]="true"></tag-input>
-</form>
-
-<p>Value:</p>
-<pre>{{ resultTag | json }}</pre>
-<pre>{{ resultTag2 | json }}</pre>
-
-<hr>
-
-<dyn-form [questions]="formQuestions" (onSubmit)="submit($event)"></dyn-form>
\ No newline at end of file
+<dyn-form [questions]="formQuestions" (onSubmit)="submit($event)" [value]="formValue" [type]="'insert'"></dyn-form>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b016c4f..dc097db 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,34 +1,57 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {QuestionInterface} from './modules/dyn-form/types/question.interface';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
-
-export class AppComponent  {
-  public resultCounter = 10;
-  public resultTag = {"alpha": true, "beta": false};
-  public resultTag2 = {"alpha": true, "beta": false};
-
+export class AppComponent {
   public formQuestions: QuestionInterface[] = [
     {
-      type: "flag",
-      description: "This is a help tooltip",
+      type: 'flag',
+      description: 'This is a help tooltip',
       properties: {
-        key: "flags",
-        label: "Form Type Flags",
+        key: 'flags',
+        label: 'Form Type Flags',
         order: 1,
 
         // dropdown && flags
-        options: [{key: "alpha", value: "A"}, {key: "beta", value: "B"}]
+        options: [{key: 'alpha', value: 'A'}, {key: 'beta', value: 'B'}, {key: 'gamma', value: 'C'}, {key: 'delta', value: 'D'}]
       }, constraints: {
-        optional: true
+      optional: true
     }
+    }, {
+      type: 'dropdown',
+      description: 'Cool dropdown',
+      properties: {
+        key: 'cooldrop',
+        label: 'Dropdown',
+        order: 2,
+        methods: ['insert'],
+
+        // dropdown
+        options: [{key: 'hello', value: 'Hallo'}, {key: 'world', value: 'World'}, {key: 'and', value: 'And'}, {key: 'u', value: 'You'}]
+      }, constraints: {
+        optional: false
+      }
+    }, {
+      type: 'hidden',
+      description: 'ID',
+      properties: {
+        key: 'ID',
+        order: 3
+      }, constraints: {
+        optional: false
+      }
     }
   ];
+  public formValue = {
+    flags: {gamma: true},
+    ID: 5,
+    cooldrop: 'u'
+  };
 
   submit(value: any) {
-    console.log("send", value);
+    console.log('send', value);
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b67ccab..b0b0a62 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,10 +1,11 @@
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 
-import { AppComponent }  from './app.component';
-import {CustomInputModule} from "./custom-input.module";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { DynFormModule } from './modules/dyn-form/dyn-form.module';
+import {AppComponent} from './app.component';
+import {CustomInputModule} from './custom-input.module';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {DynFormModule} from './modules/dyn-form/dyn-form.module';
+import {HelloService} from './services/hello.service';
 
 @NgModule({
   imports: [
@@ -14,7 +15,11 @@ import { DynFormModule } from './modules/dyn-form/dyn-form.module';
     CustomInputModule,
     DynFormModule
   ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  declarations: [AppComponent],
+  providers: [
+    HelloService
+  ],
+  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
diff --git a/src/app/modules/dyn-form/dyn-form.component.ts b/src/app/modules/dyn-form/dyn-form.component.ts
index 97e51af..608100c 100644
--- a/src/app/modules/dyn-form/dyn-form.component.ts
+++ b/src/app/modules/dyn-form/dyn-form.component.ts
@@ -6,14 +6,14 @@ import {FormControl, FormGroup} from '@angular/forms';
   selector: 'dyn-form',
   template: `
     <form (ngSubmit)="submit()" [formGroup]="form">
-        <dyn-question *ngFor="let question of questions" [question]="question" [form]="form"></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"></dyn-question>
       <div class="form-row">
         <button type="submit">Save</button>
       </div>
     </form>
     `
 })
-export class DynFormComponent {
+export class DynFormComponent implements OnInit {
   @Input() questions: QuestionInterface[];
   @Input() value: any;
   @Input() type: "'insert'|'update'|'delete'|'view'";
@@ -22,13 +22,17 @@ export class DynFormComponent {
 
   private form: FormGroup;
 
-  constructor() {
-    this.form = new FormGroup({
-      'flags': new FormControl({'alpha': true})
-    });
+  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]);
+    }
+    this.form = new FormGroup(controls);
   }
 
-  submit() {
+  private submit() {
+    console.log("isValid", 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 a34af3e..5b4c462 100644
--- a/src/app/modules/dyn-form/dyn-form.module.ts
+++ b/src/app/modules/dyn-form/dyn-form.module.ts
@@ -2,9 +2,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 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 {DynQuestionComponent} from './dyn-question.component';
+import {HiddenInputComponent} from './inputs/hidden-input.component';
+import {DropdownInputComponent} from './inputs/dropdown-input.component';
 
 
 @NgModule({
@@ -20,6 +22,8 @@ import {DynQuestionComponent} from './dyn-question.component';
     DynQuestionComponent,
     CounterInputComponent,
     TagInputComponent,
+    HiddenInputComponent,
+    DropdownInputComponent,
     KeysPipe
   ],
   providers: [],
diff --git a/src/app/modules/dyn-form/dyn-question.component.ts b/src/app/modules/dyn-form/dyn-question.component.ts
index 97db5c4..296d4a7 100644
--- a/src/app/modules/dyn-form/dyn-question.component.ts
+++ b/src/app/modules/dyn-form/dyn-question.component.ts
@@ -6,11 +6,21 @@ import {FormGroup} from '@angular/forms';
   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"
-                 [items]="question.properties.options" [nullable]="question.constraints.optional"
-                 (ngModelChange)="change()"></tag-input>
+      <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>
   `
 })
diff --git a/src/app/modules/dyn-form/inputs/dropdown-input.component.ts b/src/app/modules/dyn-form/inputs/dropdown-input.component.ts
new file mode 100644
index 0000000..46bd411
--- /dev/null
+++ b/src/app/modules/dyn-form/inputs/dropdown-input.component.ts
@@ -0,0 +1,98 @@
+import {Component, forwardRef, Inject, Input, OnChanges, Pipe, PipeTransform, SimpleChanges} from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
+import {CustomInputComponent} from "./custom-input.component";
+import {HelloService} from '../../../services/hello.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',
+  template:
+      `
+      <select *ngIf="!readonly" [value]="value" (change)="onChange($event.target.value)">
+          <option *ngFor="let entry of listedItems" [value]="entry.key">{{entry.value}}</option>
+      </select>
+      <div *ngIf="readonly">{{constVal}}</div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DropdownInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => DropdownInputComponent),
+      multi: true,
+    }]
+})
+export class DropdownInputComponent extends CustomInputComponent implements OnChanges {
+  @Input() readonly: boolean = false;
+  @Input() nullable: boolean = false;
+  @Input() items: Array<{key: string, value: string}> = [];
+  private listedItems: Array<{key: string, value: string}> = [];
+  private constVal: string;
+
+  constructor(private helloService: HelloService) {
+    super();
+    helloService.sayHello();
+  }
+
+  // set initial value
+  public writeValue(obj: any): void {
+    console.log("init: ", obj);
+    this.value = obj;
+    this.updateConst();
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    if (changes['items'] || changes['nullable']) {
+      if (this.nullable)
+        this.listedItems = [{key: "", value: "N/A"}, {key: null, value: "N/A"}].concat(this.items);
+      else
+        this.listedItems = [].concat(this.items);
+    }
+    this.updateConst();
+  }
+
+  private updateConst() {
+    if (this.readonly) {
+      for (let i=0; i<this.listedItems.length; i++) {
+        if (this.listedItems[i].key==this.value) {
+          this.constVal = this.listedItems[i].value;
+          break;
+        }
+      }
+    }
+    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 {
+    if (this.value===null) {
+      return this.nullable ? null : {notNullable: {valid: false}};
+    }
+    for (let i=0; i<this.items.length; i++) {
+      if (this.items[i].key==this.value)
+        return null;
+    }
+    return {invalidValue: {valid: false}};
+  }
+
+  // on button click
+  protected onChange(value: any): boolean {
+    this.value = value;
+
+    super.change();
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/inputs/hidden-input.component.ts b/src/app/modules/dyn-form/inputs/hidden-input.component.ts
new file mode 100644
index 0000000..5f60cb1
--- /dev/null
+++ b/src/app/modules/dyn-form/inputs/hidden-input.component.ts
@@ -0,0 +1,33 @@
+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: 'hidden-input',
+  template: ``,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => HiddenInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => HiddenInputComponent),
+      multi: true,
+    }]
+})
+export class HiddenInputComponent extends CustomInputComponent {
+  @Input() readonly: boolean = false;
+  @Input() nullable: boolean = false;
+
+  // set initial value
+  public writeValue(obj: any): void {
+    this.value = obj;
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    return null;
+  }
+}
\ No newline at end of file
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 8dde022..c2acd5e 100644
--- a/src/app/modules/dyn-form/inputs/tag-input.component.ts
+++ b/src/app/modules/dyn-form/inputs/tag-input.component.ts
@@ -34,8 +34,9 @@ export class KeysPipe implements PipeTransform {
     }]
 })
 export class TagInputComponent extends CustomInputComponent {
-  @Input() items: Array<{key: string, value: string}> = [];
+  @Input() readonly: boolean = false;
   @Input() nullable: boolean = false;
+  @Input() items: Array<{key: string, value: string}> = [];
 
   private lookup: {[_:string]: string} = {};
 
@@ -57,9 +58,10 @@ export class TagInputComponent extends CustomInputComponent {
         this.value[key] = (this.nullable ? null : false);
       }
     }
+    console.log("writeValue", isUpdated, this.value);
 
     if (isUpdated) {
-      super.change();
+      setTimeout(() => super.change(), 0);
     }
   }
 
@@ -70,6 +72,7 @@ export class TagInputComponent extends CustomInputComponent {
 
   // on button click
   protected onChange(key: string, forward: boolean): boolean {
+    if (this.readonly) return false;
     let value = this.value[key];
     if (!this.nullable)
       value = !value;
diff --git a/src/app/services/hello.service.ts b/src/app/services/hello.service.ts
new file mode 100644
index 0000000..dbbae17
--- /dev/null
+++ b/src/app/services/hello.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class HelloService {
+  sayHello(): void {
+    console.log("Hello world from my Service!");
+  }
+}
\ No newline at end of file
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 2c7260d..0bb1df7 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -4,6 +4,8 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
+    "mapRoot":"/src/",
+    "sourceRoot":"/src/",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [ "es2015", "dom" ],