From a5fdfa32d2c2640253dc086f54ce2d2dec613056 Mon Sep 17 00:00:00 2001
From: Sebastian Seedorf <sebastian.seedorf@biotronik.com>
Date: Fri, 19 May 2017 13:01:19 +0200
Subject: [PATCH] First custom Dynamic Form Module generation

---
 .idea/workspace.xml                           | 466 +++++++++++++-----
 bs-config.json                                |   2 +-
 src/app/app.component.html                    |   6 +-
 src/app/app.component.ts                      |  22 +
 src/app/app.module.ts                         |   4 +-
 .../modules/dyn-form/dyn-form.component.ts    |  34 ++
 src/app/modules/dyn-form/dyn-form.module.ts   |  27 +
 .../dyn-form/dyn-question.component.ts        |  26 +
 .../inputs/counter-input.component.ts         |  55 +++
 .../dyn-form/inputs/custom-input.component.ts |  34 ++
 .../dyn-form/inputs/tag-input.component.ts    |  89 ++++
 .../dyn-form/types/question.interface.ts      |  31 ++
 12 files changed, 665 insertions(+), 131 deletions(-)
 create mode 100644 src/app/modules/dyn-form/dyn-form.component.ts
 create mode 100644 src/app/modules/dyn-form/dyn-form.module.ts
 create mode 100644 src/app/modules/dyn-form/dyn-question.component.ts
 create mode 100644 src/app/modules/dyn-form/inputs/counter-input.component.ts
 create mode 100644 src/app/modules/dyn-form/inputs/custom-input.component.ts
 create mode 100644 src/app/modules/dyn-form/inputs/tag-input.component.ts
 create mode 100644 src/app/modules/dyn-form/types/question.interface.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1f03d57..639a8e8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,15 +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/tag-input.component.ts" />
-      <change type="MOVED" beforePath="$PROJECT_DIR$/src/app/counter-input.module.ts" afterPath="$PROJECT_DIR$/src/app/custom-input.module.ts" />
+      <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="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/counter-input.component.ts" afterPath="$PROJECT_DIR$/src/app/counter-input.component.ts" />
-      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/app/custom-input.component.ts" afterPath="$PROJECT_DIR$/src/app/custom-input.component.ts" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -25,34 +28,77 @@
   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="tag-input.component.ts" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/app/tag-input.component.ts">
+      <file leaf-file-name="app.component.html" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-85">
-              <caret line="49" column="25" lean-forward="false" selection-start-line="49" selection-start-column="25" selection-end-line="49" selection-end-column="25" />
+            <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>
+          </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>
-                <marker date="1495058621617" expanded="true" signature="672:733" ph="..." />
+                <element signature="e#0#42#0" expanded="true" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <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="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="240">
-              <caret line="12" column="145" lean-forward="false" selection-start-line="12" selection-start-column="145" selection-end-line="12" selection-end-column="145" />
+            <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="app.component.ts" pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
+      <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="180">
-              <caret line="9" column="46" lean-forward="true" selection-start-line="9" selection-start-column="46" selection-end-line="9" selection-end-column="46" />
-              <folding />
+            <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>
@@ -62,8 +108,8 @@
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
-        <option value="TypeScript File" />
         <option value="HTML File" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -86,7 +132,6 @@
         <option value="$PROJECT_DIR$/src/app/json.component.ts" />
         <option value="$PROJECT_DIR$/src/app/jsoninput.component.ts" />
         <option value="$PROJECT_DIR$/src/app/json-input.module.ts" />
-        <option value="$PROJECT_DIR$/src/app/app.module.ts" />
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/node_modules/.gitignore" />
         <option value="$PROJECT_DIR$/src/app/json-input.module.js" />
@@ -99,10 +144,18 @@
         <option value="$PROJECT_DIR$/src/app/custom-input.module.ts" />
         <option value="$PROJECT_DIR$/src/app/custom-input.component.ts" />
         <option value="$PROJECT_DIR$/src/app/counter-input.component.ts" />
-        <option value="$PROJECT_DIR$/bs-config.json" />
-        <option value="$PROJECT_DIR$/src/app/app.component.ts" />
         <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$/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/tag-input.component.ts" />
+        <option value="$PROJECT_DIR$/bs-config.json" />
+        <option value="$PROJECT_DIR$/src/app/modules/dyn-form/dyn-form.component.ts" />
       </list>
     </option>
   </component>
