Dropdown foreign implementation

src/app/app.component.html

@@ -1,3 +1,5 @@
+<button (click)="loadValues()">Refesh</button>
+<hr>
 <h1>{{formName}}</h1>
 <p>{{formDescription}}</p>
-<dyn-form [questions]="formQuestions" (onSubmit)="submit($event)" [value]="formValue" [type]="'insert'"></dyn-form>
+<dyn-form [questions]="formQuestions" (onSubmit)="submit($event)" [value]="formValue" [type]="'insert'"></dyn-form>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {QuestionInterface} from './modules/dyn-form/types/question.interface';
 import {FormService} from './modules/dyn-form/services/form.service';
 import {ValueService} from './modules/dyn-form/services/value.service';
@@ -8,14 +8,20 @@ import {ValueService} from './modules/dyn-form/services/value.service';
   templateUrl: './app.component.html'
 })
 
-export class AppComponent  {
+export class AppComponent {
   public formQuestions: QuestionInterface[] = null;
   public formValue: Object = null;
   public formName: string = "";
   public formDescription  ="";
+  private uri: string = '/crf/fields';
 
   constructor(private questionService: FormService, private valueService: ValueService) {
-    this.questionService.getForm('/crf/domains', (res, err) => {
+    this.loadValues();
+  }
+
+  private loadValues() {
+    console.log(this.uri);
+    this.questionService.getForm(this.uri, (res, err) => {
       if (err)
         console.error(err);
       else {
@@ -25,7 +31,7 @@ export class AppComponent  {
         console.log("questions", this.formQuestions);
       }
     });
-    this.valueService.getValue('/crf/domains', 3, (res, err) => {
+    this.valueService.getValue(this.uri, 3, (res, err) => {
       if (err)
         console.error(err);
       else {
@@ -35,7 +41,7 @@ export class AppComponent  {
     });
   }
 
-  submit(value: any) {
+  public submit(value: any) {
     console.log('send', value);
   }
 }

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

@@ -22,7 +22,7 @@ import {FormGroup, ValidationErrors} from '@angular/forms';
           <dropdown-input *ngSwitchCase="'dropdown'"
                           [formControlName]="question.properties.key" [id]="question.properties.key"
                           [nullable]="question.constraints.optional" [readonly]="type=='view'"
-                          [items]="question.properties.options"
+                          [items]="question.properties.options" [foreign]="question.properties.foreign"
                           (ngModelChange)="change()"></dropdown-input>
           <textarea-input *ngSwitchCase="'textarea'"
                           [formControlName]="question.properties.key" [id]="question.properties.key"
@@ -61,7 +61,6 @@ 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

@@ -6,9 +6,9 @@ import {CustomInputComponent} from "./custom-input.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/>
+      <label *ngIf="!readonly"><input type="radio" [checked]="value===true" (change)="onChange(true)">Yes</label><br/>
+      <label *ngIf="!readonly"><input type="radio" [checked]="value===false" (change)="onChange(false)">No</label><br/>
+      <label *ngIf="!readonly && nullable"><input type="radio" [checked]="value===null" (change)="onChange(null)">N/A</label><br/>
       <span *ngIf="readonly">{{value ? "Yes" : (value===false ? "No" : "N/A")}}</span>
   `,
   providers: [

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

@@ -1,6 +1,8 @@
 import {Component, forwardRef, Input, OnChanges, SimpleChanges} from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
 import {CustomInputComponent} from "./custom-input.component";
+import {ValueService} from '../services/value.service';
+import {consoleTestResultHandler} from 'tslint/lib/test';
 
 @Component({
   selector: 'dropdown-input',
@@ -21,34 +23,51 @@ import {CustomInputComponent} from "./custom-input.component";
       provide: NG_VALIDATORS,
       useExisting: forwardRef(() => DropdownInputComponent),
       multi: true,
-    }]
+    },
+    ValueService
+  ]
 })
 export class DropdownInputComponent extends CustomInputComponent implements OnChanges {
   @Input() readonly: boolean = false;
   @Input() nullable: boolean = false;
   @Input() items: Array<{key: string, value: string}> = [];
+  @Input() foreign: {uri: string, keys: string, values: string, options?: {key: string, value: string}[]};
   private listedItems: Array<{key: string, value: string}> = [];
+  private foreignItems: Array<{key: string, value: string}> = [];
   private constVal: string;
 
+  constructor(private valueService: ValueService) {
+    super();
+  }
+
   // set initial value
   public writeValue(obj: any): void {
-    console.log("init: ", obj);
     this.value = obj;
     this.updateConst();
   }
 
   public ngOnChanges(changes: SimpleChanges) {
-    console.log("onchnage: ", this.value);
     if (changes['items'] || changes['nullable'] || changes['readonly']) {
-      if (this.nullable)
-        this.listedItems = [{key: "", value: "N/A"}, {key: null, value: "N/A"}].concat(this.items);
-      else
-        this.listedItems = this.items;
-      this.updateConst();
+      this.setListedItems();
+    }
+    if (changes['foreign'] && this.foreign) {
+      this.valueService.getValues(this.foreign.uri, {}, (res, err) => {
+        this.foreignItems = [];
+        for (let item of res as any) {
+          this.foreignItems.push({key: item[this.foreign.keys], value: item[this.foreign.values]});
+        }
+        this.setListedItems();
+      });
     }
   }
 
-
+  private setListedItems() {
+    if (this.nullable)
+      this.listedItems = [{key: "", value: "N/A"}, {key: null, value: "N/A"}].concat(this.items || []).concat(this.foreignItems || []);
+    else
+      this.listedItems = [].concat(this.items || []).concat(this.foreignItems || []);
+    this.updateConst();
+  }
 
   private updateConst() {
     if (this.readonly) {
@@ -63,7 +82,6 @@ export class DropdownInputComponent extends CustomInputComponent implements OnCh
 
   // validates the form, returns null when valid else the validation object
   public validate(c: FormControl): ValidationErrors {
-    console.log("validate", this.value, this.initComplete, this.nullable, this.items);
     if (!this.initComplete)
       return null;
     if (this.value===null) {
@@ -72,12 +90,10 @@ export class DropdownInputComponent extends CustomInputComponent implements OnCh
         message: "This field is required!"
       }};
     }
-    for (let i=0; i<this.items.length; i++) {
-      console.log(this.items[i].key, this.value);
-      if (this.items[i].key==this.value)
+    for (let i=0; i<this.listedItems.length; i++) {
+      if (this.listedItems[i].key==this.value)
         return null;
     }
-    console.log("ret invalid");
     return {invalidValue: {
       valid: false,
       message: "This value is invalid. Please select another value!"

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

@@ -30,6 +30,8 @@ export class TextareaInputComponent extends CustomInputComponent {
   public writeValue(obj: any): void {
     if (obj) {
       this.value = obj + '';
+    } else {
+      this.value = '';
     }
   }
 
@@ -46,7 +48,6 @@ export class TextareaInputComponent extends CustomInputComponent {
   // on button click
   protected onChange($event: KeyboardEvent): void {
     this.value = $event.target['value'];
-    console.log("NEW:", this.value, $event.target, $event.target['value']);
 
     super.change();
   }

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

@@ -34,6 +34,8 @@ export class TextboxInputComponent extends CustomInputComponent {
   public writeValue(obj: any): void {
     if (obj) {
       this.value = obj + '';
+    } else {
+      this.value = '';
     }
   }