Specialization, Textbox

src/app/app.component.ts

@@ -23,7 +23,7 @@ export class AppComponent  {
     });
   }
 
-  static submit(value: any) {
+  submit(value: any) {
     console.log('send', value);
   }
 }

src/app/modules/dyn-form/dyn-form.component.ts

@@ -6,7 +6,9 @@ import {FormControl, FormGroup} from '@angular/forms';
   selector: 'dyn-form',
   template: `
     <form (ngSubmit)="submit()" [formGroup]="form">
-      <dyn-question *ngFor="let question of questions" [hidden]="question.properties.methods && question.properties.methods.indexOf(type)==-1" [question]="question" [form]="form" [type]="type" (onChange)="valueChange.emit(this.form.value)"></dyn-question>
+      <dyn-question *ngFor="let question of questions"
+                    [hidden]="question.properties.methods && question.properties.methods.indexOf(type)==-1 || question.properties.spezialization && form.value.type!=question.properties.spezialization" [ngSwitch]="question.type"
+                    [question]="question" [form]="form" [type]="type" (onChange)="valueChange.emit(form.value)"></dyn-question>
       <div class="form-row">
         <button [disabled]="form.invalid" type="submit">Save</button>
       </div>

src/app/modules/dyn-form/dyn-form.module.ts

@@ -11,6 +11,7 @@ import {QuestionService} from './services/question.service';
 import {TextareaInputComponent} from './inputs/textarea-input.component';
 import {ValueService} from './services/value.service';
 import {KeysPipe} from './types/keys.pipe';
+import {TextboxInputComponent} from './inputs/textbox-input.component';
 
 
 @NgModule({
@@ -29,6 +30,7 @@ import {KeysPipe} from './types/keys.pipe';
     HiddenInputComponent,
     DropdownInputComponent,
     TextareaInputComponent,
+    TextboxInputComponent,
     KeysPipe
   ],
   providers: [

src/app/modules/dyn-form/dyn-question.component.ts

@@ -5,7 +5,7 @@ import {FormGroup, ValidationErrors} from '@angular/forms';
 @Component({
   selector: 'dyn-question',
   template: `
-      <div [ngSwitch]="question.type" [formGroup]="form">
+      <div [ngSwitch]="question.type" [formGroup]="form" [hidden]="type=='delete'">
           <label [for]="question.properties.key">{{question.properties.label ? question.properties.label + (question.constraints.optional ? '' : ' *') : ''}}</label>
           <i [hidden]="question.description" class="help circle icon" (mouseover)="onHover(true)" (mouseout)="onHover(false)">Help</i>
           <a [hidden]="!hoverState" class="ui pointing red basic label">{{question.description}}</a><br>
@@ -24,10 +24,16 @@ import {FormGroup, ValidationErrors} from '@angular/forms';
                           [nullable]="question.constraints.optional" [readonly]="type=='view'"
                           [items]="question.properties.options"
                           (ngModelChange)="change()"></dropdown-input>
-          <textarea-input *ngSwitchCase="'textbox'"
+          <textarea-input *ngSwitchCase="'textarea'"
                           [formControlName]="question.properties.key" [id]="question.properties.key"
                           [nullable]="question.constraints.optional" [readonly]="type=='view'"
                           (ngModelChange)="change()"></textarea-input>
+          <textbox-input *ngSwitchCase="'textbox'"
+                         [formControlName]="question.properties.key" [id]="question.properties.key"
+                         [nullable]="question.constraints.optional" [readonly]="type=='view'"
+                         [type]="question.properties.type" [constraints]="question.constraints"
+                         [placeholder]="question.properties.placeholder"
+                         (ngModelChange)="change()"></textbox-input>
           
           <ul [hidden]="!errorList.length">
               <li *ngFor="let error of errorList">{{error}}</li>

src/app/modules/dyn-form/inputs/textarea-input.component.ts

@@ -37,7 +37,6 @@ export class TextareaInputComponent extends CustomInputComponent {
   public validate(c: FormControl): ValidationErrors {
     if (!this.initComplete)
       return null;
-    console.log("no error?", !!(this.nullable || this.value));
     return this.nullable || (this.value) ? null : {notNullable: {
       valid: false,
       message: "This field is required!"

src/app/modules/dyn-form/inputs/textbox-input.component.ts

@@ -0,0 +1,78 @@
+import {Component, forwardRef, Input} from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
+import {CustomInputComponent} from "./custom-input.component";
+import {QuestionInterface, QuestionInterfaceCnstr} from '../types/question.interface';
+
+@Component({
+  selector: 'textbox-input',
+  template:
+      `
+    <input *ngIf="!readonly" (keyup)="onChange($event)" [value]="value" [type]="type" [placeholder]="placeholder"/>
+    <span *ngIf="readonly && value">{{value}}</span>
+    <span *ngIf="readonly && !value"><em>No value specified!</em></span>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextboxInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => TextboxInputComponent),
+      multi: true,
+    }]
+})
+export class TextboxInputComponent extends CustomInputComponent {
+  @Input() readonly: boolean = false;
+  @Input() nullable: boolean = false;
+  @Input() constraints: QuestionInterfaceCnstr = null;
+  @Input() type: string;
+  @Input() placeholder: string;
+
+  // set initial value
+  public writeValue(obj: any): void {
+    if (obj) {
+      this.value = obj + '';
+    }
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    if (!this.initComplete)
+      return null;
+    if (!this.nullable && !this.value)
+      return {notNullable: {
+        valid: false,
+        message: "This field is required!"
+      }};
+    if (!this.constraints)
+      return null;
+    if (this.constraints.maxLength && this.constraints.maxLength <= this.value.length) {
+      return {tooLong: {
+        valid: false,
+        message: "Length is limited to "+this.constraints.maxLength+" characters."
+      }};
+    }
+    if (this.constraints.maxValue) {
+      let valueInt = parseInt(this.value, 10);
+      if (isNaN(valueInt))
+        return {noNumber: {
+          valid: false,
+          message: "This value is not a number "+this.constraints.maxValue+"."
+        }};
+      if (this.constraints.maxValue <= valueInt) {
+        return {tooLarge: {
+          valid: false,
+          message: "Maximal allowed value is "+this.constraints.maxValue+"."
+        }};
+      }
+    }
+  }
+
+  // on button click
+  protected onChange($event: KeyboardEvent): void {
+    this.value = $event.target['value'];
+    super.change();
+  }
+}

src/app/modules/dyn-form/types/question.interface.ts

@@ -19,13 +19,15 @@ export interface QuestionInterface {
     // dropdown & flag
     options?: {key: string, value: string}[],
   },
-  constraints: {
-    optional: boolean,
+  constraints: QuestionInterfaceCnstr
+}
 
-    // textbox - string
-    maxLength?: number,
+export interface QuestionInterfaceCnstr {
+  optional: boolean,
 
-    // textbox - number
-    maxValue?: number
-  }
+  // textbox - string
+  maxLength?: number,
+
+  // textbox - number
+  maxValue?: number
 }