@@ -116,10 +169,10 @@
     <handled-path value="$PROJECT_DIR$/node_modules" />
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="1344" />
-    <option name="y" value="-11" />
-    <option name="width" value="1857" />
-    <option name="height" value="1092" />
+    <option name="x" value="-8" />
+    <option name="y" value="-8" />
+    <option name="width" value="1456" />
+    <option name="height" value="876" />
   </component>
   <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
   <component name="ProjectView">
@@ -137,26 +190,27 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
+      <pane id="Scratches" />
       <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <PATH>
             <PATH_ELEMENT>
-              <option name="myItemId" value="AngularCounterInput" />
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="AngularCounterInput" />
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
           </PATH>
           <PATH>
             <PATH_ELEMENT>
-              <option name="myItemId" value="AngularCounterInput" />
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="AngularCounterInput" />
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
@@ -166,11 +220,11 @@
           </PATH>
           <PATH>
             <PATH_ELEMENT>
-              <option name="myItemId" value="AngularCounterInput" />
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
-              <option name="myItemId" value="AngularCounterInput" />
+              <option name="myItemId" value="AngularDynFormModule" />
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
             <PATH_ELEMENT>
@@ -182,9 +236,94 @@
               <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="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>
+          <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="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="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="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="inputs" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
         </subPane>
       </pane>
-      <pane id="Scratches" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -198,14 +337,15 @@
     <property name="DefaultHtmlFileTemplate" value="HTML File" />
   </component>
   <component name="RecentsManager">
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/src/app" />
-    </key>
     <key name="MoveFile.RECENT_KEYS">
       <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="C:\Users\seedorf_s1\WebstormProjects\AngularDynFormModule\src\app\modules\dyn-form\inputs" />
+      <recent name="$PROJECT_DIR$/src/app" />
+    </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
@@ -292,12 +432,20 @@
       <scripts>
         <script value="start" />
       </scripts>
-      <node-interpreter value="project" />
+      <node-interpreter value="$USER_HOME$/Documents/Portables/nodejs/node" />
       <envs />
       <method />
     </configuration>
-    <list size="1">
+    <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" />
+      <envs />
+      <method />
+    </configuration>
+    <list size="2">
       <item index="0" class="java.lang.String" itemvalue="npm.Start" />
+      <item index="1" class="java.lang.String" itemvalue="npm.Install" />
     </list>
   </component>
   <component name="ShelveChangesManager" show_recycled="false">
@@ -319,6 +467,7 @@
       <workItem from="1494972910184" duration="982000" />
       <workItem from="1495045995828" duration="627000" />
       <workItem from="1495046636215" duration="12312000" />
+      <workItem from="1495176737534" duration="11529000" />
     </task>
     <task id="LOCAL-00001" summary="Initial commit">
       <created>1494973365190</created>
@@ -345,29 +494,30 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="22752000" />
+    <option name="totallyTimeSpent" value="34281000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="1344" y="-11" width="1857" height="1092" extended-state="6" />
+    <frame x="-8" y="-8" width="1456" height="876" 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.32985386" 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.24945416" sideWeight="0.5" order="1" 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.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="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="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="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="Find" 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="6" side_tool="false" 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.32985386" 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="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="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="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" />
       <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="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="11" side_tool="false" content_ui="tabs" />
       <window_info id="CSS Styles" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32985386" sideWeight="0.5" order="1" 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.32881" sideWeight="0.5" order="6" 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>
@@ -377,14 +527,32 @@
       <list>
         <option value="$PROJECT_DIR$/src/main.js.map" />
         <option value="$PROJECT_DIR$/src/main.js" />
-        <option value="$PROJECT_DIR$/src/app/app.module.js.map" />
-        <option value="$PROJECT_DIR$/src/app/app.component.js.map" />
-        <option value="$PROJECT_DIR$/src/app/app.module.js" />
-        <option value="$PROJECT_DIR$/src/app/app.component.js" />
-        <option value="$PROJECT_DIR$/src/app/custom-input.component.js" />
+        <option value="$PROJECT_DIR$/src/app/counter-input.component.js.map" />
         <option value="$PROJECT_DIR$/src/app/custom-input.component.js.map" />
+        <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" />
+        <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-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/tag-input.component.js.map" />
       </list>
     </option>
   </component>
@@ -497,22 +665,10 @@
     <entry file="file://$PROJECT_DIR$/quickstart/karma.conf.js" />
     <entry file="file://$PROJECT_DIR$/quickstart/karma-test-shim.js" />
     <entry file="file://$PROJECT_DIR$/quickstart/non-essential-files.txt" />
