2017-09-14 12:37:36 +02:00
<!-- <div [formGroup]="form" class="form - group">
< label [ attr . for ] = " field . key " > {{field.label}}< / label >
< div [ ngSwitch ] = " field . controlType " >
< input * ngSwitchCase = "'textbox'" class = "form-control" [ formControlName ] = " field . key "
[id]="field.key" [type]="field.type" required ="field.required">
< select [ id ] = " field . key " * ngSwitchCase = "'dropdown'" class = "form-control" [ formControlName ] = " field . key " >
< option * ngFor = "let opt of field.options" [ value ] = " opt . key " > {{opt.value}}< / option >
< / select >
< input * ngSwitchCase = "'checkbox'" [ formControlName ] = " field . key " [ ( ngModel ) ] = " field . value "
[id]="field.key" [type]="field.type" (change)="field.value = ckb.checked" #ckb>
< / div >
< div class = "alert alert-danger" * ngIf = "!isValid" > {{field.label}} is required< / div >
< / div > -->
2017-09-18 11:38:06 +02:00
< div [ formGroup ] = " form " class = "form-group" [ ngSwitch ] = " field . controlType " >
< div [ ngClass ] = " { true: ' show ' , false: ' hide ' } [ field . visible ] " >
2017-11-07 09:04:59 +01:00
< label * ngIf = "field.controlType != 'checkbox'" [ attr . for ] = " field . key " > {{field.label}}< / label >
2017-09-19 17:24:31 +02:00
< div > {{field.description}}< / div >
2017-10-05 14:42:44 +02:00
< input * ngSwitchCase = "'textbox'" class = "form-control" [ formControlName ] = " field . key " [ id ] = " field . key " [ type ] = " field . type "
2017-11-03 18:14:32 +01:00
[required]="field.required" [pattern] = "field.regex" (ngModelChange) = "toggleVisibility($event, field,false)"> <!-- input or change event
2017-10-17 09:38:04 +02:00
on change event the listener is triggered on blur -->
2017-09-14 12:37:36 +02:00
2017-11-09 15:03:17 +01:00
< div * ngSwitchCase = "'dropdown'" >
{{field.url}}
< autocomplete-remote * ngIf = "field.url" [ form ] = " form " [ formCtrlName ] = " field . key " [ label ] = " ' Please select a datarepo ' " [ url ] = " field . url " > < / autocomplete-remote >
< select * ngIf = "!field.url" class = "form-control" [ id ] = " field . key " [ formControlName ] = " field . key " [ required ] = " field . required " ( change ) = " toggleVisibility ( $ event , field , false ) " >
< option * ngFor = "let opt of field.options" [ value ] = " opt . key " > {{opt.value}}< / option >
< / select >
< / div >
2017-09-14 12:37:36 +02:00
2017-11-07 09:04:59 +01:00
< div * ngSwitchCase = "'checkbox'" class = "checkbox" >
< label class = "checkBoxLabelCustom" >
< input * ngSwitchCase = "'checkbox'" class = "form-check" [ formControlName ] = " field . key " [ type ] = " field . type "
(change)="toggleVisibility($event, field, true)" [required]="field.required" [checked]="form.get(field.key).value">{{field.label}} <!-- (change)="field.value = ckb.checked" has moved into the toggleVisibility
// without property [checked] as pages change the checkboxes of the previous pages lose the checked pro [checked] = "field.value" #ckb -->
< / label >
< / div >
2017-09-18 18:08:15 +02:00
2017-11-06 11:38:58 +01:00
< textarea * ngSwitchCase = "'textarea'" class = "form-control" [ formControlName ] = " field . key " [ id ] = " field . key "
[required]="field.required" (ngModelChange) = "toggleVisibility($event, field,false)"> < / textarea >
2017-09-18 18:08:15 +02:00
2017-09-19 12:48:00 +02:00
< div * ngSwitchCase = "'radiobox'" >
< ng-container * ngFor = "let answrBase of field.answers" >
2017-10-10 16:10:00 +02:00
< div style = "display: inline-block;margin-right:10px;" [ id ] = " field . key " >
2017-09-19 12:48:00 +02:00
< label for = "{{answrBase.id}}" style = "padding: 8px 10px; padding-right:5px;" > {{answrBase.answer}}< / label >
2017-11-03 18:14:32 +01:00
< input type = "radio" [ formControlName ] = " field . key " [ id ] = " answrBase . id " [ value ] = " answrBase . value " [ ( ngModel ) ] = " field . value " ( change ) = " toggleVisibility ( $ event , field , false ) " [ required ] = " field . required " / >
2017-09-19 12:48:00 +02:00
< / div >
< / ng-container >
2017-09-19 17:24:31 +02:00
< / div >
2017-10-03 17:36:09 +02:00
< / div >
2017-09-29 18:16:37 +02:00
2017-11-09 15:03:17 +01:00
< div * ngSwitchCase = "'label'" > < / div >
2017-10-03 17:36:09 +02:00
< div [ hidden ] = " isValid " >
2017-10-13 10:13:52 +02:00
< div class = "invalid-feedbackCustom" * ngIf = "isValidRequired" > The field "{{field.label}}" is required< / div >
< div class = "invalid-feedbackCustom" * ngIf = "isValidPattern" > The field {{field.label}} must match a regular expression {{field.regex}}< / div >
< div class = "invalid-feedbackCustom" * ngIf = "isValidCustom" > The field {{field.label}} custom Validation< / div >
2017-09-18 11:38:06 +02:00
< / div >
2017-09-29 18:16:37 +02:00
2017-09-18 11:38:06 +02:00
< / div >
<!-- <div [formGroup]="form" class="form - group" [ngSwitch]="field.controlType">
2017-09-14 12:37:36 +02:00
< div * ngIf = "field.rules; else elseBlock " >
< div * ngIf = "field.rules.length > 0; else elseBlock" >
< div * ngFor = "let rule of field.rules" >
< div * ngIf = "rule._type == 'fieldVisible'; else otherRuleBlock" >
< div hidden = "{{ruleVisibleMethod(field, rule, dataModel)}}" >
< label [ attr . for ] = " field . key " > {{field.label}}< / label >
< input * ngSwitchCase = "'textbox'" class = "form-control" [ formControlName ] = " field . key " [ id ] = " field . key " [ type ] = " field . type "
required="field.required">
< select [ id ] = " field . key " * ngSwitchCase = "'dropdown'" class = "form-control" [ formControlName ] = " field . key " >
< option * ngFor = "let opt of field.options" [ value ] = " opt . key " > {{opt.value}}< / option >
< / select >
< input * ngSwitchCase = "'checkbox'" [ formControlName ] = " field . key " [ ( ngModel ) ] = " field . value " [ id ] = " field . key " [ type ] = " field . type "
(change)="field.value = ckb.checked" #ckb>
< / div >
< / div >
< / div >
< / div >
< / div >
< ng-template # elseBlock >
< label [ attr . for ] = " field . key " > {{field.label}}< / label >
< input * ngSwitchCase = "'textbox'" class = "form-control" [ formControlName ] = " field . key " [ id ] = " field . key " [ type ] = " field . type "
required="field.required">
< select [ id ] = " field . key " * ngSwitchCase = "'dropdown'" class = "form-control" [ formControlName ] = " field . key " >
< option * ngFor = "let opt of field.options" [ value ] = " opt . key " > {{opt.value}}< / option >
< / select >
< input * ngSwitchCase = "'checkbox'" [ formControlName ] = " field . key " [ ( ngModel ) ] = " field . value " [ id ] = " field . key " [ type ] = " field . type "
(change)="field.value = ckb.checked" #ckb>
< / ng-template >
2017-09-18 12:18:17 +02:00
< ng-template # otherRuleBlock >
2017-09-14 12:37:36 +02:00
< / ng-template >
2017-09-18 11:38:06 +02:00
< / div > -->