Added checkbox input

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

@@ -45,7 +45,7 @@ export class DynFormComponent implements OnChanges {
       let vals = {};
       let type: string = this.form.value.type;
       for (let question of this.questions) {
-        let specType = question.properties.spezialization;
+        let specType = question.properties.specialization;
         let methods = question.properties.methods;
         let key = question.properties.key;
         if (!(methods && methods.indexOf(this.type)==-1 || specType && type!=specType)) {

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

@@ -12,6 +12,7 @@ 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';
+import {CheckboxInputComponent} from './inputs/checkbox-input.component';
 
 
 @NgModule({
@@ -31,6 +32,7 @@ import {TextboxInputComponent} from './inputs/textbox-input.component';
     DropdownInputComponent,
     TextareaInputComponent,
     TextboxInputComponent,
+    CheckboxInputComponent,
     KeysPipe
   ],
   providers: [

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

@@ -34,6 +34,10 @@ import {FormGroup, ValidationErrors} from '@angular/forms';
                          [type]="question.properties.type" [constraints]="question.constraints"
                          [placeholder]="question.properties.placeholder"
                          (ngModelChange)="change()"></textbox-input>
+          <checkbox-input *ngSwitchCase="'checkbox'"
+                          [formControlName]="question.properties.key" [id]="question.properties.key"
+                          [nullable]="question.constraints.optional" [readonly]="type=='view'"
+                          (ngModelChange)="change()"></checkbox-input>
           
           <ul [hidden]="!errorList.length">
               <li *ngFor="let error of errorList">{{error}}</li>
@@ -57,6 +61,7 @@ export class DynQuestionComponent {
     setTimeout(() => {
       this.errorList = [];
       let control = this.form.controls[this.question.properties.key];
+      console.log("XX", this.question.properties.key, control.untouched, control.valid);
       if (control.untouched || control.valid)
         return null;
       let errors: ValidationErrors = control.errors;

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

@@ -0,0 +1,60 @@
+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: 'checkbox-input',
+  template:
+      `
+      <label><input *ngIf="!readonly" type="radio" [checked]="value===true" (change)="onChange(true)">Yes</label><br/>
+      <label><input *ngIf="!readonly" type="radio" [checked]="value===false" (change)="onChange(false)">No</label><br/>
+      <label><input *ngIf="!readonly && nullable" type="radio" [checked]="value===null" (change)="onChange(null)">N/A</label><br/>
+      <span *ngIf="readonly">{{value ? "Yes" : (value===false ? "No" : "N/A")}}</span>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => CheckboxInputComponent),
+      multi: true,
+    }]
+})
+export class CheckboxInputComponent extends CustomInputComponent {
+  @Input() readonly: boolean = false;
+  @Input() nullable: boolean = false;
+
+
+  // set initial value
+  public writeValue(obj: any): void {
+    if (obj) {
+      this.value = true;
+    } else if (obj===false) {
+      this.value = false;
+    } else {
+      this.value = null;
+    }
+    if (this.value !== obj)
+      setTimeout(() => super.change(true), 0);
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    if (!this.initComplete)
+      return null;
+    return this.nullable || (this.value) || (this.value===false) ? null : {notNullable: {
+      valid: false,
+      message: "This field is required!"
+    }};
+  }
+
+  // on button click
+  protected onChange(newValue: boolean): void {
+    this.value = newValue;
+
+    super.change();
+  }
+}

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

@@ -8,6 +8,7 @@ export abstract class CustomInputComponent implements ControlValueAccessor, Vali
   private propagateTouch: () => void = () => {};
   protected initComplete: boolean = false;
   private isTouched: boolean = false;
+  private initialChangeDone = false;
 
   public ngAfterViewInit() {
     setTimeout(() => {
@@ -34,9 +35,11 @@ export abstract class CustomInputComponent implements ControlValueAccessor, Vali
 
   // on change
   protected change(noTouch?: boolean): void {
-    if (!noTouch)
+    if (!noTouch && this.initialChangeDone) {
       this.touch();
+    }
     this.propagateChange(this.value);
+    this.initialChangeDone = true;
   }
 
   // on change

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

@@ -50,7 +50,7 @@ export class TagInputComponent extends CustomInputComponent {
     console.log("writeValue", isUpdated, this.value);
 
     if (isUpdated) {
-      setTimeout(() => super.change(true), 0);
+      setTimeout(() => this.change(true), 0);
     }
   }
 
@@ -75,7 +75,7 @@ export class TagInputComponent extends CustomInputComponent {
     this.value = Object.assign({}, this.value);
     this.value[key] = value;
 
-    super.change();
+    this.change();
     return false;
   }
 }

src/app/modules/dyn-form/services/question.service.ts

@@ -52,7 +52,18 @@ export class QuestionService {
           key: 'textarea',
           label: 'Textareaaaa',
           order: 4,
-          spezialization: 'world'
+          specialization: 'world',
+          methods: ['insert']
+        }, constraints: {
+          optional: false
+        }
+      }, {
+        type: 'checkbox',
+        description: 'This is a very long box. Fill it!',
+        properties: {
+          key: 'checki',
+          label: 'To be or not to be?',
+          order: 5
         }, constraints: {
           optional: false
         }

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

@@ -1,5 +1,5 @@
 export interface QuestionInterface {
-  type: "flag"|"textbox"|"textarea"|"hidden"|"dropdown",
+  type: "flag"|"textbox"|"textarea"|"hidden"|"dropdown"|"checkbox",
   description: string,
   properties: {
     key: string,
@@ -7,7 +7,7 @@ export interface QuestionInterface {
     order: number,
 
     methods?: Array<string>,
-    spezialization?: string,
+    specialization?: string,
 
     // textbox
     type?: string,