-    <entry file="file://$PROJECT_DIR$/src/main.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/main.js" />
     <entry file="file://$PROJECT_DIR$/src/app/app.component.spec.ts" />
     <entry file="file://$PROJECT_DIR$/package.old.json" />
-    <entry file="file://$PROJECT_DIR$/src/app/custom-input.module.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="200">
-          <caret line="10" column="63" lean-forward="true" selection-start-line="10" selection-start-column="63" selection-end-line="10" selection-end-column="63" />
-        </state>
-      </provider>
-    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/custom-input.module.js" />
     <entry file="file://$PROJECT_DIR$/.gitignore">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="80">
@@ -525,7 +681,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="160">
           <caret line="11" column="0" lean-forward="true" selection-start-line="11" selection-start-column="0" selection-end-line="11" selection-end-column="0" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -533,7 +688,6 @@
       <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>
@@ -559,7 +713,6 @@
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-105">
           <caret line="19" column="32" lean-forward="false" selection-start-line="19" selection-start-column="32" selection-end-line="19" selection-end-column="32" />
-          <folding />
         </state>
       </provider>
     </entry>
@@ -571,30 +724,8 @@
         </state>
       </provider>
     </entry>
-    <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$/src/app/app.component.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="140">
-          <caret line="7" column="38" lean-forward="true" selection-start-line="7" selection-start-column="38" selection-end-line="7" selection-end-column="38" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/counter-input.module.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="360">
-          <caret line="18" column="18" lean-forward="true" selection-start-line="18" selection-start-column="18" selection-end-line="18" selection-end-column="18" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
+    <entry file="file://$PROJECT_DIR$/src/app/app.component.js" />
+    <entry file="file://$PROJECT_DIR$/src/app/counter-input.module.js" />
     <entry file="file://$PROJECT_DIR$/src/index.html">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="206">
@@ -611,32 +742,6 @@
         </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" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/bs-config.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="140">
-          <caret line="7" column="21" lean-forward="false" selection-start-line="7" selection-start-column="21" selection-end-line="7" selection-end-column="21" />
-          <folding />
-        </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="975">
-          <caret line="49" column="0" lean-forward="true" 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/custom-input.component.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="415">
@@ -645,39 +750,144 @@
         </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$/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>
     <entry file="file://$PROJECT_DIR$/src/app/custom-input.module.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="380">
-          <caret line="19" column="12" lean-forward="false" selection-start-line="19" selection-start-column="12" selection-end-line="19" selection-end-column="12" />
+        <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="true" />
+            <element signature="e#0#43#0" expanded="false" />
           </folding>
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/app/tag-input.component.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-85">
+        <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>
+    <entry file="file://$PROJECT_DIR$/src/app/counter-input.component.ts">
+      <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>
-            <marker date="1495058621617" expanded="true" signature="672:733" ph="..." />
+            <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">
+      <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>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/app/app.component.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="240">
-          <caret line="12" column="145" lean-forward="false" selection-start-line="12" selection-start-column="145" selection-end-line="12" selection-end-column="145" />
+        <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>
+      </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="14" lean-forward="false" selection-start-line="7" selection-start-column="14" selection-end-line="7" selection-end-column="14" />
+          <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="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>
+      </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="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>
+      </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" />
+          <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>
+    <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>
     <entry file="file://$PROJECT_DIR$/src/app/app.component.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="180">
-          <caret line="9" column="46" lean-forward="true" selection-start-line="9" selection-start-column="46" selection-end-line="9" selection-end-column="46" />
-          <folding />
+        <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>
+    <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>
+    <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>
diff --git a/bs-config.json b/bs-config.json
index d9d90cc..02219d5 100644
--- a/bs-config.json
+++ b/bs-config.json
@@ -5,5 +5,5 @@
       "/node_modules": "node_modules"
     }
   },
-  "reloadDebounce": 2000
+  "reloadDelay": 2000
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ab449e9..46e4321 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -15,4 +15,8 @@
 
 <p>Value:</p>
 <pre>{{ resultTag | json }}</pre>
