diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 8112a10..d9206a4 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,23 +1,15 @@ - - - - - + + - - - - - - - + + @@ -35,22 +27,23 @@ - - + + - - + + + - + - - + + @@ -61,7 +54,7 @@ - + @@ -71,11 +64,33 @@ + + + + + + + + + + + + + + + + + + + + + + - - + + @@ -83,24 +98,55 @@ - + - - + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -122,18 +168,20 @@ @@ -184,7 +232,6 @@ - @@ -277,40 +324,6 @@ - - - - - - - - - - - - - - - - - - + @@ -527,7 +541,8 @@ - + + 1496129612668 @@ -543,34 +558,50 @@ - - + + + + + + + + - + - - - - - + + + + + - + + - @@ -618,6 +649,8 @@ @@ -637,13 +670,6 @@ - - - - - - - @@ -658,8 +684,9 @@ - - + + + @@ -678,12 +705,13 @@ - - - - - - + + + + + + + @@ -693,7 +721,7 @@ - + @@ -713,7 +741,7 @@ - + @@ -747,8 +775,9 @@ - - + + + @@ -767,12 +796,13 @@ - - - - - - + + + + + + + @@ -782,7 +812,7 @@ - + @@ -791,7 +821,9 @@ - + + + @@ -837,14 +869,6 @@ - - - - - - - - @@ -860,14 +884,7 @@ - - - - - - - - + @@ -912,16 +929,6 @@ - - - - - - - - - - @@ -934,17 +941,6 @@ - - - - - - - - - - - @@ -953,7 +949,7 @@ - + @@ -962,7 +958,6 @@ - @@ -971,40 +966,15 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1012,9 +982,6 @@ - - - @@ -1030,7 +997,6 @@ - @@ -1050,41 +1016,35 @@ - + - - - - - - - + + + - - - - - - - - - - - + - + + + + + + + + + - + - + @@ -1093,18 +1053,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3be3a52..fd8c6ba 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -23,7 +23,7 @@ export class AppComponent { }); } - static submit(value: any) { + submit(value: any) { console.log('send', value); } } diff --git a/src/app/modules/dyn-form/dyn-form.component.ts b/src/app/modules/dyn-form/dyn-form.component.ts index 32446ee..d7604d1 100644 --- a/src/app/modules/dyn-form/dyn-form.component.ts +++ b/src/app/modules/dyn-form/dyn-form.component.ts @@ -6,7 +6,9 @@ import {FormControl, FormGroup} from '@angular/forms'; selector: 'dyn-form', template: `
- +
diff --git a/src/app/modules/dyn-form/dyn-form.module.ts b/src/app/modules/dyn-form/dyn-form.module.ts index 48c6f18..b8a928c 100644 --- a/src/app/modules/dyn-form/dyn-form.module.ts +++ b/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: [ diff --git a/src/app/modules/dyn-form/dyn-question.component.ts b/src/app/modules/dyn-form/dyn-question.component.ts index 1d9aee1..03f5b70 100644 --- a/src/app/modules/dyn-form/dyn-question.component.ts +++ b/src/app/modules/dyn-form/dyn-question.component.ts @@ -5,7 +5,7 @@ import {FormGroup, ValidationErrors} from '@angular/forms'; @Component({ selector: 'dyn-question', template: ` -
+
Help {{question.description}}
@@ -24,10 +24,16 @@ import {FormGroup, ValidationErrors} from '@angular/forms'; [nullable]="question.constraints.optional" [readonly]="type=='view'" [items]="question.properties.options" (ngModelChange)="change()"> - +
  • {{error}}
    • diff --git a/src/app/modules/dyn-form/inputs/textarea-input.component.ts b/src/app/modules/dyn-form/inputs/textarea-input.component.ts index a8c1071..0dc13c9 100644 --- a/src/app/modules/dyn-form/inputs/textarea-input.component.ts +++ b/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!" diff --git a/src/app/modules/dyn-form/inputs/textbox-input.component.ts b/src/app/modules/dyn-form/inputs/textbox-input.component.ts new file mode 100644 index 0000000..2cf6c75 --- /dev/null +++ b/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: + ` + + {{value}} + No value specified! + `, + 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(); + } +} \ 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 index 79fa847..fdb1bb8 100644 --- a/src/app/modules/dyn-form/types/question.interface.ts +++ b/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 } \ No newline at end of file