-<pre>{{ resultTag2 | json }}</pre>
\ No newline at end of file
+<pre>{{ resultTag2 | json }}</pre>
+
+<hr>
+
+<dyn-form [questions]="formQuestions" (onSubmit)="submit($event)"></dyn-form>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index de0af4d..b016c4f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {QuestionInterface} from './modules/dyn-form/types/question.interface';
 
 @Component({
   selector: 'my-app',
@@ -9,4 +10,25 @@ export class AppComponent  {
   public resultCounter = 10;
   public resultTag = {"alpha": true, "beta": false};
   public resultTag2 = {"alpha": true, "beta": false};
+
+  public formQuestions: QuestionInterface[] = [
+    {
+      type: "flag",
+      description: "This is a help tooltip",
+      properties: {
+        key: "flags",
+        label: "Form Type Flags",
+        order: 1,
+
+        // dropdown && flags
+        options: [{key: "alpha", value: "A"}, {key: "beta", value: "B"}]
+      }, constraints: {
+        optional: true
+    }
+    }
+  ];
+
+  submit(value: any) {
+    console.log("send", value);
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 39b7cad..b67ccab 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }  from './app.component';
 import {CustomInputModule} from "./custom-input.module";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { DynFormModule } from './modules/dyn-form/dyn-form.module';
 
 @NgModule({
   imports: [
@@ -11,6 +12,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
     FormsModule,
     ReactiveFormsModule,
     CustomInputModule,
+    DynFormModule
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
diff --git a/src/app/modules/dyn-form/dyn-form.component.ts b/src/app/modules/dyn-form/dyn-form.component.ts
new file mode 100644
index 0000000..97e51af
--- /dev/null
+++ b/src/app/modules/dyn-form/dyn-form.component.ts
@@ -0,0 +1,34 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {QuestionInterface} from './types/question.interface';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'dyn-form',
+  template: `
+    <form (ngSubmit)="submit()" [formGroup]="form">
+        <dyn-question *ngFor="let question of questions" [question]="question" [form]="form"></dyn-question>
+      <div class="form-row">
+        <button type="submit">Save</button>
+      </div>
+    </form>
+    `
+})
+export class DynFormComponent {
+  @Input() questions: QuestionInterface[];
+  @Input() value: any;
+  @Input() type: "'insert'|'update'|'delete'|'view'";
+  @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onSubmit: EventEmitter<any> = new EventEmitter<any>();
+
+  private form: FormGroup;
+
+  constructor() {
+    this.form = new FormGroup({
+      'flags': new FormControl({'alpha': true})
+    });
+  }
+
+  submit() {
+    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
new file mode 100644
index 0000000..a34af3e
--- /dev/null
+++ b/src/app/modules/dyn-form/dyn-form.module.ts
@@ -0,0 +1,27 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DynFormComponent } from './dyn-form.component';
+import {CounterInputComponent} from './inputs/counter-input.component';
+import {KeysPipe, TagInputComponent} from './inputs/tag-input.component';
+import {DynQuestionComponent} from './dyn-question.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    DynFormComponent
+  ],
+  declarations: [
+    DynFormComponent,
+    DynQuestionComponent,
+    CounterInputComponent,
+    TagInputComponent,
+    KeysPipe
+  ],
+  providers: [],
+})
+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
new file mode 100644
index 0000000..97db5c4
--- /dev/null
+++ b/src/app/modules/dyn-form/dyn-question.component.ts
@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {QuestionInterface} from './types/question.interface';
+import {FormGroup} 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"
+                 [items]="question.properties.options" [nullable]="question.constraints.optional"
+                 (ngModelChange)="change()"></tag-input>
+    </div>
+  `
+})
+export class DynQuestionComponent {
+  @Input() question: QuestionInterface;
+  @Input() type: "'insert'|'update'|'delete'|'view'";
+  @Input() form: FormGroup;
+  @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
+
+  change() {
+    this.onChange.emit();
+  }
+}
diff --git a/src/app/modules/dyn-form/inputs/counter-input.component.ts b/src/app/modules/dyn-form/inputs/counter-input.component.ts
new file mode 100644
index 0000000..5fd0d80
--- /dev/null
+++ b/src/app/modules/dyn-form/inputs/counter-input.component.ts
@@ -0,0 +1,55 @@
+import { Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
+import {CustomInputComponent} from "./custom-input.component";
+
+@Component({
+  selector: 'counter-input',
+  template:
+      `
+    <button (click)="onChange(-1)" (blur)="onBlur()">-</button>
+    {{value}}
+    <button (click)="onChange(1)" (blur)="onBlur()">+</button>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CounterInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => CounterInputComponent),
+      multi: true,
+    }]
+})
+export class CounterInputComponent extends CustomInputComponent {
+  // set initial value
+  public writeValue(obj: any): void {
+    if (obj) {
+      this.value = parseInt(obj);
+      this.parseError = isNaN(this.value);
+    }
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    return (!this.parseError) ? null : {
+      numberParseError: {
+        valid: false,
+      },
+    };
+  }
+
+  // on button click
+  protected onChange(number: number): void {
+    this.value = this.value + number;
+    this.parseError = isNaN(this.value);
+
+    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
new file mode 100644
index 0000000..1a2f61b
--- /dev/null
+++ b/src/app/modules/dyn-form/inputs/custom-input.component.ts
@@ -0,0 +1,34 @@
+import {ControlValueAccessor, FormControl, ValidationErrors, Validator} from '@angular/forms';
+
+export abstract class CustomInputComponent implements ControlValueAccessor, Validator {
+  protected value: any;
+  protected parseError: boolean;
+  private propagateChange: (_: any) => void = () => {};
+  private propagateTouch: () => void = () => {};
+
+  // set initial value
+  public abstract writeValue(obj: any): void;
+
+  // register function to notify on change
+  public registerOnChange(fn: (_: any) => void): void {
+    this.propagateChange = fn;
+  }
+
+  // register function to notify on touch
+  public registerOnTouched(fn: () => void): void {
+    this.propagateTouch = fn;
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public abstract validate(c: FormControl): ValidationErrors;
+
+  // on change
+  protected change(): void {
+    this.propagateChange(this.value);
+  }
+
+  // on touch
+  protected blur(): void {
+    this.propagateTouch();
+  }
+}
\ 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
new file mode 100644
index 0000000..8dde022
--- /dev/null
+++ b/src/app/modules/dyn-form/inputs/tag-input.component.ts
@@ -0,0 +1,89 @@
+import {Component, forwardRef, Input, Pipe, PipeTransform} 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:
+      `
+      <div *ngFor="let entry of value | keys" (click)="onChange(entry.key, true)" (contextmenu)="onChange(entry.key, false)">
+          {{lookup[entry.key]}}: {{entry.value}}
+      </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true,
+    }]
+})
+export class TagInputComponent extends CustomInputComponent {
+  @Input() items: Array<{key: string, value: string}> = [];
+  @Input() nullable: boolean = false;
+
+  private lookup: {[_:string]: string} = {};
+
+  // set initial value
+  public writeValue(obj: any): void {
+    let isUpdated = false;
+    this.value = {};
+    this.lookup = {};
+    if (!obj) {
+      obj = {};
+    }
+    for (let i=0; i<this.items.length; i++) {
+      let key = this.items[i].key;
+      this.lookup[key] = this.items[i].value;
+      if (obj.hasOwnProperty(key) && (typeof(obj[key]) === "boolean" || (this.nullable && null===obj[key])))
+        this.value[key] = obj[key];
+      else {
+        isUpdated = true;
+        this.value[key] = (this.nullable ? null : false);
+      }
+    }
+
+    if (isUpdated) {
+      super.change();
+    }
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    return null;
+  }
+
+  // on button click
+  protected onChange(key: string, forward: boolean): boolean {
+    let value = this.value[key];
+    if (!this.nullable)
+      value = !value;
+    else if (value===null)
+      value = forward;
+    else if ((value ? !forward : forward))
+      value = null;
+    else
+      value = !value;
+
+    this.value = Object.assign({}, this.value);
+    this.value[key] = value;
+
+    super.change();
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/src/app/modules/dyn-form/types/question.interface.ts b/src/app/modules/dyn-form/types/question.interface.ts
new file mode 100644
index 0000000..79fa847
--- /dev/null
+++ b/src/app/modules/dyn-form/types/question.interface.ts
@@ -0,0 +1,31 @@
+export interface QuestionInterface {
+  type: "flag"|"textbox"|"textarea"|"hidden"|"dropdown",
+  description: string,
+  properties: {
+    key: string,
+    label?: string,
+    order: number,
+
+    methods?: Array<string>,
+    spezialization?: string,
+
+    // textbox
+    type?: string,
+    placeholder?: string,
+
+    // dropdown
+    foreign?: {uri: string, keys: string, values: string, options?: {key: string, value: string}[]},
+
+    // dropdown & flag
+    options?: {key: string, value: string}[],
+  },
+  constraints: {
+    optional: boolean,
+
+    // textbox - string
+    maxLength?: number,
+
+    // textbox - number
+    maxValue?: number
+  }
+}
\ No newline at end of file