From 7a32d18b1b200045310739c049365d6b4d1a7177 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 9 May 2018 12:14:18 +0200
Subject: [PATCH 01/41] Merged dynamic form module

---
 package.json                                  |   9 +
 resources/i18n/en.json                        |  15 +
 src/app/app.reducer.ts                        |  67 +--
 src/app/core/cache/response-cache.models.ts   |  11 +
 src/app/core/core.module.ts                   |   2 +
 src/app/core/data/request.models.ts           |  10 +
 src/app/core/integration/authority.service.ts |  19 +
 src/app/core/integration/integration-data.ts  |  12 +
 .../integration/integration-object-factory.ts |  17 +
 .../integration-response-parsing.service.ts   |  47 ++
 .../core/integration/integration.service.ts   |  85 ++++
 src/app/core/integration/intergration-type.ts |   4 +
 .../models/authority-options.model.ts         |  16 +
 .../models/authority-value.model.ts           |  20 +
 .../models/integration-options.model.ts       |  14 +
 .../integration/models/integration.model.ts   |  12 +
 .../shared/config/config-authority.model.ts   |  23 +
 .../shared/config/config-object-factory.ts    |   4 +
 .../config/config-submission-forms.model.ts   |  10 +-
 src/app/core/shared/config/config-type.ts     |   3 +-
 src/app/shared/animations/shrink.ts           |  13 +
 src/app/shared/chips/chips.component.html     |  33 ++
 src/app/shared/chips/chips.component.scss     |   9 +
 src/app/shared/chips/chips.component.ts       |  95 ++++
 .../shared/chips/models/chips-item.model.ts   |  73 +++
 src/app/shared/chips/models/chips.model.ts    | 130 ++++++
 src/app/shared/date.util.ts                   |  19 +
 .../ds-dynamic-form-control.component.html    | 442 ++++++++++++++++++
 .../ds-dynamic-form-control.component.spec.ts |   0
 .../ds-dynamic-form-control.component.ts      | 176 +++++++
 .../ds-dynamic-form.component.html            |  12 +
 .../ds-dynamic-form.component.scss            |   5 +
 .../ds-dynamic-form.component.ts              |  47 ++
 .../ds-date-picker.component.html             |  47 ++
 .../ds-date-picker.component.scss             |   3 +
 .../ds-date-picker.component.ts               | 170 +++++++
 .../ds-date-picker/ds-date-picker.model.ts    |  21 +
 .../models/ds-dynamic-combobox.model.ts       |  64 +++
 .../models/ds-dynamic-concat.model.ts         |  50 ++
 .../dynamic-group.component.html              |  65 +++
 .../dynamic-group.component.scss              |   3 +
 .../dynamic-group.components.ts               | 224 +++++++++
 .../ds-dynamic-group/dynamic-group.model.ts   |  41 ++
 .../models/ds-dynamic-input.model.ts          |  86 ++++
 .../models/ds-dynamic-row-array-model.ts      |  18 +
 .../models/ds-dynamic-row-group-model.ts      |   5 +
 .../models/ds-dynamic-textarea.model.ts       |  30 ++
 .../list/dynamic-list-checkbox-group.model.ts |  59 +++
 .../list/dynamic-list-radio-group.model.ts    |  35 ++
 .../models/list/dynamic-list.component.html   |  66 +++
 .../models/list/dynamic-list.component.scss   |   1 +
 .../models/list/dynamic-list.component.ts     | 137 ++++++
 .../lookup/dynamic-lookup.component.html      | 130 ++++++
 .../lookup/dynamic-lookup.component.scss      |  68 +++
 .../models/lookup/dynamic-lookup.component.ts | 220 +++++++++
 .../models/lookup/dynamic-lookup.model.ts     |  37 ++
 ...dynamic-scrollable-dropdown.component.html |  43 ++
 ...dynamic-scrollable-dropdown.component.scss |  26 ++
 .../dynamic-scrollable-dropdown.component.ts  |  94 ++++
 .../dynamic-scrollable-dropdown.model.ts      |  27 ++
 .../models/tag/dynamic-tag.component.html     |  46 ++
 .../models/tag/dynamic-tag.component.scss     |  34 ++
 .../models/tag/dynamic-tag.component.ts       | 194 ++++++++
 .../models/tag/dynamic-tag.model.spec.ts      | 143 ++++++
 .../models/tag/dynamic-tag.model.ts           |  28 ++
 .../dynamic-typeahead.component.html          |  25 +
 .../dynamic-typeahead.component.scss          |  25 +
 .../typeahead/dynamic-typeahead.component.ts  | 121 +++++
 .../typeahead/dynamic-typeahead.model.ts      |  25 +
 .../form/builder/form-builder.service.ts      | 212 +++++++++
 .../models/form-field-language-value.model.ts |  14 +
 .../models/form-field-metadata-value.model.ts |  42 ++
 .../form-field-previous-value-object.ts       |  37 ++
 .../form-field-unexpected-object.model.ts     |   3 +
 .../form/builder/models/form-field.model.ts   |  42 ++
 .../builder/parsers/concat-field-parser.ts    |  99 ++++
 .../form/builder/parsers/date-field-parser.ts |  49 ++
 .../builder/parsers/dropdown-field-parser.ts  |  44 ++
 .../form/builder/parsers/field-parser.ts      | 272 +++++++++++
 .../builder/parsers/group-field-parser.ts     |  67 +++
 .../form/builder/parsers/list-field-parser.ts |  52 +++
 .../builder/parsers/lookup-field-parser.ts    |  30 ++
 .../parsers/lookup-name-field-parser.ts       |  22 +
 .../form/builder/parsers/name-field-parser.ts |  10 +
 .../builder/parsers/onebox-field-parser.ts    |  95 ++++
 .../form/builder/parsers/parser.utils.ts      |  17 +
 .../shared/form/builder/parsers/row-parser.ts | 162 +++++++
 .../builder/parsers/series-field-parser.ts    |  10 +
 .../form/builder/parsers/tag-field-parser.ts  |  31 ++
 .../builder/parsers/textarea-field-parser.ts  |  32 ++
 .../builder/parsers/twobox-field-parser.ts    |  10 +
 src/app/shared/form/form.actions.ts           | 126 +++++
 src/app/shared/form/form.component.html       |  61 +++
 src/app/shared/form/form.component.scss       |  23 +
 src/app/shared/form/form.component.spec.ts    | 175 +++++++
 src/app/shared/form/form.component.ts         | 274 +++++++++++
 src/app/shared/form/form.effects.ts           |  11 +
 src/app/shared/form/form.reducers.ts          | 179 +++++++
 src/app/shared/form/form.service.ts           | 118 +++++
 src/app/shared/form/selectors.ts              |  10 +
 .../number-picker.component.html              |  33 ++
 .../number-picker.component.scss              |  44 ++
 .../number-picker/number-picker.component.ts  | 147 ++++++
 src/app/shared/shared.module.ts               |  62 ++-
 .../shared/uploader/uploader-options.model.ts |  13 +
 .../shared/uploader/uploader.component.html   |  51 ++
 .../shared/uploader/uploader.component.scss   |  40 ++
 src/app/shared/uploader/uploader.component.ts | 168 +++++++
 src/app/shared/uploader/uploader.service.ts   |  18 +
 src/app/shared/utils/console.pipe.ts          |  11 +
 yarn.lock                                     |  42 ++
 111 files changed, 6778 insertions(+), 45 deletions(-)
 create mode 100644 src/app/core/integration/authority.service.ts
 create mode 100644 src/app/core/integration/integration-data.ts
 create mode 100644 src/app/core/integration/integration-object-factory.ts
 create mode 100644 src/app/core/integration/integration-response-parsing.service.ts
 create mode 100644 src/app/core/integration/integration.service.ts
 create mode 100644 src/app/core/integration/intergration-type.ts
 create mode 100644 src/app/core/integration/models/authority-options.model.ts
 create mode 100644 src/app/core/integration/models/authority-value.model.ts
 create mode 100644 src/app/core/integration/models/integration-options.model.ts
 create mode 100644 src/app/core/integration/models/integration.model.ts
 create mode 100644 src/app/core/shared/config/config-authority.model.ts
 create mode 100644 src/app/shared/animations/shrink.ts
 create mode 100644 src/app/shared/chips/chips.component.html
 create mode 100644 src/app/shared/chips/chips.component.scss
 create mode 100644 src/app/shared/chips/chips.component.ts
 create mode 100644 src/app/shared/chips/models/chips-item.model.ts
 create mode 100644 src/app/shared/chips/models/chips.model.ts
 create mode 100644 src/app/shared/date.util.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
 create mode 100644 src/app/shared/form/builder/form-builder.service.ts
 create mode 100644 src/app/shared/form/builder/models/form-field-language-value.model.ts
 create mode 100644 src/app/shared/form/builder/models/form-field-metadata-value.model.ts
 create mode 100644 src/app/shared/form/builder/models/form-field-previous-value-object.ts
 create mode 100644 src/app/shared/form/builder/models/form-field-unexpected-object.model.ts
 create mode 100644 src/app/shared/form/builder/models/form-field.model.ts
 create mode 100644 src/app/shared/form/builder/parsers/concat-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/date-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/dropdown-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/group-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/list-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/lookup-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/name-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/onebox-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/parser.utils.ts
 create mode 100644 src/app/shared/form/builder/parsers/row-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/series-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/tag-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/textarea-field-parser.ts
 create mode 100644 src/app/shared/form/builder/parsers/twobox-field-parser.ts
 create mode 100644 src/app/shared/form/form.actions.ts
 create mode 100644 src/app/shared/form/form.component.html
 create mode 100644 src/app/shared/form/form.component.scss
 create mode 100644 src/app/shared/form/form.component.spec.ts
 create mode 100644 src/app/shared/form/form.component.ts
 create mode 100644 src/app/shared/form/form.effects.ts
 create mode 100644 src/app/shared/form/form.reducers.ts
 create mode 100644 src/app/shared/form/form.service.ts
 create mode 100644 src/app/shared/form/selectors.ts
 create mode 100644 src/app/shared/number-picker/number-picker.component.html
 create mode 100644 src/app/shared/number-picker/number-picker.component.scss
 create mode 100644 src/app/shared/number-picker/number-picker.component.ts
 create mode 100644 src/app/shared/uploader/uploader-options.model.ts
 create mode 100644 src/app/shared/uploader/uploader.component.html
 create mode 100644 src/app/shared/uploader/uploader.component.scss
 create mode 100644 src/app/shared/uploader/uploader.component.ts
 create mode 100644 src/app/shared/uploader/uploader.service.ts
 create mode 100644 src/app/shared/utils/console.pipe.ts

diff --git a/package.json b/package.json
index 2878daf1c8..dcc22c6d71 100644
--- a/package.json
+++ b/package.json
@@ -80,14 +80,19 @@
     "@angular/router": "^5.2.5",
     "@angularclass/bootloader": "1.0.1",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0",
+    "@ng-dynamic-forms/core": "5.4.7",
+    "@ng-dynamic-forms/ui-ng-bootstrap": "5.4.7",
     "@ngrx/effects": "^5.1.0",
     "@ngrx/router-store": "^5.0.1",
     "@ngrx/store": "^5.1.0",
     "@nguniversal/express-engine": "5.0.0-beta.5",
     "@ngx-translate/core": "9.1.1",
     "@ngx-translate/http-loader": "2.0.1",
+    "@nicky-lenaers/ngx-scroll-to": "^0.6.0",
     "angular-idle-preload": "2.0.4",
+    "angular-sortablejs": "^2.5.0",
     "angulartics2": "^5.2.0",
+    "angular2-text-mask": "8.0.4",
     "body-parser": "1.18.2",
     "bootstrap": "^4.0.0",
     "cerialize": "0.1.18",
@@ -103,10 +108,14 @@
     "jsonschema": "1.2.2",
     "methods": "1.1.2",
     "morgan": "1.9.0",
+    "ng2-file-upload": "1.2.1",
+    "ngx-infinite-scroll": "0.8.2",
     "ngx-pagination": "3.0.3",
     "pem": "1.12.3",
     "reflect-metadata": "0.1.12",
     "rxjs": "5.5.6",
+    "sortablejs": "1.7.0",
+    "text-mask-core": "5.0.1",
     "ts-md5": "^1.2.4",
     "uuid": "^3.2.1",
     "webfontloader": "1.6.28",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 53ae9015f6..dc316af0bf 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -154,5 +154,20 @@
     "item": "Error fetching item",
     "objects": "Error fetching objects",
     "search-results": "Error fetching search results"
+  },
+  "form": {
+    "submit": "Submit",
+    "cancel": "Cancel",
+    "search": "Search",
+    "remove": "Remove",
+    "first-name": "First name",
+    "last-name": "Last name",
+    "loading": "Loading...",
+    "no-results": "No results found",
+    "no-value": "No value entered",
+    "group-collapse": "Collapse",
+    "group-expand": "Expand",
+    "group-collapse-help": "Click here to collapse",
+    "group-expand-help": "Click here to expand and add more element"
   }
 }
diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts
index 117710e3c0..0e5cb17a96 100644
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -1,32 +1,35 @@
-import { ActionReducerMap } from '@ngrx/store';
-import * as fromRouter from '@ngrx/router-store';
-
-import { headerReducer, HeaderState } from './header/header.reducer';
-import { hostWindowReducer, HostWindowState } from './shared/host-window.reducer';
-import {
-  SearchSidebarState,
-  sidebarReducer
-} from './+search-page/search-sidebar/search-sidebar.reducer';
-import {
-  filterReducer,
-  SearchFiltersState
-} from './+search-page/search-filters/search-filter/search-filter.reducer';
-import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
-
-export interface AppState {
-  router: fromRouter.RouterReducerState;
-  hostWindow: HostWindowState;
-  header: HeaderState;
-  searchSidebar: SearchSidebarState;
-  searchFilter: SearchFiltersState;
-  truncatable: TruncatablesState;
-}
-
-export const appReducers: ActionReducerMap<AppState> = {
-  router: fromRouter.routerReducer,
-  hostWindow: hostWindowReducer,
-  header: headerReducer,
-  searchSidebar: sidebarReducer,
-  searchFilter: filterReducer,
-  truncatable: truncatableReducer
-};
+import { ActionReducerMap } from '@ngrx/store';
+import * as fromRouter from '@ngrx/router-store';
+
+import { headerReducer, HeaderState } from './header/header.reducer';
+import { hostWindowReducer, HostWindowState } from './shared/host-window.reducer';
+import { formReducer, FormState } from './shared/form/form.reducers';
+import {
+  SearchSidebarState,
+  sidebarReducer
+} from './+search-page/search-sidebar/search-sidebar.reducer';
+import {
+  filterReducer,
+  SearchFiltersState
+} from './+search-page/search-filters/search-filter/search-filter.reducer';
+import { truncatableReducer, TruncatablesState } from './shared/truncatable/truncatable.reducer';
+
+export interface AppState {
+  router: fromRouter.RouterReducerState;
+  hostWindow: HostWindowState;
+  header: HeaderState;
+  forms: FormState;
+  searchSidebar: SearchSidebarState;
+  searchFilter: SearchFiltersState;
+  truncatable: TruncatablesState;
+}
+
+export const appReducers: ActionReducerMap<AppState> = {
+  router: fromRouter.routerReducer,
+  hostWindow: hostWindowReducer,
+  header: headerReducer,
+  forms: formReducer,
+  searchSidebar: sidebarReducer,
+  searchFilter: filterReducer,
+  truncatable: truncatableReducer
+};
diff --git a/src/app/core/cache/response-cache.models.ts b/src/app/core/cache/response-cache.models.ts
index f061e78e6c..d86b437695 100644
--- a/src/app/core/cache/response-cache.models.ts
+++ b/src/app/core/cache/response-cache.models.ts
@@ -5,6 +5,7 @@ import { BrowseDefinition } from '../shared/browse-definition.model';
 import { ConfigObject } from '../shared/config/config.model';
 import { FacetValue } from '../../+search-page/search-service/facet-value.model';
 import { SearchFilterConfig } from '../../+search-page/search-service/search-filter-config.model';
+import { IntegrationModel } from '../integration/models/integration.model';
 
 /* tslint:disable:max-classes-per-file */
 export class RestResponse {
@@ -106,4 +107,14 @@ export class ConfigSuccessResponse extends RestResponse {
     super(true, statusCode);
   }
 }
+
+export class IntegrationSuccessResponse extends RestResponse {
+  constructor(
+    public dataDefinition: IntegrationModel[],
+    public statusCode: string,
+    public pageInfo?: PageInfo
+  ) {
+    super(true, statusCode);
+  }
+}
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 86abf87d62..3ae9fd5407 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -44,6 +44,7 @@ import { HALEndpointService } from './shared/hal-endpoint.service';
 import { FacetValueResponseParsingService } from './data/facet-value-response-parsing.service';
 import { FacetValueMapResponseParsingService } from './data/facet-value-map-response-parsing.service';
 import { FacetConfigResponseParsingService } from './data/facet-config-response-parsing.service';
+import { UploaderService } from '../shared/uploader/uploader.service';
 
 const IMPORTS = [
   CommonModule,
@@ -88,6 +89,7 @@ const PROVIDERS = [
   SubmissionDefinitionsConfigService,
   SubmissionFormsConfigService,
   SubmissionSectionsConfigService,
+  UploaderService,
   UUIDService,
   { provide: NativeWindowService, useFactory: NativeWindowFactory }
 ];
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index 21df69b3a2..1fea85de50 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -7,6 +7,7 @@ import { ResponseParsingService } from './parsing.service';
 import { EndpointMapResponseParsingService } from './endpoint-map-response-parsing.service';
 import { BrowseResponseParsingService } from './browse-response-parsing.service';
 import { ConfigResponseParsingService } from './config-response-parsing.service';
+import { IntegrationResponseParsingService } from '../integration/integration-response-parsing.service';
 
 /* tslint:disable:max-classes-per-file */
 
@@ -174,6 +175,15 @@ export class ConfigRequest extends GetRequest {
   }
 }
 
+export class IntegrationRequest extends GetRequest {
+  constructor(uuid: string, href: string) {
+    super(uuid, href);
+  }
+
+  getResponseParser(): GenericConstructor<ResponseParsingService> {
+    return IntegrationResponseParsingService;
+  }
+}
 export class RequestError extends Error {
   statusText: string;
 }
diff --git a/src/app/core/integration/authority.service.ts b/src/app/core/integration/authority.service.ts
new file mode 100644
index 0000000000..cb2595adc4
--- /dev/null
+++ b/src/app/core/integration/authority.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+import { ResponseCacheService } from '../cache/response-cache.service';
+import { RequestService } from '../data/request.service';
+import { IntegrationService } from './integration.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+
+@Injectable()
+export class AuthorityService extends IntegrationService {
+  protected linkPath = 'authorities';
+  protected browseEndpoint = 'entries';
+
+  constructor(
+    protected responseCache: ResponseCacheService,
+    protected requestService: RequestService,
+    protected halService: HALEndpointService) {
+    super();
+  }
+}
diff --git a/src/app/core/integration/integration-data.ts b/src/app/core/integration/integration-data.ts
new file mode 100644
index 0000000000..cdcec605da
--- /dev/null
+++ b/src/app/core/integration/integration-data.ts
@@ -0,0 +1,12 @@
+import { PageInfo } from '../shared/page-info.model';
+import { IntegrationModel } from './models/integration.model';
+
+/**
+ * A class to represent the data retrieved by a Eperson service
+ */
+export class IntegrationData {
+  constructor(
+    public pageInfo: PageInfo,
+    public payload: IntegrationModel[]
+  ) { }
+}
diff --git a/src/app/core/integration/integration-object-factory.ts b/src/app/core/integration/integration-object-factory.ts
new file mode 100644
index 0000000000..4f69dbd6fe
--- /dev/null
+++ b/src/app/core/integration/integration-object-factory.ts
@@ -0,0 +1,17 @@
+import { GenericConstructor } from '../shared/generic-constructor';
+import { IntegrationType } from './intergration-type';
+import { AuthorityValueModel } from './models/authority-value.model';
+import { IntegrationModel } from './models/integration.model';
+
+export class IntegrationObjectFactory {
+  public static getConstructor(type): GenericConstructor<IntegrationModel> {
+    switch (type) {
+      case IntegrationType.Authority: {
+        return AuthorityValueModel;
+      }
+      default: {
+        return undefined;
+      }
+    }
+  }
+}
diff --git a/src/app/core/integration/integration-response-parsing.service.ts b/src/app/core/integration/integration-response-parsing.service.ts
new file mode 100644
index 0000000000..5d6ce09114
--- /dev/null
+++ b/src/app/core/integration/integration-response-parsing.service.ts
@@ -0,0 +1,47 @@
+import { Inject, Injectable } from '@angular/core';
+import { RestRequest } from '../data/request.models';
+import { ResponseParsingService } from '../data/parsing.service';
+import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
+import {
+  ErrorResponse,
+  IntegrationSuccessResponse,
+  RestResponse
+} from '../cache/response-cache.models';
+import { isNotEmpty } from '../../shared/empty.util';
+import { IntegrationObjectFactory } from './integration-object-factory';
+
+import { BaseResponseParsingService } from '../data/base-response-parsing.service';
+import { GLOBAL_CONFIG } from '../../../config';
+import { GlobalConfig } from '../../../config/global-config.interface';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { IntegrationModel } from './models/integration.model';
+import { IntegrationType } from './intergration-type';
+
+@Injectable()
+export class IntegrationResponseParsingService extends BaseResponseParsingService implements ResponseParsingService {
+
+  protected objectFactory = IntegrationObjectFactory;
+  protected toCache = false;
+
+  constructor(
+    @Inject(GLOBAL_CONFIG) protected EnvConfig: GlobalConfig,
+    protected objectCache: ObjectCacheService,
+  ) {
+    super();
+  }
+
+  parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
+    if (isNotEmpty(data.payload) && isNotEmpty(data.payload._links)) {
+      const dataDefinition = this.process<IntegrationModel,IntegrationType>(data.payload, request.href);
+      return new IntegrationSuccessResponse(dataDefinition[Object.keys(dataDefinition)[0]], data.statusCode, this.processPageInfo(data.payload.page));
+    } else {
+      return new ErrorResponse(
+        Object.assign(
+          new Error('Unexpected response from Integration endpoint'),
+          {statusText: data.statusCode}
+        )
+      );
+    }
+  }
+
+}
diff --git a/src/app/core/integration/integration.service.ts b/src/app/core/integration/integration.service.ts
new file mode 100644
index 0000000000..f1c770336a
--- /dev/null
+++ b/src/app/core/integration/integration.service.ts
@@ -0,0 +1,85 @@
+import { Observable } from 'rxjs/Observable';
+import { RequestService } from '../data/request.service';
+import { ResponseCacheService } from '../cache/response-cache.service';
+import { ErrorResponse, IntegrationSuccessResponse, RestResponse } from '../cache/response-cache.models';
+import { GetRequest, IntegrationRequest } from '../data/request.models';
+import { ResponseCacheEntry } from '../cache/response-cache.reducer';
+import { hasValue, isNotEmpty } from '../../shared/empty.util';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { IntegrationData } from './integration-data';
+import { IntegrationSearchOptions } from './models/integration-options.model';
+
+export abstract class IntegrationService {
+  protected request: IntegrationRequest;
+  protected abstract responseCache: ResponseCacheService;
+  protected abstract requestService: RequestService;
+  protected abstract linkPath: string;
+  protected abstract browseEndpoint: string;
+  protected abstract halService: HALEndpointService;
+
+  protected getData(request: GetRequest): Observable<IntegrationData> {
+    const [successResponse, errorResponse] = this.responseCache.get(request.href)
+      .map((entry: ResponseCacheEntry) => entry.response)
+      .partition((response: RestResponse) => response.isSuccessful);
+    return Observable.merge(
+      errorResponse.flatMap((response: ErrorResponse) =>
+        Observable.throw(new Error(`Couldn't retrieve the integration data`))),
+      successResponse
+        .filter((response: IntegrationSuccessResponse) => isNotEmpty(response))
+        .map((response: IntegrationSuccessResponse) => new IntegrationData(response.pageInfo, response.dataDefinition))
+        .distinctUntilChanged());
+  }
+
+  protected getIntegrationHref(endpoint, options: IntegrationSearchOptions = new IntegrationSearchOptions()): string {
+    let result;
+    const args = [];
+
+    if (hasValue(options.name)) {
+      result = `${endpoint}/${options.name}/${this.browseEndpoint}`;
+    } else {
+      result = endpoint;
+    }
+
+    if (hasValue(options.query)) {
+      args.push(`query=${options.query}`);
+    }
+
+    if (hasValue(options.metadata)) {
+      args.push(`metadata=${options.metadata}`);
+    }
+
+    if (hasValue(options.uuid)) {
+      args.push(`uuid=${options.uuid}`);
+    }
+
+    if (hasValue(options.currentPage) && typeof options.currentPage === 'number') {
+      /* TODO: this is a temporary fix for the pagination start index (0 or 1) discrepancy between the rest and the frontend respectively */
+      args.push(`page=${options.currentPage - 1}`);
+    }
+
+    if (hasValue(options.elementsPerPage)) {
+      args.push(`size=${options.elementsPerPage}`);
+    }
+
+    if (hasValue(options.sort)) {
+      args.push(`sort=${options.sort.field},${options.sort.direction}`);
+    }
+
+    if (isNotEmpty(args)) {
+      result = `${result}?${args.join('&')}`;
+    }
+    return result;
+  }
+
+  public getEntriesByName(options: IntegrationSearchOptions): Observable<IntegrationData> {
+    return this.halService.getEndpoint(this.linkPath)
+      .map((endpoint: string) => this.getIntegrationHref(endpoint, options))
+      .filter((href: string) => isNotEmpty(href))
+      .distinctUntilChanged()
+      .map((endpointURL: string) => new IntegrationRequest(this.requestService.generateRequestId(), endpointURL))
+      .do((request: GetRequest) => this.requestService.configure(request))
+      .flatMap((request: GetRequest) => this.getData(request))
+      .distinctUntilChanged();
+  }
+
+}
diff --git a/src/app/core/integration/intergration-type.ts b/src/app/core/integration/intergration-type.ts
new file mode 100644
index 0000000000..882dc6d8ce
--- /dev/null
+++ b/src/app/core/integration/intergration-type.ts
@@ -0,0 +1,4 @@
+
+export enum IntegrationType {
+  Authority = 'authority'
+}
diff --git a/src/app/core/integration/models/authority-options.model.ts b/src/app/core/integration/models/authority-options.model.ts
new file mode 100644
index 0000000000..0b826f7f9c
--- /dev/null
+++ b/src/app/core/integration/models/authority-options.model.ts
@@ -0,0 +1,16 @@
+export class AuthorityOptions {
+  name: string;
+  metadata: string;
+  scope: string;
+  closed: boolean;
+
+  constructor(name: string,
+              metadata: string,
+              scope: string,
+              closed: boolean = false) {
+    this.name = name;
+    this.metadata = metadata;
+    this.scope = scope;
+    this.closed = closed;
+  }
+}
diff --git a/src/app/core/integration/models/authority-value.model.ts b/src/app/core/integration/models/authority-value.model.ts
new file mode 100644
index 0000000000..e2ef9ce9db
--- /dev/null
+++ b/src/app/core/integration/models/authority-value.model.ts
@@ -0,0 +1,20 @@
+import { IntegrationModel } from './integration.model';
+import { autoserialize } from 'cerialize';
+
+export class AuthorityValueModel extends IntegrationModel {
+
+  @autoserialize
+  id: string;
+
+  @autoserialize
+  display: string;
+
+  @autoserialize
+  value: string;
+
+  @autoserialize
+  otherInformation: any;
+
+  @autoserialize
+  language: string;
+}
diff --git a/src/app/core/integration/models/integration-options.model.ts b/src/app/core/integration/models/integration-options.model.ts
new file mode 100644
index 0000000000..5f158bd47c
--- /dev/null
+++ b/src/app/core/integration/models/integration-options.model.ts
@@ -0,0 +1,14 @@
+import { SortOptions } from '../../cache/models/sort-options.model';
+
+export class IntegrationSearchOptions {
+
+  constructor(public uuid: string = '',
+              public name: string = '',
+              public metadata: string = '',
+              public query: string = '',
+              public elementsPerPage?: number,
+              public currentPage?: number,
+              public sort?: SortOptions) {
+
+  }
+}
diff --git a/src/app/core/integration/models/integration.model.ts b/src/app/core/integration/models/integration.model.ts
new file mode 100644
index 0000000000..d3383ab94a
--- /dev/null
+++ b/src/app/core/integration/models/integration.model.ts
@@ -0,0 +1,12 @@
+import { autoserialize } from 'cerialize';
+
+export abstract class IntegrationModel {
+
+  @autoserialize
+  public type: string;
+
+  @autoserialize
+  public _links: {
+    [name: string]: string
+  }
+}
diff --git a/src/app/core/shared/config/config-authority.model.ts b/src/app/core/shared/config/config-authority.model.ts
new file mode 100644
index 0000000000..bbb8605bcc
--- /dev/null
+++ b/src/app/core/shared/config/config-authority.model.ts
@@ -0,0 +1,23 @@
+import { autoserialize, autoserializeAs, inheritSerialization } from 'cerialize';
+import { ConfigObject } from './config.model';
+import { SubmissionSectionModel } from './config-submission-section.model';
+
+@inheritSerialization(ConfigObject)
+export class ConfigAuthorityModel extends ConfigObject {
+
+  @autoserialize
+  id: string;
+
+  @autoserialize
+  display: string;
+
+  @autoserialize
+  value: string;
+
+  @autoserialize
+  otherInformation: any;
+
+  @autoserialize
+  language: string;
+
+}
diff --git a/src/app/core/shared/config/config-object-factory.ts b/src/app/core/shared/config/config-object-factory.ts
index 4f56a84812..4cb5016983 100644
--- a/src/app/core/shared/config/config-object-factory.ts
+++ b/src/app/core/shared/config/config-object-factory.ts
@@ -6,6 +6,7 @@ import { SubmissionFormsModel } from './config-submission-forms.model';
 import { SubmissionDefinitionsModel } from './config-submission-definitions.model';
 import { ConfigType } from './config-type';
 import { ConfigObject } from './config.model';
+import { ConfigAuthorityModel } from './config-authority.model';
 
 export class ConfigObjectFactory {
   public static getConstructor(type): GenericConstructor<ConfigObject> {
@@ -22,6 +23,9 @@ export class ConfigObjectFactory {
       case ConfigType.SubmissionSections: {
         return SubmissionSectionModel
       }
+      case ConfigType.Authority: {
+        return ConfigAuthorityModel
+      }
       default: {
         return undefined;
       }
diff --git a/src/app/core/shared/config/config-submission-forms.model.ts b/src/app/core/shared/config/config-submission-forms.model.ts
index 0b094091a7..98d3bf9ce7 100644
--- a/src/app/core/shared/config/config-submission-forms.model.ts
+++ b/src/app/core/shared/config/config-submission-forms.model.ts
@@ -1,10 +1,14 @@
-import { autoserialize, autoserializeAs, inheritSerialization } from 'cerialize';
+import { autoserialize, inheritSerialization } from 'cerialize';
 import { ConfigObject } from './config.model';
+import { FormFieldModel } from '../../../shared/form/builder/models/form-field.model';
+
+export interface FormRowModel {
+  fields: FormFieldModel[];
+}
 
 @inheritSerialization(ConfigObject)
 export class SubmissionFormsModel extends ConfigObject {
 
   @autoserialize
-  fields: any[];
-
+  rows: FormRowModel[];
 }
diff --git a/src/app/core/shared/config/config-type.ts b/src/app/core/shared/config/config-type.ts
index ab0a18e516..17ed099229 100644
--- a/src/app/core/shared/config/config-type.ts
+++ b/src/app/core/shared/config/config-type.ts
@@ -10,5 +10,6 @@ export enum ConfigType {
   SubmissionForm = 'submissionform',
   SubmissionForms = 'submissionforms',
   SubmissionSections = 'submissionsections',
-  SubmissionSection = 'submissionsection'
+  SubmissionSection = 'submissionsection',
+  Authority = 'authority'
 }
diff --git a/src/app/shared/animations/shrink.ts b/src/app/shared/animations/shrink.ts
new file mode 100644
index 0000000000..28f1d2a567
--- /dev/null
+++ b/src/app/shared/animations/shrink.ts
@@ -0,0 +1,13 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+export const shrinkInOut = trigger('shrinkInOut', [
+  state('in', style({height: '100%', opacity: 1})),
+  transition('* => void', [
+    style({height: '!', opacity: 1}),
+    animate(200, style({height: 0, opacity: 0}))
+  ]),
+  transition('void => *', [
+    style({height: 0, opacity: 0}),
+    animate(200, style({height: '*', opacity: 1}))
+  ])
+]);
diff --git a/src/app/shared/chips/chips.component.html b/src/app/shared/chips/chips.component.html
new file mode 100644
index 0000000000..870f7db396
--- /dev/null
+++ b/src/app/shared/chips/chips.component.html
@@ -0,0 +1,33 @@
+<div [className]="'float-left w-100 ' + wrapperClass">
+  <ul class="nav nav-pills d-flex flex-column flex-sm-row" [sortablejs]="chips.getChips()" [sortablejsOptions]="options">
+    <ng-container *ngFor="let c of chips.getChips(); let i = index">
+      <ng-template #tipContent>{{tipText}}</ng-template>
+      <li [ngbTooltip]="tipContent"
+          triggers="manual"
+          #t="ngbTooltip"
+          class="nav-item mr-2 mb-1"
+          (click)="t.close()"
+          (dragstart)="onDragStart(t, i)"
+          (dragend)="onDragEnd(i)"
+          (mouseover)="showTooltip(t, i, c.display)"
+          (mouseout)="t.close()">
+        <a class="flex-sm-fill text-sm-center nav-link active"
+           href="#"
+           [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged == i}"
+           (click)="t.close();chipsSelected($event, i);">
+          <span>
+            <ng-container *ngIf="c.hasIcons()">
+              <i *ngFor="let icon of c.icons; let i = index; let l = last"
+                 class="fa {{icon.style}}"
+                 [class.mr-2]="l"
+                 aria-hidden="true"></i>
+            </ng-container>
+            <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fa fa-times ml-2" (click)="removeChips($event, i)"></i>
+          </span>
+        </a>
+      </li>
+    </ng-container>
+
+    <ng-content></ng-content>
+  </ul>
+</div>
diff --git a/src/app/shared/chips/chips.component.scss b/src/app/shared/chips/chips.component.scss
new file mode 100644
index 0000000000..9d7eae7edd
--- /dev/null
+++ b/src/app/shared/chips/chips.component.scss
@@ -0,0 +1,9 @@
+@import "../../../styles/variables";
+
+.chip-selected {
+  background-color: map-get($theme-colors, info) !important;
+}
+
+.chip-label {
+  max-width: 10rem;
+}
diff --git a/src/app/shared/chips/chips.component.ts b/src/app/shared/chips/chips.component.ts
new file mode 100644
index 0000000000..eea0993c98
--- /dev/null
+++ b/src/app/shared/chips/chips.component.ts
@@ -0,0 +1,95 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, } from '@angular/core';
+
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { SortablejsOptions } from 'angular-sortablejs';
+
+import { Chips } from './models/chips.model';
+import { ChipsItem } from './models/chips-item.model';
+import { UploaderService } from '../uploader/uploader.service';
+
+@Component({
+  selector: 'ds-chips',
+  styleUrls: ['./chips.component.scss'],
+  templateUrl: './chips.component.html',
+})
+
+export class ChipsComponent implements OnChanges {
+  @Input() chips: Chips;
+  @Input() wrapperClass: string;
+  @Input() editable: boolean;
+
+  @Output() selected: EventEmitter<number> = new EventEmitter<number>();
+  @Output() remove: EventEmitter<number> = new EventEmitter<number>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+
+  options: SortablejsOptions;
+  dragged = -1;
+  tipText: string;
+
+  constructor(private cdr: ChangeDetectorRef, private uploaderService: UploaderService) {
+    this.options = {
+      animation: 300,
+      chosenClass: 'm-0',
+      dragClass: 'm-0',
+      filter: '.chips-sort-ignore',
+      ghostClass: 'm-0'
+    };
+  }
+
+  ngOnInit() {
+    if (!this.editable) {
+      this.editable = false;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.chips && !changes.chips.isFirstChange()) {
+      this.chips = changes.chips.currentValue;
+    }
+  }
+
+  chipsSelected(event: Event, index: number) {
+    event.preventDefault();
+    if (this.editable) {
+      this.chips.getChips().forEach((item: ChipsItem, i: number) => {
+        if (i === index) {
+          item.setEditMode();
+        } else {
+          item.unsetEditMode();
+        }
+      });
+      this.selected.emit(index);
+    }
+  }
+
+  removeChips(event: Event, index: number) {
+    event.preventDefault();
+    event.stopPropagation();
+    // Can't remove if this element is in editMode
+    if (!this.chips.getChipByIndex(index).editMode) {
+      this.chips.remove(this.chips.getChipByIndex(index));
+    }
+  }
+
+  onDragStart(tooltip: NgbTooltip, index) {
+    tooltip.close();
+    this.uploaderService.overrideDragOverPage();
+    this.dragged = index;
+  }
+
+  onDragEnd(event) {
+    this.uploaderService.allowDragOverPage();
+    this.dragged = -1;
+    this.chips.updateOrder();
+  }
+
+  showTooltip(tooltip: NgbTooltip, index, content) {
+    tooltip.close();
+    if (!this.chips.getChipByIndex(index).editMode && this.dragged === -1) {
+      this.tipText = content;
+      this.cdr.detectChanges();
+      tooltip.open();
+    }
+  }
+
+}
diff --git a/src/app/shared/chips/models/chips-item.model.ts b/src/app/shared/chips/models/chips-item.model.ts
new file mode 100644
index 0000000000..0efdd0984b
--- /dev/null
+++ b/src/app/shared/chips/models/chips-item.model.ts
@@ -0,0 +1,73 @@
+import { uniqueId } from 'lodash';
+import { isNotEmpty } from '../../empty.util';
+
+export interface ChipsItemIcon {
+  style: string;
+  tooltip?: any;
+}
+
+export class ChipsItem {
+  public id: string;
+  public display: string;
+  public item: any;
+  public editMode?: boolean;
+  public icons?: ChipsItemIcon[];
+
+  private fieldToDisplay: string;
+  private objToDisplay: string;
+
+  constructor(item: any,
+              fieldToDisplay: string,
+              objToDisplay: string,
+              icons?: ChipsItemIcon[],
+              editMode?: boolean) {
+
+    this.id = uniqueId();
+    this.item = item;
+    this.fieldToDisplay = fieldToDisplay;
+    this.objToDisplay = objToDisplay;
+    this.setDisplayText();
+    this.editMode = editMode || false;
+    this.icons = icons || [];
+  }
+
+  hasIcons(): boolean {
+    return isNotEmpty(this.icons);
+  }
+
+  setEditMode(): void {
+    this.editMode = true;
+  }
+
+  updateIcons(icons: ChipsItemIcon[]): void {
+    this.icons = icons;
+  }
+
+  updateItem(item: any): void {
+    this.item = item;
+    this.setDisplayText();
+  }
+
+  unsetEditMode(): void {
+    this.editMode = false;
+  }
+
+  private setDisplayText(): void {
+    let value = this.item;
+    if ( typeof this.item === 'object') {
+      // Check If displayField is in an internal object
+      const obj = this.objToDisplay ? this.item[this.objToDisplay] : this.item;
+      const displayFieldBkp = 'value';
+
+      if (obj instanceof Object && obj && obj[this.fieldToDisplay]) {
+        value = obj[this.fieldToDisplay];
+      } else if (obj instanceof Object && obj && obj[displayFieldBkp]) {
+        value = obj[displayFieldBkp];
+      } else {
+        value = obj;
+      }
+    }
+
+    this.display = value;
+  }
+}
diff --git a/src/app/shared/chips/models/chips.model.ts b/src/app/shared/chips/models/chips.model.ts
new file mode 100644
index 0000000000..4476c1cd77
--- /dev/null
+++ b/src/app/shared/chips/models/chips.model.ts
@@ -0,0 +1,130 @@
+import { findIndex, isEqual } from 'lodash';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { ChipsItem, ChipsItemIcon } from './chips-item.model';
+import { hasValue } from '../../empty.util';
+import { FormFieldMetadataValueObject } from '../../form/builder/models/form-field-metadata-value.model';
+import { AuthorityValueModel } from '../../../core/integration/models/authority-value.model';
+
+export interface ChipsIconsConfig {
+  [metadata: string]: string;
+}
+
+export class Chips {
+  chipsItems: BehaviorSubject<ChipsItem[]>;
+  displayField: string;
+  displayObj: string;
+  iconsConfig: ChipsIconsConfig;
+
+  private _items: ChipsItem[];
+
+  constructor(items: any[] = [],
+              displayField: string = 'display',
+              displayObj?: string,
+              iconsConfig?: ChipsIconsConfig) {
+
+    this.displayField = displayField;
+    this.displayObj = displayObj;
+    this.iconsConfig = iconsConfig || Object.create({});
+    if (Array.isArray(items)) {
+      this.setInitialItems(items);
+    }
+  }
+
+  public add(item: any): void {
+    const icons = this.getChipsIcons(item);
+    const chipsItem = new ChipsItem(item, this.displayField, this.displayObj, icons);
+
+    const duplicatedIndex = findIndex(this._items, {display: chipsItem.display.trim()});
+    if (duplicatedIndex === -1 || !isEqual(item, this.getChipByIndex(duplicatedIndex).item)) {
+      this._items.push(chipsItem);
+      this.chipsItems.next(this._items);
+    }
+  }
+
+  public getChipById(id): ChipsItem {
+    const index = findIndex(this._items, {id: id});
+    return this.getChipByIndex(index);
+  }
+
+  public getChipByIndex(index): ChipsItem {
+    if (this._items.length > 0 && this._items[index]) {
+      return this._items[index];
+    } else {
+      return null;
+    }
+  }
+
+  public getChips(): ChipsItem[] {
+    return this._items;
+  }
+
+  /**
+   * To use to get items before to store it
+   * @returns {any[]}
+   */
+  public getChipsItems(): any[] {
+    const out = [];
+    this._items.forEach((item) => {
+      out.push(item.item);
+    });
+    return out;
+  }
+
+  public hasItems(): boolean {
+    return this._items.length > 0;
+  }
+
+  public remove(chipsItem: ChipsItem): void {
+    const index = findIndex(this._items, {id: chipsItem.id});
+    this._items.splice(index, 1);
+    this.chipsItems.next(this._items);
+  }
+
+  public update(id: string, item: any): void {
+    const chipsItemTarget = this.getChipById(id);
+    const icons = this.getChipsIcons(item);
+
+    chipsItemTarget.updateItem(item);
+    chipsItemTarget.updateIcons(icons);
+    chipsItemTarget.unsetEditMode();
+    this.chipsItems.next(this._items);
+  }
+
+  public updateOrder(): void {
+    this.chipsItems.next(this._items);
+  }
+
+  private getChipsIcons(item) {
+    const icons = [];
+    Object.keys(item)
+      .forEach((metadata) => {
+        const value = item[metadata];
+        if (hasValue(value)
+          && (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel)
+          && ((value as FormFieldMetadataValueObject).authority || (value as AuthorityValueModel).id)
+          && this.iconsConfig.hasOwnProperty(metadata)) {
+
+          const icon: ChipsItemIcon = {
+            style: this.iconsConfig[metadata]
+          };
+          icons.push(icon);
+        }
+      });
+
+    return icons;
+  }
+
+  /**
+   * Sets initial items, used in edit mode
+   */
+  private setInitialItems(items: any[]): void {
+    this._items = [];
+    items.forEach((item) => {
+      const icons = this.getChipsIcons(item);
+      const chipsItem = new ChipsItem(item, this.displayField, this.displayObj, icons);
+      this._items.push(chipsItem);
+    });
+
+    this.chipsItems = new BehaviorSubject<ChipsItem[]>(this._items);
+  }
+}
diff --git a/src/app/shared/date.util.ts b/src/app/shared/date.util.ts
new file mode 100644
index 0000000000..90f9ff9b39
--- /dev/null
+++ b/src/app/shared/date.util.ts
@@ -0,0 +1,19 @@
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+
+export function dateToGMTString(date: Date | NgbDateStruct) {
+  let year = ((date instanceof Date) ? date.getFullYear() : date.year).toString();
+  let month = ((date instanceof Date) ? date.getMonth() + 1 : date.month).toString();
+  let day = ((date instanceof Date) ? date.getDate() : date.day).toString();
+  let hour = ((date instanceof Date) ? date.getHours() : 0).toString();
+  let min = ((date instanceof Date) ? date.getMinutes() : 0).toString();
+  let sec = ((date instanceof Date) ? date.getSeconds() : 0).toString();
+
+  year = (year.length === 1) ? '0' + year : year;
+  month = (month.length === 1) ? '0' + month : month;
+  day = (day.length === 1) ? '0' + day : day;
+  hour = (hour.length === 1) ? '0' + hour : hour;
+  min = (min.length === 1) ? '0' + min : min;
+  sec = (sec.length === 1) ? '0' + sec : sec;
+  return `${year}-${month}-${day}T${hour}:${min}:${sec}Z`;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
new file mode 100644
index 0000000000..de30440dc2
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -0,0 +1,442 @@
+<div [class.form-group]="(type !== 6 && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
+  [formGroup]="group"
+     [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
+
+  <label *ngIf="type !== 3 && model.label"
+           [for]="model.id"
+           [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
+           [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
+
+    <ng-container *ngTemplateOutlet="templates[0]?.templateRef; context: model"></ng-container>
+
+  <div [ngClass]="{'form-row': model.hasLanguages }">
+    <div [ngClass]="getClass('grid', 'control')">
+
+      <ng-container [ngSwitch]="type">
+
+        <!-- FORM ARRAY ------------------------------------------------------------------------------------------->
+        <div *ngSwitchCase="1"
+             [dynamicId]="bindId && model.id"
+             [formArrayName]="model.id"
+             [ngClass]="getClass('element', 'control')">
+
+          <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
+                     [formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]">
+
+            <ds-dynamic-form-control *ngFor="let _model of groupModel.group"
+                                     [bindId]="false"
+                                     [formId]="formId"
+                                     [context]="groupModel"
+                                     [group]="control.at(idx)"
+                                     [hasErrorMessaging]="_model.hasErrorMessages"
+                                     [hidden]="_model.hidden"
+                                     [layout]="layout"
+                                     [model]="_model"
+                                     [templates]="templateList"
+                                     [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
+                                     (dfBlur)="onBlur($event)"
+                                     (dfChange)="onValueChange($event)"
+                                     (dfFocus)="onFocus($event)"></ds-dynamic-form-control>
+
+                    <ng-container *ngTemplateOutlet="templates[2]?.templateRef; context: groupModel"></ng-container>
+	        </div>
+        </div>
+
+
+        <!-- CALENDAR --------------------------------------------------------------------------------------------->
+        <ngb-datepicker *ngSwitchCase="2"
+                        [displayMonths]="getAdditional('displayMonths', 1)"
+                        [dynamicId]="bindId && model.id"
+                        [firstDayOfWeek]="getAdditional('firstDayOfWeek', 1)"
+                        [formControlName]="model.id"
+                        [maxDate]="model.max"
+                        [minDate]="model.min"
+                        [navigation]="getAdditional('navigation', 'select')"
+                        [ngClass]="getClass('element', 'control')"
+                        [outsideDays]="getAdditional('outsideDays', 'visible')"
+                        [showWeekdays]="getAdditional('showWeekdays', true)"
+                        [showWeekNumbers]="getAdditional('showWeekNumbers', false)"
+                        [startDate]="model.focusedDate"
+                        (select)="onValueChange($event)"></ngb-datepicker>
+
+        <!-- CHECKBOX --------------------------------------------------------------------------------------------->
+        <div *ngSwitchCase="3" class="custom-control custom-checkbox" [class.disabled]="model.disabled">
+            <input type="checkbox" class="custom-control-input"
+                   [checked]="model.checked"
+                   [class.is-invalid]="showErrorMessages"
+                   [id]="bindId && model.id"
+                   [dynamicId]="bindId && model.id"
+                   [formControlName]="model.id"
+                   [indeterminate]="model.indeterminate"
+                   [name]="model.name"
+                   [ngClass]="getClass('element', 'control')"
+                   [required]="model.required"
+                   [tabindex]="model.tabIndex"
+                   [value]="model.value"
+                   (blur)="onBlur($event)"
+                   (change)="onValueChange($event)"
+                   (focus)="onFocus($event)" >
+          <label class="custom-control-label" [for]="bindId && model.id">
+            <span [innerHTML]="model.label"
+                  [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
+            </span>
+          </label>
+        </div>
+
+        <!-- CHECKBOX GROUP --------------------------------------------------------------------------------------->
+        <div *ngSwitchCase="4" class="btn-group btn-group-toggle" data-toggle="buttons"
+             [dynamicId]="bindId && model.id"
+             [formGroupName]="model.id"
+             [ngClass]="getClass('element', 'control')">
+          <label *ngFor="let checkboxModel of model.group" ngbButtonLabel
+                 [hidden]="checkboxModel.hidden"
+                 [ngClass]="getClass('element', 'control', checkboxModel)">
+            <input type="checkbox" ngbButton
+                   [checked]="checkboxModel.checked"
+                   [dynamicId]="bindId && checkboxModel.id"
+                   [formControlName]="checkboxModel.id"
+                   [name]="checkboxModel.name"
+                   [required]="checkboxModel.required"
+                   [tabindex]="checkboxModel.tabIndex"
+                   [value]="checkboxModel.value"
+                   (blur)="onBlur($event)"
+                   (change)="onValueChange($event)"
+                   (focus)="onFocus($event)"/>
+            <span [ngClass]="getClass('element', 'label', checkboxModel)"
+                  [innerHTML]="checkboxModel.label"></span></label>
+        </div>
+
+        <!-- DATEPICKER ------------------------------------------------------------------------------------------->
+        <div *ngSwitchCase="5" class="input-group">
+          <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
+                 [class.is-invalid]="showErrorMessages"
+                 [displayMonths]="getAdditional('displayMonths', 1)"
+                 [dynamicId]="bindId && model.id"
+                 [firstDayOfWeek]="getAdditional('firstDayOfWeek', 1)"
+                 [formControlName]="model.id"
+                 [maxDate]="model.max"
+                 [minDate]="model.min"
+                 [name]="model.name"
+                 [navigation]="getAdditional('navigation', 'select')"
+                 [ngClass]="getClass('element', 'control')"
+                 [outsideDays]="getAdditional('outsideDays', 'visible')"
+                 [placeholder]="(model.placeholder | translate)"
+                 [placement]="getAdditional('placement', 'bottom-left')"
+                 [showWeekdays]="getAdditional('showWeekdays', true)"
+                 [showWeekNumbers]="getAdditional('showWeekNumbers', false)"
+                 [startDate]="model.focusedDate"
+                 (blur)="onBlur($event)"
+                 (change)="onValueChange($event)"
+                 (focus)="onFocus($event)">
+
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary"
+                    type="button"
+                    [class.disabled]="model.disabled"
+                    [disabled]="model.disabled"
+                    (click)="datepicker.toggle()">
+              <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>
+              <span *ngIf="model.toggleLabel">{{ model.toggleLabel }}</span>
+            </button>
+          </div>
+        </div>
+
+            <!-- FORM GROUP ------------------------------------------------------------------------------------------->
+        <div *ngSwitchCase="6" role="group"
+             [dynamicId]="bindId && model.id"
+             [formGroupName]="model.id"
+                 [ngClass]="getClass('element','control')">
+
+          <ds-dynamic-form-control *ngFor="let _model of model.group"
+                                   [asBootstrapFormGroup]="true"
+                                   [formId]="formId"
+                                   [group]="control"
+                                   [hasErrorMessaging]="_model.hasErrorMessages"
+                                   [hidden]="_model.hidden"
+                                   [layout]="layout"
+                                   [model]="_model"
+                                   [templates]="templateList"
+                                   [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
+                                   (dfBlur)="onBlur($event)"
+                                   (dfChange)="onValueChange($event)"
+                                   (dfFocus)="onFocus($event)"></ds-dynamic-form-control>
+        </div>
+
+        <!-- INPUT ------------------------------------------------------------------------------------------------>
+        <div *ngSwitchCase="7" [class.input-group]="model.prefix || model.suffix">
+
+          <div *ngIf="model.prefix" class="input-group-addon" [innerHTML]="model.prefix"></div>
+
+          <ng-container *ngTemplateOutlet="inputTemplate;
+                                           context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
+
+          </ng-container>
+
+          <div *ngIf="model.suffix" class="input-group-addon" [innerHTML]="model.suffix"></div>
+
+          <datalist *ngIf="model.list" [id]="model.listId">
+            <option *ngFor="let option of model.list" [value]="option">
+          </datalist>
+
+        </div>
+
+        <!-- RADIO GROUP ------------------------------------------------------------------------------------------>
+        <div *ngSwitchCase="8" ngbRadioGroup class="btn-group" role="radiogroup"
+             [dynamicId]="bindId && model.id"
+             [formControlName]="model.id"
+             [ngClass]="getClass('element', 'control')"
+             [tabindex]="model.tabIndex"
+             (change)="onValueChange($event)">
+
+          <legend *ngIf="model.legend" [innerHTML]="model.legend"></legend>
+
+          <label *ngFor="let option of model.options$ | async" ngbButtonLabel
+                       [ngClass]="[getClass('element', 'option'), getClass('grid', 'option')]">
+
+            <input type="radio" ngbButton
+                   [disabled]="option.disabled"
+                   [name]="model.name"
+                   [value]="option.value"
+                           (blur)="onBlur($event)"
+                           (focus)="onFocus($event)"/><span [innerHTML]="option.label"></span>
+          </label>
+
+        </div>
+
+
+        <ng-container *ngSwitchCase="9">
+          <ng-container *ngTemplateOutlet="selectTemplate;
+                                                 context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
+
+          </ng-container>
+        </ng-container>
+
+
+        <!-- TEXTAREA --------------------------------------------------------------------------------------------->
+        <textarea *ngSwitchCase="10" class="form-control"
+                  [class.is-invalid]="showErrorMessages"
+                  [dynamicId]="bindId && model.id"
+                  [cols]="model.cols"
+                  [formControlName]="model.id"
+                  [maxlength]="model.maxLength"
+                  [minlength]="model.minLength"
+                  [name]="model.name"
+                  [ngClass]="getClass('element', 'control')"
+                  [placeholder]="(model.placeholder | translate)"
+                  [readonly]="model.readOnly"
+                  [required]="model.required"
+                  [rows]="model.rows"
+                  [spellcheck]="model.spellCheck"
+                  [tabindex]="model.tabIndex"
+                  [wrap]="model.wrap"
+                  (blur)="onBlur($event)"
+                  (change)="onValueChange($event)"
+                  (focus)="onFocus($event)"></textarea>
+
+        <!-- TIMEPICKER ------------------------------------------------------------------------------------------->
+        <ngb-timepicker *ngSwitchCase="11"
+                        [dynamicId]="bindId && model.id"
+                        [formControlName]="model.id"
+                        [hourStep]="getAdditional('hourStep', 1)"
+                        [meridian]="model.meridian"
+                        [minuteStep]="getAdditional('minuteStep', 1)"
+                        [ngClass]="getClass('element', 'control')"
+                        [seconds]="model.showSeconds"
+                        [secondStep]="getAdditional('secondStep', 1)"
+                        [size]="getAdditional('size', 'medium')"
+                        [spinners]="getAdditional('spinners', true)"></ngb-timepicker>
+
+
+
+        <ng-container *ngSwitchCase="12">
+          <ng-container *ngTemplateOutlet="typeaheadTemplate;
+                                           context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
+
+          </ng-container>
+        </ng-container>
+
+
+        <ng-container *ngSwitchCase="13">
+          <ng-container *ngTemplateOutlet="scrollableDropdownTemplate;
+                                           context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
+
+          </ng-container>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="14">
+          <ng-container *ngTemplateOutlet="tagTemplate;
+                                                   context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
+
+          </ng-container>
+
+        </ng-container>
+
+        <ng-container *ngSwitchCase="15">
+          <ng-container *ngTemplateOutlet="listTemplate;
+                                                   context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
+
+          </ng-container>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="16">
+          <ds-dynamic-group [model]="model"
+                            [formId]="formId"
+                            [group]="group"
+                            (blur)="onBlur($event)"
+                            (change)="onValueChange($event)"
+                            (focus)="onFocus($event)"></ds-dynamic-group>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="17">
+          <ds-date-picker
+            [bindId]="bindId"
+            [group]="group"
+            [model]="model"
+            [showErrorMessages]="showErrorMessages"
+            (blur)="onBlur($event)"
+            (change)="onValueChange($event)"
+            (focus)="onFocus($event)"></ds-date-picker>
+        </ng-container>
+
+        <ng-container *ngSwitchCase="18">
+          <ds-dynamic-lookup
+            [bindId]="bindId"
+            [group]="group"
+            [model]="model"
+            [showErrorMessages]="showErrorMessages"
+            (blur)="onBlur($event)"
+            (change)="onValueChange($event)"
+            (focus)="onFocus($event)"
+          ></ds-dynamic-lookup>
+        </ng-container>
+
+        <small *ngIf="showHint" class="text-muted" [innerHTML]="model.hint"
+               [ngClass]="getClass('element', 'hint')"></small>
+
+        <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
+            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message }}</small>
+        </div>
+
+      </ng-container>
+
+
+      <ng-template #inputTemplate let-bindId="bindId" let-model="model"
+                   let-showErrorMessages="showErrorMessages">
+        <input [attr.accept]="model.accept"
+               [attr.list]="model.listId"
+               [attr.max]="model.max"
+               [attr.min]="model.min"
+               [attr.multiple]="model.multiple"
+               [attr.step]="model.step"
+               [autocomplete]="model.autoComplete"
+               [autofocus]="model.autoFocus"
+               [class.form-control]="model.inputType !== 'file'"
+               [class.form-control-file]="model.inputType === 'file'"
+               [class.is-invalid]="showErrorMessages"
+               [dynamicId]="bindId && model.id"
+               [formControlName]="model.id"
+               [maxlength]="model.maxLength"
+               [minlength]="model.minLength"
+               [name]="model.name"
+               [ngClass]="getClass('element', 'control')"
+               [pattern]="model.pattern"
+               [placeholder]="(model.placeholder | translate)"
+               [readonly]="model.readOnly"
+               [required]="model.required"
+               [spellcheck]="model.spellCheck"
+               [tabindex]="model.tabIndex"
+               [textMask]="{mask: (model.mask || false), showMask: model.mask && !(model.placeholder)}"
+               [type]="model.inputType"
+               (blur)="onBlur($event)"
+               (change)="onValueChange($event)"
+               (focus)="onFocus($event)"/>
+      </ng-template>
+
+      <ng-template #selectTemplate let-bindId="bindId" let-model="model"
+                   let-showErrorMessages="showErrorMessages">
+        <select class="form-control"
+                [class.is-invalid]="showErrorMessages"
+                [dynamicId]="bindId && model.id"
+                [formControlName]="model.id"
+                [name]="model.name"
+                [ngClass]="getClass('element', 'control')"
+                [required]="model.required"
+                [tabindex]="model.tabIndex"
+                (blur)="onBlur($event)"
+                (change)="onValueChange($event)"
+                (focus)="onFocus($event)">
+
+          <option *ngFor="let option of model.options$ | async"
+                  [disabled]="option.disabled"
+                  [ngValue]="option.value">{{ option.label }}</option>
+
+        </select>
+      </ng-template>
+
+      <ng-template #typeaheadTemplate let-bindId="bindId" let-model="model"
+                   let-showErrorMessages="showErrorMessages">
+        <ds-dynamic-typeahead [bindId]="bindId"
+                              [group]="group"
+                              [model]="model"
+                              [showErrorMessages]="showErrorMessages"
+                              (blur)="onBlur($event)"
+                              (change)="onValueChange($event)"
+                              (focus)="onFocus($event)"></ds-dynamic-typeahead>
+      </ng-template>
+
+      <ng-template #scrollableDropdownTemplate let-bindId="bindId" let-model="model"
+                   let-showErrorMessages="showErrorMessages">
+        <ds-dynamic-scrollable-dropdown [bindId]="bindId"
+                                        [group]="group"
+                                        [model]="model"
+                                        [showErrorMessages]="showErrorMessages"
+                                        (blur)="onBlur($event)"
+                                        (change)="onValueChange($event)"
+                                        (focus)="onFocus($event)"></ds-dynamic-scrollable-dropdown>
+      </ng-template>
+
+      <ng-template #tagTemplate let-bindId="bindId" let-model="model"
+                   let-showErrorMessages="showErrorMessages">
+        <ds-dynamic-tag [bindId]="bindId"
+                        [group]="group"
+                        [model]="model"
+                        [showErrorMessages]="showErrorMessages"
+                        (blur)="onBlur($event)"
+                        (change)="onValueChange($event)"
+                        (focus)="onFocus($event)"></ds-dynamic-tag>
+      </ng-template>
+
+      <ng-template #listTemplate let-bindId="bindId" let-model="model"
+                   let-showErrorMessages="showErrorMessages">
+        <ds-dynamic-list [bindId]="bindId"
+                         [group]="group"
+                         [model]="model"
+                         [showErrorMessages]="showErrorMessages"
+                         (blur)="onBlur($event)"
+                         (change)="onValueChange($event)"
+                         (focus)="onFocus($event)"></ds-dynamic-list>
+      </ng-template>
+
+    </div>
+
+    <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2">
+      <select
+        #language="ngModel"
+        [disabled]="model.readOnly"
+        [(ngModel)]="model.language"
+        class="form-control"
+        (blur)="onBlur($event)"
+        (change)="onChangeLanguage($event)"
+        [ngModelOptions]="{standalone: true}"
+        required>
+        <!--<option [value]="null" disabled>Language</option>-->
+        <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
+      </select>
+    </div>
+  </div>
+
+    <ng-container *ngTemplateOutlet="templates[1]?.templateRef; context: model"></ng-container>
+
+  <ng-content></ng-content>
+
+</div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
new file mode 100644
index 0000000000..dc60697c1f
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -0,0 +1,176 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  QueryList,
+  SimpleChanges
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import {
+  DynamicDatePickerModel,
+  DynamicFormArrayGroupModel,
+  DynamicFormControlComponent,
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+  DynamicFormLayout,
+  DynamicFormLayoutService,
+  DynamicFormValidationService,
+  DynamicTemplateDirective,
+  DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
+  DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX,
+  DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP,
+  DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER,
+  DYNAMIC_FORM_CONTROL_TYPE_GROUP,
+  DYNAMIC_FORM_CONTROL_TYPE_INPUT,
+  DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
+  DYNAMIC_FORM_CONTROL_TYPE_SELECT,
+  DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
+  DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER,
+} from '@ng-dynamic-forms/core';
+import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './models/tag/dynamic-tag.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_RELATION } from './models/ds-dynamic-group/dynamic-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/ds-date-picker/ds-date-picker.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup.model';
+import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
+import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-group.model';
+import { isNotEmpty } from '../../../empty.util';
+
+export const enum NGBootstrapFormControlType {
+
+  Array = 1, // 'ARRAY',
+  Calendar = 2, // 'CALENDAR',
+  Checkbox = 3, // 'CHECKBOX',
+  CheckboxGroup = 4, // 'CHECKBOX_GROUP',
+  DatePicker = 5, // 'DATEPICKER',
+  Group = 6, // 'GROUP',
+  Input = 7, // 'INPUT',
+  RadioGroup = 8, // 'RADIO_GROUP',
+  Select = 9, // 'SELECT',
+  TextArea = 10, // 'TEXTAREA',
+  TimePicker = 11, // 'TIMEPICKER'
+  TypeAhead = 12, // 'TYPEAHEAD'
+  ScrollableDropdown = 13, // 'SCROLLABLE_DROPDOWN'
+  TypeTag = 14, // 'TYPETAG'
+  List = 15, // 'TYPELIST'
+  Relation = 16, // Dynamic Group
+  DsDatePicker = 17, // Ds Date Picker
+  Lookup = 18, // LOOKUP
+}
+
+@Component({
+  selector: 'ds-dynamic-form-control',
+  styleUrls: ['../../form.component.scss', './ds-dynamic-form.component.scss'],
+  templateUrl: './ds-dynamic-form-control.component.html'
+})
+export class DsDynamicFormControlComponent extends DynamicFormControlComponent implements OnChanges {
+
+    @ContentChildren(DynamicTemplateDirective) contentTemplateList: QueryList<DynamicTemplateDirective>;
+    // tslint:disable-next-line:no-input-rename
+    @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
+
+  @Input() formId: string;
+  @Input() asBootstrapFormGroup = true;
+  @Input() bindId = true;
+  @Input() context: any | null = null;
+  @Input() group: FormGroup;
+  @Input() hasErrorMessaging = false;
+  @Input() layout: DynamicFormLayout;
+  @Input() model: any;
+
+  /* tslint:disable:no-output-rename */
+  @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  /* tslint:enable:no-output-rename */
+
+  type: NGBootstrapFormControlType | null;
+
+  static getFormControlType(model: DynamicFormControlModel): NGBootstrapFormControlType | null {
+
+    switch (model.type) {
+
+      case DYNAMIC_FORM_CONTROL_TYPE_ARRAY:
+        return NGBootstrapFormControlType.Array;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX:
+        return NGBootstrapFormControlType.Checkbox;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP:
+        return (model instanceof DynamicListCheckboxGroupModel) ? NGBootstrapFormControlType.List : NGBootstrapFormControlType.CheckboxGroup;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER:
+        const datepickerModel = model as DynamicDatePickerModel;
+
+        return datepickerModel.inline ? NGBootstrapFormControlType.Calendar : NGBootstrapFormControlType.DatePicker;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_GROUP:
+        // return (model instanceof DynamicGroupModel) ? NGBootstrapFormControlType.DynamicGroup : NGBootstrapFormControlType.Group;
+        return NGBootstrapFormControlType.Group;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_INPUT:
+        return NGBootstrapFormControlType.Input;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP:
+        return (model instanceof DynamicListRadioGroupModel) ? NGBootstrapFormControlType.List : NGBootstrapFormControlType.RadioGroup;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_SELECT:
+        return NGBootstrapFormControlType.Select;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA:
+        return NGBootstrapFormControlType.TextArea;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER:
+        return NGBootstrapFormControlType.TimePicker;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD:
+        return NGBootstrapFormControlType.TypeAhead;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN:
+        return NGBootstrapFormControlType.ScrollableDropdown;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_TAG:
+        return NGBootstrapFormControlType.TypeTag;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_RELATION:
+        return NGBootstrapFormControlType.Relation;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER:
+        return NGBootstrapFormControlType.DsDatePicker;
+
+      case DYNAMIC_FORM_CONTROL_TYPE_LOOKUP:
+        return NGBootstrapFormControlType.Lookup;
+
+      default:
+        return null;
+    }
+  }
+
+  constructor(protected changeDetectorRef: ChangeDetectorRef, protected layoutService: DynamicFormLayoutService,
+              protected validationService: DynamicFormValidationService) {
+
+    super(changeDetectorRef, layoutService, validationService);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes) {
+      super.ngOnChanges(changes);
+    }
+
+    if (changes.model) {
+      this.type = DsDynamicFormControlComponent.getFormControlType(this.model);
+    }
+  }
+
+  onChangeLanguage(event) {
+    if (isNotEmpty((this.model as any).value)) {
+      this.onValueChange(event);
+    }
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
new file mode 100644
index 0000000000..ea151726f4
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
@@ -0,0 +1,12 @@
+<ds-dynamic-form-control *ngFor="let model of formModel; trackBy: trackByFn"
+                         [formId]="formId"
+                         [group]="formGroup"
+                         [hasErrorMessaging]="model.hasErrorMessages"
+                         [hidden]="model.hidden"
+                         [layout]="formLayout"
+                         [model]="model"
+                         [ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
+                         [templates]="templates"
+                         (dfBlur)="onEvent($event, 'blur')"
+                         (dfChange)="onEvent($event, 'change')"
+                         (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.scss
new file mode 100644
index 0000000000..52facc2f2c
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.ts
new file mode 100644
index 0000000000..7789d910a8
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.ts
@@ -0,0 +1,47 @@
+import {
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import {
+  DynamicFormComponent,
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+    DynamicFormLayout,
+    DynamicFormLayoutService,
+    DynamicFormService,
+    DynamicTemplateDirective,
+} from '@ng-dynamic-forms/core';
+import { DsDynamicFormControlComponent } from './ds-dynamic-form-control.component';
+import { FormBuilderService } from '../form-builder.service';
+
+@Component({
+  selector: 'ds-dynamic-form',
+  templateUrl: './ds-dynamic-form.component.html'
+})
+export class DsDynamicFormComponent extends DynamicFormComponent {
+
+  @Input() formId: string;
+  @Input() formGroup: FormGroup;
+  @Input() formModel: DynamicFormControlModel[];
+  @Input() formLayout: DynamicFormLayout = null;
+
+  /* tslint:disable:no-output-rename */
+  @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  /* tslint:enable:no-output-rename */
+
+  @ContentChildren(DynamicTemplateDirective) templates: QueryList<DynamicTemplateDirective>;
+
+  @ViewChildren(DsDynamicFormControlComponent) components: QueryList<DsDynamicFormControlComponent>;
+
+    constructor(protected formService: FormBuilderService, protected layoutService: DynamicFormLayoutService) {
+        super(formService, layoutService);
+    }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.html
new file mode 100644
index 0000000000..81733ff999
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.html
@@ -0,0 +1,47 @@
+<div class="d-flex">
+  <div class="mr-3">
+    <ds-number-picker
+      [disabled]="model.disabled"
+      [min]="minYear"
+      [max]="maxYear"
+      [name]="'year'"
+      [size]="4"
+      [(ngModel)]="initialYear"
+      [value]="year"
+      [invalid]="invalid"
+      [placeholder]='yearPlaceholder'
+      (change)="onChange($event)"
+    ></ds-number-picker>
+  </div>
+
+  <div class="mr-3">
+    <ds-number-picker
+      [min]="minMonth"
+      [max]="maxMonth"
+      [name]="'month'"
+      [size]="6"
+      [(ngModel)]="initialMonth"
+      [value]="month"
+      [placeholder]="monthPlaceholder"
+      [disabled]="!year || model.disabled"
+      (change)="onChange($event)"
+    ></ds-number-picker>
+  </div>
+
+  <div class="mr-3">
+    <ds-number-picker
+      [min]="minDay"
+      [max]="maxDay"
+      [name]="'day'"
+      [size]="2"
+      [(ngModel)]="initialDay"
+      [value]="day"
+      [placeholder]="dayPlaceholder"
+      [disabled]="!month || model.disabled"
+      (change)="onChange($event)"
+    ></ds-number-picker>
+  </div>
+
+</div>
+
+<div class="clearfix"></div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.scss
new file mode 100644
index 0000000000..9eab449eeb
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.scss
@@ -0,0 +1,3 @@
+.col-lg-1 {
+  width: auto;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts
new file mode 100644
index 0000000000..6b661c65c9
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts
@@ -0,0 +1,170 @@
+import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DynamicDsDatePickerModel } from './ds-date-picker.model';
+
+export const DS_DATE_PICKER_SEPARATOR = '-';
+
+@Component({
+  selector: 'ds-date-picker',
+  styleUrls: ['./ds-date-picker.component.scss'],
+  templateUrl: './ds-date-picker.component.html',
+})
+
+export class DsDatePickerComponent implements OnInit {
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() model: DynamicDsDatePickerModel;
+  @Input() showErrorMessages = false;
+  // @Input()
+  // minDate;
+  // @Input()
+  // maxDate;
+
+  @Output()
+  selected = new EventEmitter<number>();
+  @Output()
+  remove = new EventEmitter<number>();
+  @Output()
+  change = new EventEmitter<any>();
+
+  initialYear: number;
+  initialMonth: number;
+  initialDay: number;
+
+  year: number;
+  month: number;
+  day: number;
+
+  minYear: 0;
+  maxYear: number;
+  minMonth = 1;
+  maxMonth = 12;
+  minDay = 1;
+  maxDay = 31;
+
+  yearPlaceholder = 'year';
+  monthPlaceholder = 'month';
+  dayPlaceholder = 'day';
+
+  disabledMonth = true;
+  disabledDay = true;
+  invalid = false;
+
+  ngOnInit() {// TODO Manage fields when not setted
+    const now = new Date();
+    this.initialYear = now.getFullYear();
+    this.initialMonth = now.getMonth() + 1;
+    this.initialDay = now.getDate();
+
+    if (this.model.value && this.model.value !== null) {
+      const values = this.model.value.toString().split(DS_DATE_PICKER_SEPARATOR);
+      if (values.length > 0) {
+        this.initialYear = parseInt(values[0], 10);
+        this.year = this.initialYear;
+        this.disabledMonth = false;
+      }
+      if (values.length > 1) {
+        this.initialMonth = parseInt(values[1], 10);
+        this.month = this.initialMonth;
+        this.disabledDay = false;
+      }
+      if (values.length > 2) {
+        this.initialDay = parseInt(values[2], 10);
+        this.day = this.initialDay;
+      }
+    }
+
+    this.maxYear = this.initialYear + 100;
+
+    // Invalid state for year
+    this.group.get(this.model.id).statusChanges.subscribe((state) => {
+      if (state === 'INVALID' || this.model.malformedDate) {
+        this.invalid = true;
+      } else {
+        this.invalid = false;
+        this.model.malformedDate = false;
+      }
+    });
+  }
+
+  onChange(event) {
+    // update year-month-day
+    switch (event.field) {
+      case 'year': {
+        if (event.value !== null) {
+          this.year = event.value;
+        } else {
+          this.year = undefined;
+          this.month = undefined;
+          this.day = undefined;
+        }
+        break;
+      }
+      case 'month': {
+        if (event.value !== null) {
+          this.month = event.value;
+        } else {
+          this.month = undefined;
+          this.day = undefined;
+        }
+        break;
+      }
+      case 'day': {
+        if (event.value !== null) {
+          this.day = event.value;
+        } else {
+          this.day = undefined;
+        }
+        break;
+      }
+    }
+
+    // set max for days by month/year
+    if (!this.disabledDay) {
+      const month = this.month ? this.month - 1 : 0;
+      const date = new Date(this.year, month, 1);
+      this.maxDay = this.getLastDay(date);
+      if (this.day > this.maxDay) {
+        this.day = this.maxDay;
+      }
+    }
+
+    // Manage disable
+    if (!this.model.value && event.field === 'year') {
+      this.disabledMonth = false;
+    } else if (this.disabledDay && event.field === 'month') {
+      this.disabledDay = false;
+    }
+
+    // update value
+    let value = null;
+    if (this.year) {
+      let yyyy = this.year.toString();
+      while (yyyy.length < 4) {
+        yyyy = '0' + yyyy;
+      }
+      value = yyyy;
+    }
+    if (this.month) {
+      const mm = this.month.toString().length === 1
+        ? '0' + this.month.toString()
+        : this.month.toString();
+      value += DS_DATE_PICKER_SEPARATOR + mm;
+    }
+    if (this.day) {
+      const dd = this.day.toString().length === 1
+        ? '0' + this.day.toString()
+        : this.day.toString();
+      value += DS_DATE_PICKER_SEPARATOR + dd;
+    }
+    this.model.valueUpdates.next(value);
+    this.change.emit(event);
+  }
+
+  getLastDay(date: Date) {
+    // Last Day of the same month (+1 month, -1 day)
+    date.setMonth(date.getMonth() + 1, 0);
+    return date.getDate();
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model.ts
new file mode 100644
index 0000000000..5713d813b7
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model.ts
@@ -0,0 +1,21 @@
+import { DynamicDateControlModel, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { DynamicDateControlModelConfig } from '@ng-dynamic-forms/core/src/model/dynamic-date-control.model';
+import { Subject } from 'rxjs/Subject';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER = 'DSDATEPICKER';
+
+/**
+ * Dynamic Date Picker Model class
+ */
+export class DynamicDsDatePickerModel extends DynamicDateControlModel {
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER;
+  valueUpdates: Subject<any>;
+  malformedDate: boolean;
+  hasLanguages = false;
+
+  constructor(config: DynamicDateControlModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+    this.malformedDate = false;
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
new file mode 100644
index 0000000000..b8306bd491
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
@@ -0,0 +1,64 @@
+import { DynamicFormControlLayout, DynamicFormGroupModel, DynamicInputModelConfig, serializable } from '@ng-dynamic-forms/core';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from './ds-dynamic-input.model';
+import { Subject } from 'rxjs/Subject';
+import { DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core/src/model/form-group/dynamic-form-group.model';
+import { LanguageCode } from '../../models/form-field-language-value.model';
+
+export const COMBOBOX_GROUP_SUFFIX = '_COMBO_GROUP';
+export const COMBOBOX_METADATA_SUFFIX = '_COMBO_METADATA';
+export const COMBOBOX_VALUE_SUFFIX = '_COMBO_VALUE';
+
+export interface DsDynamicComboboxModelConfig extends DynamicFormGroupModelConfig {
+  languageCodes: LanguageCode[];
+  language: string;
+  readOnly: boolean;
+}
+
+export class DynamicComboboxModel extends DynamicFormGroupModel {
+  @serializable() private _language: string;
+  @serializable() private _languageCodes: LanguageCode[];
+  @serializable() languageUpdates: Subject<string>;
+  @serializable() hasLanguages = false;
+  @serializable() readOnly: boolean;
+
+  constructor(config: DsDynamicComboboxModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+
+    this.readOnly = config.readOnly;
+    this.language = config.language;
+    this.languageCodes = config.languageCodes;
+
+    this.languageUpdates = new Subject<string>();
+    this.languageUpdates.subscribe((lang: string) => {
+      this.language = lang;
+    });
+  }
+
+  get value() {
+    return (this.get(1) as DsDynamicInputModel).value;
+  }
+
+  get qualdropId(): string {
+    return (this.get(0) as DsDynamicInputModel).value.toString();
+  }
+
+  get language(): string {
+    return this._language;
+  }
+
+  set language(language: string) {
+    this._language = language;
+  }
+
+  get languageCodes(): LanguageCode[] {
+    return this._languageCodes;
+  }
+
+  set languageCodes(languageCodes: LanguageCode[]) {
+    this._languageCodes = languageCodes;
+    if (!this.language || this.language === null || this.language === '') {
+      this.language = this.languageCodes ? this.languageCodes[0].code : null;
+    }
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
new file mode 100644
index 0000000000..aee2e65f3a
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
@@ -0,0 +1,50 @@
+import { DynamicFormControlLayout, DynamicFormGroupModel, DynamicFormGroupModelConfig, serializable } from '@ng-dynamic-forms/core';
+import { isNotEmpty } from '../../../../empty.util';
+import { DsDynamicInputModel } from './ds-dynamic-input.model';
+import { AuthorityValueModel } from '../../../../../core/integration/models/authority-value.model';
+
+export const CONCAT_GROUP_SUFFIX = '_CONCAT_GROUP';
+export const CONCAT_FIRST_INPUT_SUFFIX = '_CONCAT_FIRST_INPUT';
+export const CONCAT_SECOND_INPUT_SUFFIX = '_CONCAT_SECOND_INPUT';
+
+export interface DynamicConcatModelConfig extends DynamicFormGroupModelConfig {
+  separator: string;
+}
+
+export class DynamicConcatModel extends DynamicFormGroupModel {
+
+  @serializable() separator: string;
+  @serializable() hasLanguages = false;
+
+  constructor(config: DynamicConcatModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.separator = config.separator + ' ';
+  }
+
+  get value() {
+    const firstValue = (this.get(0) as DsDynamicInputModel).value;
+    const secondValue = (this.get(1) as DsDynamicInputModel).value;
+    if (isNotEmpty(firstValue) && isNotEmpty(secondValue)) {
+      return firstValue + this.separator + secondValue;
+    } else {
+      return null
+    }
+  }
+
+  set value(value: string | AuthorityValueModel) {
+    let values;
+    if (typeof value === 'string') {
+      values =  value ? value.split(this.separator) : [null, null];
+    } else {
+      values =  value ? value.value.split(this.separator) : [null, null];
+    }
+
+    if (values.length > 1) {
+      (this.get(0) as DsDynamicInputModel).valueUpdates.next(values[0]);
+      (this.get(1) as DsDynamicInputModel).valueUpdates.next(values[1]);
+    }
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.html
new file mode 100644
index 0000000000..916026a85b
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.html
@@ -0,0 +1,65 @@
+<a *ngIf="!(formCollapsed | async)"
+   class="close position-relative"
+   ngbTooltip="{{'form.group-collapse-help' | translate}}"
+   placement="left">
+  <span class="fa fa-angle-up fa-fw fa-2x"
+        aria-hidden="true"
+        (click)="collapseForm()"></span>
+</a>
+<a *ngIf="(formCollapsed | async)"
+   class="close position-relative"
+   ngbTooltip="{{'form.group-expand-help' | translate}}"
+   placement="left">
+  <span class="fa fa-angle-down fa-fw fa-2x"
+        aria-hidden="true"
+        (click)="expandForm()"></span>
+</a>
+
+<div class="pt-2" [ngClass]="{'border-top': !invalid, 'border border-danger': invalid}">
+  <div *ngIf="!(formCollapsed | async)" class="pl-2 row"  @shrinkInOut>
+    <ds-form #formRef="formComponent"
+             class="col-sm-9 pl-0"
+             [formId]="formId"
+             [formModel]="formModel"
+             [displaySubmit]="false"></ds-form>
+
+
+    <div *ngIf="!(formCollapsed | async)" class="col p-0 m-0 d-flex justify-content-center align-items-center">
+
+        <button type="button"
+                class="btn btn-link"
+                [disabled]="isMandatoryFieldEmpty()"
+                (click)="save()">
+          <i class="fa fa-save text-primary fa-2x"
+             aria-hidden="true"></i>
+        </button>
+        <button type="button"
+                class="btn btn-link"
+                [disabled]="!editMode"
+                (click)="delete()">
+          <i class="fa fa-trash text-danger fa-2x"
+             aria-hidden="true"></i>
+        </button>
+        <button type="button"
+                class="btn btn-link"
+                [disabled]="isMandatoryFieldEmpty()"
+                (click)="clear()">
+          <i class="fa fa-undo fa-2x"
+             aria-hidden="true"></i>
+        </button>
+
+    </div>
+    <div class="clearfix"></div>
+  </div>
+
+  <div class="d-flex">
+    <div *ngIf="!chips.hasItems()">
+      <input type="text" readonly class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted" value="{{'form.no-value' | translate}}">
+    </div>
+    <ds-chips
+      *ngIf="chips.hasItems()"
+      [chips]="chips"
+      [editable]="true"
+      (selected)="onChipSelected($event)"></ds-chips>
+  </div>
+</div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.scss
new file mode 100644
index 0000000000..d380554157
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.scss
@@ -0,0 +1,3 @@
+.close {
+  top: -2.5rem;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts
new file mode 100644
index 0000000000..f74de35110
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts
@@ -0,0 +1,224 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { DynamicFormControlModel, DynamicFormGroupModel, DynamicInputModel } from '@ng-dynamic-forms/core';
+import { isEqual } from 'lodash';
+
+import { DynamicGroupModel, PLACEHOLDER_PARENT_METADATA } from './dynamic-group.model';
+import { FormBuilderService } from '../../../form-builder.service';
+import { SubmissionFormsModel } from '../../../../../../core/shared/config/config-submission-forms.model';
+import { FormService } from '../../../../form.service';
+import { FormComponent } from '../../../../form.component';
+import { Chips } from '../../../../../chips/models/chips.model';
+import { DynamicLookupModel } from '../lookup/dynamic-lookup.model';
+import { hasValue, isEmpty, isNotEmpty } from '../../../../../empty.util';
+import { shrinkInOut } from '../../../../../animations/shrink';
+import { ChipsItem } from '../../../../../chips/models/chips-item.model';
+import { GlobalConfig } from '../../../../../../../config/global-config.interface';
+import { GLOBAL_CONFIG } from '../../../../../../../config';
+import { FormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+  selector: 'ds-dynamic-group',
+  styleUrls: ['./dynamic-group.component.scss'],
+  templateUrl: './dynamic-group.component.html',
+  animations: [shrinkInOut]
+})
+export class DsDynamicGroupComponent implements OnDestroy, OnInit {
+
+  @Input() formId: string;
+  @Input() group: FormGroup;
+  @Input() model: DynamicGroupModel;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+  @Output() focus: EventEmitter<any> = new EventEmitter<any>();
+
+  public chips: Chips;
+  public formCollapsed = Observable.of(false);
+  public formModel: DynamicFormControlModel[];
+  public editMode = false;
+  public invalid = false;
+
+  private selectedChipItem: ChipsItem;
+  private subs: Subscription[] = [];
+
+  @ViewChild('formRef') private formRef: FormComponent;
+
+  constructor(@Inject(GLOBAL_CONFIG) protected EnvConfig: GlobalConfig,
+              private formBuilderService: FormBuilderService,
+              private formService: FormService,
+              private cdr: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    console.log(this.model.hasErrorMessages);
+    const config = {rows: this.model.formConfiguration} as SubmissionFormsModel;
+    if (isNotEmpty(this.model.value)) {
+      this.formCollapsed = Observable.of(true);
+    }
+    this.formId = this.formService.getUniqueId(this.model.id);
+    this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {});
+    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField);
+    this.subs.push(
+      this.chips.chipsItems
+        .subscribe((subItems: any[]) => {
+          const items = this.chips.getChipsItems();
+          // Does not emit change if model value is equal to the current value
+          if (!isEqual(items, this.model.value)) {
+            if (isEmpty(items)) {
+              // If items is empty, last element has been removed
+              // so emit an empty value that allows to dispatch
+              // a remove JSON PATCH operation
+              const emptyItem = Object.create({});
+              Object.keys(this.model.value[0])
+                .forEach((key) => {
+                  emptyItem[key] = null;
+                });
+              items.push(emptyItem);
+            }
+
+            this.model.valueUpdates.next(items);
+            this.change.emit();
+          }
+        }),
+      // Invalid state for year
+      this.group.get(this.model.id).statusChanges.subscribe((state) => {
+        if (state === 'INVALID') {
+          this.invalid = true;
+        } else {
+          this.invalid = false;
+        }
+      })
+    )
+  }
+
+  isMandatoryFieldEmpty() {
+    // formModel[0].group[0].value == null
+    let res = true;
+    this.formModel.forEach((row) => {
+      const modelRow = row as DynamicFormGroupModel;
+      modelRow.group.forEach((model: DynamicInputModel) => {
+        if (model.name === this.model.mandatoryField) {
+          res = model.value == null;
+          return;
+        }
+      });
+    });
+    return res;
+  }
+
+  onChipSelected(event) {
+    this.expandForm();
+    this.selectedChipItem = this.chips.getChipByIndex(event);
+    this.formModel.forEach((row) => {
+      const modelRow = row as DynamicFormGroupModel;
+      modelRow.group.forEach((model: DynamicInputModel) => {
+        const value = this.selectedChipItem.item[model.name] === PLACEHOLDER_PARENT_METADATA ? null : this.selectedChipItem.item[model.name];
+        if (model instanceof DynamicLookupModel) {
+          (model as DynamicLookupModel).valueUpdates.next(value);
+        } else if (model instanceof DynamicInputModel) {
+          model.valueUpdates.next(value);
+        } else {
+          (model as any).value = value;
+        }
+      });
+    });
+
+    this.editMode = true;
+  }
+
+  collapseForm() {
+    this.formCollapsed = Observable.of(true);
+    this.clear();
+  }
+
+  expandForm() {
+    this.formCollapsed = Observable.of(false);
+  }
+
+  clear() {
+    if (this.editMode) {
+      this.selectedChipItem.editMode = false;
+      this.selectedChipItem = null;
+      this.editMode = false;
+    }
+    this.resetForm();
+    // this.change.emit(event);
+  }
+
+  save() {
+    if (this.editMode) {
+      this.modifyChip();
+    } else {
+      this.addToChips();
+    }
+  }
+
+  delete() {
+    this.chips.remove(this.selectedChipItem);
+    this.clear();
+  }
+
+  private addToChips() {
+    if (!this.formRef.formGroup.valid) {
+      this.formService.validateAllFormFields(this.formRef.formGroup);
+      return;
+    }
+
+    // Item to add
+    if (!this.isMandatoryFieldEmpty()) {
+      const item = this.buildChipItem();
+      this.chips.add(item);
+
+      this.resetForm();
+    }
+  }
+
+  private modifyChip() {
+    if (!this.formRef.formGroup.valid) {
+      this.formService.validateAllFormFields(this.formRef.formGroup);
+      return;
+    }
+
+    if (!this.isMandatoryFieldEmpty()) {
+      const item = this.buildChipItem();
+      this.chips.update(this.selectedChipItem.id, item);
+      this.resetForm();
+      this.cdr.detectChanges();
+    }
+  }
+
+  private buildChipItem() {
+    const item = Object.create({});
+    this.formModel.forEach((row) => {
+      const modelRow = row as DynamicFormGroupModel;
+      modelRow.group.forEach((control: DynamicInputModel) => {
+        item[control.name] = control.value || PLACEHOLDER_PARENT_METADATA;
+      });
+    });
+    return item;
+  }
+
+  private resetForm() {
+    this.formService.resetForm(this.formRef.formGroup, this.formModel, this.formId);
+  }
+
+  ngOnDestroy(): void {
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model.ts
new file mode 100644
index 0000000000..4ec029661b
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model.ts
@@ -0,0 +1,41 @@
+import { DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { FormRowModel } from '../../../../../../core/shared/config/config-submission-forms.model';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_RELATION = 'RELATION';
+export const PLACEHOLDER_PARENT_METADATA = '#PLACEHOLDER_PARENT_METADATA_VALUE#';
+
+/**
+ * Dynamic Group Model configuration interface
+ */
+export interface DynamicGroupModelConfig extends DsDynamicInputModelConfig {
+  formConfiguration: FormRowModel[],
+  mandatoryField: string,
+  name: string,
+  relationFields: string[],
+  scopeUUID: string,
+  value?: any;
+}
+
+/**
+ * Dynamic Group Model class
+ */
+export class DynamicGroupModel extends DsDynamicInputModel {
+  @serializable() formConfiguration: FormRowModel[];
+  @serializable() mandatoryField: string;
+  @serializable() relationFields: string[];
+  @serializable() scopeUUID: string;
+  @serializable() value: any[];
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_RELATION;
+
+  constructor(config: DynamicGroupModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+
+    this.formConfiguration = config.formConfiguration;
+    this.mandatoryField = config.mandatoryField;
+    this.relationFields = config.relationFields;
+    this.scopeUUID = config.scopeUUID;
+    const value = config.value || [];
+    this.valueUpdates.next(value)
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
new file mode 100644
index 0000000000..d8869f2829
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
@@ -0,0 +1,86 @@
+import {
+  DynamicFormControlLayout,
+  DynamicInputModel,
+  DynamicInputModelConfig,
+  serializable
+} from '@ng-dynamic-forms/core';
+import { Subject } from 'rxjs/Subject';
+
+import { LanguageCode } from '../../models/form-field-language-value.model';
+import { AuthorityOptions } from '../../../../../core/integration/models/authority-options.model';
+import { hasValue } from '../../../../empty.util';
+import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
+
+export interface DsDynamicInputModelConfig extends DynamicInputModelConfig {
+  authorityOptions: AuthorityOptions;
+  languageCodes: LanguageCode[];
+  language?: string;
+  value?: any;
+}
+
+export class DsDynamicInputModel extends DynamicInputModel {
+
+  @serializable() authorityOptions: AuthorityOptions;
+  @serializable() private _languageCodes: LanguageCode[];
+  @serializable() private _language: string;
+  @serializable() languageUpdates: Subject<string>;
+
+  constructor(config: DsDynamicInputModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+
+    this.readOnly = config.readOnly;
+    this.value = config.value;
+    this.language = config.language;
+    if (!this.language) {
+      // TypeAhead
+      if (config.value instanceof FormFieldMetadataValueObject) {
+        this.language = config.value.language;
+      } else if (Array.isArray(config.value)) {
+        // Tag of Authority
+        if (config.value[0].language) {
+          this.language = config.value[0].language;
+        }
+      }
+    }
+    this.languageCodes = config.languageCodes;
+
+    this.languageUpdates = new Subject<string>();
+    this.languageUpdates.subscribe((lang: string) => {
+      this.language = lang;
+    });
+
+    this.authorityOptions = config.authorityOptions;
+  }
+
+  get hasAuthority(): boolean {
+    return this.authorityOptions && hasValue(this.authorityOptions.name);
+  }
+
+  get hasLanguages(): boolean {
+    if (this.languageCodes && this.languageCodes.length > 1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  get language(): string {
+    return this._language;
+  }
+
+  set language(language: string) {
+    this._language = language;
+  }
+
+  get languageCodes(): LanguageCode[] {
+    return this._languageCodes;
+  }
+
+  set languageCodes(languageCodes: LanguageCode[]) {
+    this._languageCodes = languageCodes;
+    if (!this.language || this.language === null || this.language === '') {
+      this.language = this.languageCodes ? this.languageCodes[0].code : null;
+    }
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
new file mode 100644
index 0000000000..0a056b7d32
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
@@ -0,0 +1,18 @@
+import {
+  DynamicFormArrayModel, DynamicFormArrayModelConfig, DynamicFormControlLayout,
+  serializable
+} from '@ng-dynamic-forms/core';
+
+export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig {
+  notRepeteable: boolean;
+}
+
+export class DynamicRowArrayModel extends DynamicFormArrayModel {
+  @serializable() notRepeteable = false;
+
+  constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+    this.notRepeteable = config.notRepeteable;
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts
new file mode 100644
index 0000000000..3e163f1f13
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts
@@ -0,0 +1,5 @@
+import { DynamicFormGroupModel } from '@ng-dynamic-forms/core';
+
+export class DynamicRowGroupModel extends DynamicFormGroupModel {
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts
new file mode 100644
index 0000000000..9aead0447f
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts
@@ -0,0 +1,30 @@
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
+  DynamicFormControlLayout, DynamicTextAreaModel, DynamicTextAreaModelConfig,
+  serializable
+} from '@ng-dynamic-forms/core';
+import { Subject } from 'rxjs/Subject';
+import { LanguageCode } from '../../models/form-field-language-value.model';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from './ds-dynamic-input.model';
+
+export interface DsDynamicTextAreaModelConfig extends DsDynamicInputModelConfig {
+  cols?: number;
+  rows?: number;
+  wrap?: string;
+}
+
+export class DsDynamicTextAreaModel extends DsDynamicInputModel {
+  @serializable() cols: number;
+  @serializable() rows: number;
+  @serializable() wrap: string;
+  @serializable() type = DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA;
+
+  constructor(config: DsDynamicTextAreaModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+
+    this.cols = config.cols;
+    this.rows = config.rows;
+    this.wrap = config.wrap;
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
new file mode 100644
index 0000000000..775da3bd33
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
@@ -0,0 +1,59 @@
+import { Subject } from 'rxjs/Subject';
+
+import {
+  DynamicCheckboxGroupModel, DynamicFormControlLayout,
+  DynamicFormGroupModelConfig,
+  serializable
+} from '@ng-dynamic-forms/core';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { hasValue } from '../../../../../empty.util';
+
+export interface DynamicListCheckboxGroupModelConfig extends DynamicFormGroupModelConfig {
+  authorityOptions: AuthorityOptions;
+  groupLength: number;
+  repeatable: boolean;
+  value?: any;
+}
+
+export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
+
+  @serializable() authorityOptions: AuthorityOptions;
+  @serializable() repeatable: boolean;
+  @serializable() groupLength: number;
+  @serializable() _value: AuthorityValueModel[];
+  valueUpdates: Subject<any>;
+
+  constructor(config: DynamicListCheckboxGroupModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+
+    this.authorityOptions = config.authorityOptions;
+    this.groupLength = config.groupLength || 5;
+    this._value = [];
+    this.repeatable = config.repeatable;
+
+    this.valueUpdates = new Subject<any>();
+    this.valueUpdates.subscribe((value: AuthorityValueModel | AuthorityValueModel[]) => this.value = value);
+    this.valueUpdates.next(config.value);
+  }
+
+  get hasAuthority(): boolean {
+    return this.authorityOptions && hasValue(this.authorityOptions.name);
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  set value(value: AuthorityValueModel | AuthorityValueModel[]) {
+    if (value) {
+      if (Array.isArray(value)) {
+        this._value = value;
+      } else {
+        // _value is non extendible so assign it a new array
+        const newValue = (this.value as AuthorityValueModel[]).concat([value]);
+        this._value = newValue
+      }
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
new file mode 100644
index 0000000000..a6bba88fc6
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
@@ -0,0 +1,35 @@
+import {
+  DynamicFormControlLayout,
+  DynamicRadioGroupModel,
+  DynamicRadioGroupModelConfig,
+  serializable
+} from '@ng-dynamic-forms/core';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { hasValue } from '../../../../../empty.util';
+
+export interface DynamicListModelConfig extends DynamicRadioGroupModelConfig<any> {
+  authorityOptions: AuthorityOptions;
+  groupLength: number;
+  repeatable: boolean;
+  value?: any;
+}
+
+export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
+
+  @serializable() authorityOptions: AuthorityOptions;
+  @serializable() repeatable: boolean;
+  @serializable() groupLength: number;
+
+  constructor(config: DynamicListModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+
+    this.authorityOptions = config.authorityOptions;
+    this.groupLength = config.groupLength || 5;
+    this.repeatable = config.repeatable;
+    this.valueUpdates.next(config.value);
+  }
+
+  get hasAuthority(): boolean {
+    return this.authorityOptions && hasValue(this.authorityOptions.name);
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
new file mode 100644
index 0000000000..97cfa39b2b
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -0,0 +1,66 @@
+<div [formGroup]="group">
+  <div *ngIf="model.repeatable"
+       class="form-row"
+       [attr.tabindex]="model.tabIndex"
+       [dynamicId]="bindId && model.id"
+       [formGroupName]="model.id"
+       [ngClass]="model.layout.element?.control">
+
+    <div *ngFor="let columnItems of items" class="col-sm ml-3">
+
+      <div  *ngFor="let item of columnItems" class="custom-control custom-checkbox">
+
+          <input type="checkbox" class="custom-control-input"
+                 [attr.tabindex]="item.index"
+                 [checked]="item.value"
+                 [id]="item.id"
+                 [dynamicId]="item.id"
+                 [formControlName]="item.id"
+                 [name]="model.name"
+                 [required]="model.required"
+                 [value]="item.value"
+                 (blur)="onBlurEvent($event)"
+                 (change)="onChangeEvent($event)"
+                 (focus)="onFocusEvent($event)"/>
+        <label class="custom-control-label"
+               [class.disabled]="model.disabled"
+               [ngClass]="model.layout.element?.control"
+               [for]="item.id">
+          <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
+        </label>
+      </div>
+      <br>
+    </div>
+
+  </div>
+
+  <div *ngIf="!model.repeatable"
+       class="form-row"
+       ngbRadioGroup
+       [attr.tabindex]="model.tabIndex"
+       [dynamicId]="bindId && model.id"
+       [ngClass]="model.layout.element?.control"
+       (change)="onChangeEvent($event)">
+
+    <div *ngFor="let columnItems of items" class="col-sm ml-3">
+
+      <div  *ngFor="let item of columnItems" class="custom-control custom-radio">
+        <label class="custom-control-label"
+               [class.disabled]="model.disabled"
+               [ngClass]="model.layout.element?.control">
+          <input type="radio" class="custom-control-input"
+                 [checked]="item.value"
+                 [dynamicId]="item.id"
+                 [name]="model.id"
+                 [required]="model.required"
+                 [value]="item.index"
+                 (blur)="onBlurEvent($event)"
+                 (focus)="onFocusEvent($event)"/>
+          <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
+        </label>
+      </div>
+      <br>
+    </div>
+
+  </div>
+</div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.scss
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
new file mode 100644
index 0000000000..a3baa3de88
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -0,0 +1,137 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { findKey } from 'lodash';
+
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
+import { hasValue, isNotEmpty } from '../../../../../empty.util';
+import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
+import { ConfigData } from '../../../../../../core/config/config-data';
+import { ConfigAuthorityModel } from '../../../../../../core/shared/config/config-authority.model';
+import { FormBuilderService } from '../../../form-builder.service';
+import { DynamicCheckboxModel } from '@ng-dynamic-forms/core';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
+
+export interface ListItem {
+  id: string,
+  label: string,
+  value: boolean,
+  index: number
+}
+
+@Component({
+  selector: 'ds-dynamic-list',
+  styleUrls: ['./dynamic-list.component.scss'],
+  templateUrl: './dynamic-list.component.html'
+})
+
+// TODO Fare questo componente da zero
+export class DsDynamicListComponent implements OnInit {
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() model: DynamicListCheckboxGroupModel | DynamicListRadioGroupModel;
+  @Input() showErrorMessages = false;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+  @Output() focus: EventEmitter<any> = new EventEmitter<any>();
+
+  public items: ListItem[][] = [];
+  protected authorityList: AuthorityValueModel[];
+  protected searchOptions: IntegrationSearchOptions;
+
+  constructor(private authorityService: AuthorityService,
+              private cdr: ChangeDetectorRef,
+              private formBuilderService: FormBuilderService) {
+  }
+
+  ngOnInit() {
+    if (this.hasAuthorityOptions()) {
+      // TODO Replace max elements 1000 with a paginated request when pagination bug is resolved
+      this.searchOptions = new IntegrationSearchOptions(
+        this.model.authorityOptions.scope,
+        this.model.authorityOptions.name,
+        this.model.authorityOptions.metadata,
+        '',
+        1000, // Max elements
+        1);// Current Page
+      this.setOptionsFromAuthority();
+    }
+  }
+
+  onBlurEvent(event: Event) {
+    this.blur.emit(event);
+  }
+
+  onFocusEvent(event: Event) {
+    this.focus.emit(event);
+  }
+
+  onChangeEvent(event: Event) {
+    const target = event.target as any;
+    if (this.model.repeatable) {
+      // Target tabindex coincide with the array index of the value into the authority list
+      const authorityValue: AuthorityValueModel = this.authorityList[target.tabIndex];
+      if (target.checked) {
+        this.model.valueUpdates.next(authorityValue);
+      } else {
+        const newValue = [];
+        this.model.value
+          .filter((item) => item.value !== authorityValue.value)
+          .forEach((item) => newValue.push(item));
+        this.model.valueUpdates.next(newValue);
+      }
+    } else {
+      (this.model as DynamicListRadioGroupModel).valueUpdates.next(this.authorityList[target.value]);
+    }
+    this.change.emit(event);
+  }
+
+  protected setOptionsFromAuthority() {
+    if (this.model.authorityOptions.name && this.model.authorityOptions.name.length > 0) {
+      const listGroup = this.group.controls[this.model.id] as FormGroup;
+      this.authorityService.getEntriesByName(this.searchOptions).subscribe((authorities: ConfigData) => {
+        let groupCounter = 0;
+        let itemsPerGroup = 0;
+        let tempList: ListItem[] = [];
+        this.authorityList = authorities.payload as ConfigAuthorityModel[];
+        // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
+        (authorities.payload as ConfigAuthorityModel[]).forEach((option, key) => {
+          const value = option.id || option.value;
+          const checked: boolean = isNotEmpty(findKey(
+            this.model.value,
+            {value: option.value}));
+
+          const item: ListItem = {
+            id: value,
+            label: option.display,
+            value: checked,
+            index: key
+          };
+          if (this.model.repeatable) {
+            this.formBuilderService.addFormGroupControl(listGroup, (this.model as DynamicListCheckboxGroupModel), new DynamicCheckboxModel(item));
+          } else {
+            (this.model as DynamicListRadioGroupModel).options.push({label: item.label, value: option});
+          }
+          tempList.push(item);
+          itemsPerGroup++;
+          this.items[groupCounter] = tempList;
+          if (itemsPerGroup === this.model.groupLength) {
+            groupCounter++;
+            itemsPerGroup = 0;
+            tempList = [];
+          }
+        });
+        this.cdr.detectChanges();
+      });
+
+    }
+  }
+
+  protected hasAuthorityOptions() {
+    return (hasValue(this.model.authorityOptions.scope)
+      && hasValue(this.model.authorityOptions.name)
+      && hasValue(this.model.authorityOptions.metadata));
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
new file mode 100644
index 0000000000..972538efad
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -0,0 +1,130 @@
+<div #sdRef="ngbDropdown"
+     ngbDropdown
+     (click)="$event.stopPropagation();"
+     (openChange)="openChange($event)">
+
+  <!--Simple lookup, only 1 field -->
+  <div class="form-row" *ngIf="!isLookupName">
+    <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
+      <div class="row">
+        <div class="col">
+          <input class="form-control"
+                 [attr.autoComplete]="model.autoComplete"
+                 [class.is-invalid]="showErrorMessages"
+                 [dynamicId]="bindId && model.id"
+                 [name]="model.name"
+                 [type]="model.inputType"
+                 [(ngModel)]="firstInputValue"
+                 [disabled]="isInputDisabled()"
+                 [placeholder]="model.placeholder"
+                 [readonly]="model.readOnly"
+                 (change)="$event.preventDefault()"
+                 (blur)="onBlurEvent($event); sdRef.close();"
+                 (focus)="onFocusEvent($event); sdRef.close();"
+                 (click)="$event.stopPropagation(); sdRef.close();"
+                 (input)="onInput($event)">
+        </div>
+
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-2 col-lg-1 text-center">
+      <button
+        *ngIf="!isInputDisabled()" class="btn btn-secondary"
+        type="button"
+        [disabled]="model.readOnly || isSearchDisabled()"
+        (click)="search($event); sdRef.open();">{{'form.search' | translate}}
+      </button>
+      <button
+        *ngIf="isInputDisabled()" class="btn btn-secondary"
+        type="button"
+        [disabled]="model.readOnly"
+        (click)="remove($event)">{{'form.remove' | translate}}
+      </button>
+    </div>
+  </div>
+
+  <!--Lookup-name, 2 fields-->
+  <div class="form-row" *ngIf="isLookupName">
+    <div class="col-xs-12 col-md-8 col-lg-9">
+      <div class="row">
+        <div class="col-xs-12 col-md-6">
+          <input class="form-control"
+                 [attr.autoComplete]="model.autoComplete"
+                 [class.is-invalid]="showErrorMessages"
+                 [dynamicId]="bindId && model.id"
+                 [name]="model.name"
+                 [type]="model.inputType"
+                 [(ngModel)]="firstInputValue"
+                 [disabled]="isInputDisabled()"
+                 [placeholder]="model.placeholder | translate"
+                 [readonly]="model.readOnly"
+                 (change)="$event.preventDefault()"
+                 (blur)="onBlurEvent($event); sdRef.close();"
+                 (focus)="onFocusEvent($event); sdRef.close();"
+                 (click)="$event.stopPropagation(); sdRef.close();"
+                 (input)="onInput($event)">
+        </div>
+
+        <div *ngIf="isLookupName" class="col-xs-12 col-md-6 pl-md-0" >
+          <input  class="form-control"
+                  [ngClass]="{}"
+                  [attr.autoComplete]="model.autoComplete"
+                  [class.is-invalid]="showErrorMessages"
+                  [dynamicId]="bindId && model.id"
+                  [name]="name2"
+                  [type]="model.inputType"
+                  [(ngModel)]="secondInputValue"
+                  [disabled]="firstInputValue.length === 0 || isInputDisabled()"
+                  [placeholder]="model.placeholder2 | translate"
+                  [readonly]="model.readOnly"
+                  (change)="$event.preventDefault()"
+                  (blur)="onBlurEvent($event); sdRef.close();"
+                  (focus)="onFocusEvent($event); sdRef.close();"
+                  (click)="$event.stopPropagation(); sdRef.close();"
+                  (input)="onInput($event)">
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-md-3 col-lg-2 text-center">
+      <button
+        *ngIf="!isInputDisabled()" class="btn btn-secondary"
+        type="button"
+        [disabled]="isSearchDisabled()"
+        (click)="search($event); sdRef.open();">{{'form.search' | translate}}
+      </button>
+      <button
+        *ngIf="isInputDisabled()" class="btn btn-secondary"
+        type="button"
+        (click)="remove($event)">{{'form.remove' | translate}}
+      </button>
+    </div>
+  </div>
+
+  <div ngbDropdownMenu
+       class="mt-0 dropdown-menu scrollable-dropdown-menu w-100"
+       aria-haspopup="true"
+       aria-expanded="false"
+       aria-labelledby="scrollableDropdownMenuButton">
+    <div class="scrollable-menu"
+         aria-labelledby="scrollableDropdownMenuButton"
+         infiniteScroll
+         [infiniteScrollDistance]="2"
+         [infiniteScrollThrottle]="50"
+         (scrolled)="onScroll()"
+         [scrollWindow]="false">
+
+      <button class="dropdown-item disabled"
+              *ngIf="optionsList && optionsList.length == 0"
+              (click)="clearFields(); sdRef.close();">{{'form.no-results' | translate}}
+      </button>
+      <button class="dropdown-item collection-item"
+              *ngFor="let listEntry of optionsList"
+              (click)="onSelect(listEntry); sdRef.close();"
+              title="{{ listEntry.display }}">
+        {{listEntry.value}}
+      </button>
+      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
new file mode 100644
index 0000000000..a333fc881f
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -0,0 +1,68 @@
+@import "../../../../../../../styles/variables";
+
+/* enable absolute positioning */
+.spinner-addon {
+  position: relative;
+}
+
+/* style fa-spin */
+.spinner-addon .fa-spin {
+  color: map-get($theme-colors, primary);
+  position: absolute;
+  margin-top: 3px;
+  padding: 0;
+  pointer-events: none;
+}
+
+/* align fa-spin */
+.left-addon .fa-spin {
+  left: 0px;
+}
+
+.right-addon .fa-spin {
+  right: 0px;
+}
+
+/* add padding  */
+.left-addon input {
+  padding-left: 30px;
+}
+
+.right-addon input {
+  padding-right: 30px;
+}
+
+:host /deep/ .dropdown-menu {
+  width: 100% !important;
+  max-height: 200px;
+  overflow-y: auto !important;
+  overflow-x: hidden;
+}
+
+:host /deep/ .dropdown-item.active,
+:host /deep/ .dropdown-item:active,
+:host /deep/ .dropdown-item:focus,
+:host /deep/ .dropdown-item:hover {
+  color: $dropdown-link-hover-color !important;
+  background-color: $dropdown-link-hover-bg !important;
+}
+
+.dropdown-menu {
+  margin-top: -10px;
+}
+
+div {
+  overflow: visible;
+  //padding-right: 0 !important;
+}
+
+button {
+  margin-right: 10px;
+}
+
+//@media (min-width: $screen-sm-min) {
+//  .firstName {
+//    padding-left: 0 !important;
+//    margin-left: -5px !important;
+//  }
+//}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
new file mode 100644
index 0000000000..1ecf384748
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
@@ -0,0 +1,220 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { DynamicLookupModel } from './dynamic-lookup.model';
+import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
+import { hasValue, isEmpty, isNotEmpty, isNull, isUndefined } from '../../../../../empty.util';
+import { IntegrationData } from '../../../../../../core/integration/integration-data';
+import { PageInfo } from '../../../../../../core/shared/page-info.model';
+import { Subscription } from 'rxjs/Subscription';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+
+@Component({
+  selector: 'ds-dynamic-lookup',
+  styleUrls: ['./dynamic-lookup.component.scss'],
+  templateUrl: './dynamic-lookup.component.html'
+})
+export class DsDynamicLookupComponent implements OnDestroy, OnInit {
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() model: DynamicLookupModel;
+  @Input() showErrorMessages = false;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+  @Output() focus: EventEmitter<any> = new EventEmitter<any>();
+
+  public firstInputValue = '';
+  public secondInputValue = '';
+  public loading = false;
+  public pageInfo: PageInfo;
+  public optionsList: any;
+  public isLookupName: boolean;
+  public name2: string;
+
+  protected searchOptions: IntegrationSearchOptions;
+  protected sub: Subscription;
+
+  constructor(private authorityService: AuthorityService,
+              private cdr: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.searchOptions = new IntegrationSearchOptions(
+      this.model.authorityOptions.scope,
+      this.model.authorityOptions.name,
+      this.model.authorityOptions.metadata,
+      '',
+      this.model.maxOptions,
+      1);
+
+    // Switch Lookup/LookupName
+    if (this.model.separator) {
+      this.isLookupName = true;
+      this.name2 = this.model.name + '2';
+    }
+
+    this.setInputsValue(this.model.value);
+
+    this.model.valueUpdates
+      .subscribe((value) => {
+        if (isEmpty(value)) {
+          this.resetFields();
+        } else {
+          this.setInputsValue(this.model.value);
+        }
+      });
+  }
+
+  public formatItemForInput(item: any, field: number): string {
+    if (isUndefined(item) || isNull(item)) {
+      return '';
+    }
+    return (typeof item === 'string') ? item : this.inputFormatter(item, field);
+  }
+
+  // inputFormatter = (x: { display: string }) => x.display;
+  inputFormatter = (x: { display: string }, y: number) => {
+    // this.splitValues();
+    return y === 1 ? this.firstInputValue : this.secondInputValue;
+  };
+
+  onInput(event) {
+    if (!this.model.authorityOptions.closed) {
+      if (isNotEmpty(this.getCurrentValue())) {
+        const currentValue = new FormFieldMetadataValueObject(this.getCurrentValue());
+        this.onSelect(currentValue);
+      } else {
+        this.remove();
+      }
+    }
+  }
+
+  onScroll() {
+    if (!this.loading && this.pageInfo.currentPage <= this.pageInfo.totalPages) {
+      this.searchOptions.currentPage++;
+      this.search();
+    }
+  }
+
+  protected setInputsValue(value) {
+    if (hasValue(value)) {
+      let displayValue = value;
+      if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
+        displayValue = value.display;
+      }
+
+      if (hasValue(displayValue)) {
+        if (this.isLookupName) {
+          const values = displayValue.split(this.model.separator);
+
+          this.firstInputValue = (values[0] || '').trim();
+          this.secondInputValue = (values[1] || '').trim();
+        } else {
+          this.firstInputValue = displayValue || '';
+        }
+      }
+    }
+  }
+
+  protected getCurrentValue(): string {
+    let result = '';
+    if (!this.isLookupName) {
+      result = this.firstInputValue;
+    } else {
+      if (isNotEmpty(this.firstInputValue)) {
+        result = this.firstInputValue;
+      }
+      if (isNotEmpty(this.secondInputValue)) {
+        result = isEmpty(result)
+          ? this.secondInputValue
+          : this.firstInputValue + this.model.separator + ' ' + this.secondInputValue;
+      }
+    }
+    return result;
+  }
+
+  search() {
+    this.optionsList = null;
+    this.pageInfo = null;
+
+    // Query
+    this.searchOptions.query = this.getCurrentValue();
+
+    this.loading = true;
+    this.authorityService.getEntriesByName(this.searchOptions)
+      .distinctUntilChanged()
+      .subscribe((object: IntegrationData) => {
+        this.optionsList = object.payload;
+        this.pageInfo = object.pageInfo;
+        this.loading = false;
+        this.cdr.detectChanges();
+      });
+  }
+
+  clearFields() {
+    // Clear inputs whether there is no results and authority is closed
+    if (this.model.authorityOptions.closed) {
+      this.resetFields();
+    }
+  }
+
+  protected resetFields() {
+    this.firstInputValue = '';
+    if (this.isLookupName) {
+      this.secondInputValue = '';
+    }
+  }
+
+  onSelect(event) {
+    this.group.markAsDirty();
+    this.model.valueUpdates.next(event);
+    this.setInputsValue(event);
+    this.change.emit(event);
+    this.optionsList = null;
+    this.pageInfo = null;
+  }
+
+  isInputDisabled() {
+    return this.model.authorityOptions.closed && hasValue(this.model.value);
+  }
+
+  isSearchDisabled() {
+    // if (this.firstInputValue === ''
+    //   && (this.isLookupName ? this.secondInputValue === '' : true)) {
+    //   return true;
+    // }
+    // return false;
+    return isEmpty(this.firstInputValue);
+  }
+
+  remove() {
+    this.group.markAsPristine();
+    this.model.valueUpdates.next(null);
+    this.change.emit(null);
+  }
+
+  openChange(isOpened: boolean) {
+    if (!isOpened) {
+      if (this.model.authorityOptions.closed) {
+        this.setInputsValue('');
+      }
+    }
+  }
+
+  onBlurEvent(event: Event) {
+    this.blur.emit(event);
+  }
+
+  onFocusEvent(event) {
+    this.focus.emit(event);
+  }
+
+  ngOnDestroy() {
+    if (hasValue(this.sub)) {
+      this.sub.unsubscribe();
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
new file mode 100644
index 0000000000..21b11d0bf8
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
@@ -0,0 +1,37 @@
+import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_LOOKUP = 'LOOKUP';
+
+export interface DynamicLookupModelConfig extends DsDynamicInputModelConfig {
+  maxOptions: number;
+  value: any;
+  separator: string;
+}
+
+export class DynamicLookupModel extends DsDynamicInputModel {
+
+  @serializable() maxOptions: number;
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP;
+  @serializable() value: any;
+  @serializable() separator: string; // Defined only for lookup-name
+
+  @serializable() placeholder: string;
+  @serializable() placeholder2: string;
+
+  constructor(config: DynamicLookupModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.autoComplete = AUTOCOMPLETE_OFF;
+    this.maxOptions = config.maxOptions;
+    this.separator = config.separator; // Defined only for lookup-name
+
+    this.valueUpdates.next(config.value);
+    // this.valueUpdates.subscribe(() => {
+    //   this.setInputsValue();
+    // });
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
new file mode 100644
index 0000000000..1ea1b62cd0
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -0,0 +1,43 @@
+<div #sdRef="ngbDropdown" ngbDropdown class="input-group w-100">
+  <input class="form-control"
+         [attr.autoComplete]="model.autoComplete"
+         [class.is-invalid]="showErrorMessages"
+         [dynamicId]="bindId && model.id"
+         [name]="model.name"
+         [readonly]="model.readOnly"
+         [type]="model.inputType"
+         [value]="formatItemForInput(model.value)"
+         (blur)="onBlurEvent($event)"
+         (click)="$event.stopPropagation(); openDropdown(sdRef);"
+         (focus)="onFocusEvent($event)"
+         (keypress)="$event.preventDefault()">
+    <button aria-describedby="collectionControlsMenuLabel"
+            class="ds-form-input-btn  btn btn-outline-primary"
+            id="scrollableDropdownMenuButton_{{model.id}}"
+            ngbDropdownToggle
+            [disabled]="model.readOnly"></button>
+
+  <div ngbDropdownMenu
+       class="dropdown-menu scrollable-dropdown-menu w-100"
+       aria-haspopup="true"
+       aria-expanded="false"
+       aria-labelledby="scrollableDropdownMenuButton">
+    <div class="scrollable-menu"
+         aria-labelledby="scrollableDropdownMenuButton"
+         infiniteScroll
+         [infiniteScrollDistance]="2"
+         [infiniteScrollThrottle]="50"
+         (scrolled)="onScroll()"
+         [scrollWindow]="false">
+
+      <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">No results found</button>
+      <button class="dropdown-item collection-item" *ngFor="let listEntry of optionsList" (click)="onSelect(listEntry)" title="{{ listEntry.display }}">
+        {{inputFormatter(listEntry)}}
+      </button>
+      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>Loading...</p></div>
+    </div>
+
+  </div>
+</div>
+
+
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
new file mode 100644
index 0000000000..5b278312d3
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
@@ -0,0 +1,26 @@
+@import '../../../../form.component';
+
+.scrollable-menu {
+  height: auto;
+  max-height: 200px;
+  overflow-x: hidden;
+}
+
+.collection-item {
+  border-bottom: $dropdown-border-width solid $dropdown-border-color;
+}
+
+.scrollable-dropdown-loading {
+  background-color: map-get($theme-colors, primary);
+  color: white;
+  height: 2rem !important;
+  line-height: 2rem;
+  position: sticky;
+  bottom: 0;
+}
+
+.scrollable-dropdown-menu {
+  left: 0 !important;
+  margin-bottom: 1rem;
+  z-index: 1000;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
new file mode 100644
index 0000000000..91aad741b6
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -0,0 +1,94 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model';
+import { PageInfo } from '../../../../../../core/shared/page-info.model';
+import { isNull, isUndefined } from '../../../../../empty.util';
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
+import { IntegrationData } from '../../../../../../core/integration/integration-data';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ds-dynamic-scrollable-dropdown',
+  styleUrls: ['./dynamic-scrollable-dropdown.component.scss'],
+  templateUrl: './dynamic-scrollable-dropdown.component.html'
+})
+export class DsDynamicScrollableDropdownComponent implements OnInit {
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() model: DynamicScrollableDropdownModel;
+  @Input() showErrorMessages = false;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+  @Output() focus: EventEmitter<any> = new EventEmitter<any>();
+
+  public loading = false;
+  public pageInfo: PageInfo;
+  public optionsList: any;
+
+  protected searchOptions: IntegrationSearchOptions;
+
+  constructor(private authorityService: AuthorityService, private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.searchOptions = new IntegrationSearchOptions(
+      this.model.authorityOptions.scope,
+      this.model.authorityOptions.name,
+      this.model.authorityOptions.metadata,
+      '',
+      this.model.maxOptions,
+      1);
+    this.authorityService.getEntriesByName(this.searchOptions)
+      .subscribe((object: IntegrationData) => {
+        this.optionsList = object.payload;
+        this.pageInfo = object.pageInfo;
+        this.cdr.detectChanges();
+      })
+  }
+
+  public formatItemForInput(item: any): string {
+    if (isUndefined(item) || isNull(item)) { return '' }
+    return (typeof item === 'string') ? item : this.inputFormatter(item);
+  }
+
+  inputFormatter = (x: AuthorityValueModel) => x.display || x.value;
+
+  openDropdown(sdRef: NgbDropdown) {
+    if (!this.model.readOnly) {
+      sdRef.open();
+    }
+  }
+
+  onScroll() {
+    if (!this.loading && this.pageInfo.currentPage <= this.pageInfo.totalPages) {
+      this.loading = true;
+      this.searchOptions.currentPage++;
+      this.authorityService.getEntriesByName(this.searchOptions)
+        .do(() => this.loading = false)
+        .subscribe((object: IntegrationData) => {
+          this.optionsList = this.optionsList.concat(object.payload);
+          this.pageInfo = object.pageInfo;
+          this.cdr.detectChanges();
+        })
+    }
+  }
+
+  onBlurEvent(event: Event) {
+    this.blur.emit(event);
+  }
+
+  onFocusEvent(event) {
+    this.focus.emit(event);
+  }
+
+  onSelect(event) {
+    this.group.markAsDirty();
+    // (this.model as DynamicScrollableDropdownModel).parent as
+    // this.group.get(this.model.id).setValue(event);
+    this.model.valueUpdates.next(event)
+    this.change.emit(event);
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
new file mode 100644
index 0000000000..69cdb475e2
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
@@ -0,0 +1,27 @@
+import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN = 'SCROLLABLE_DROPDOWN';
+
+export interface DynamicScrollableDropdownModelConfig extends DsDynamicInputModelConfig {
+  authorityOptions: AuthorityOptions;
+  maxOptions: number;
+  value: any;
+}
+
+export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
+
+  @serializable() maxOptions: number;
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN;
+
+  constructor(config: DynamicScrollableDropdownModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.autoComplete = AUTOCOMPLETE_OFF;
+    this.authorityOptions = config.authorityOptions;
+    this.maxOptions = config.maxOptions;
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
new file mode 100644
index 0000000000..5c7a2b9713
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -0,0 +1,46 @@
+<ng-template #rt let-r="result" let-t="term">
+  {{ r.display }}
+</ng-template>
+
+
+  <ds-chips [chips]="chips" [wrapperClass]="'border-bottom border-light'">
+
+  <input *ngIf="!searchOptions"
+         class="border-0 form-control-plaintext tag-input mt-1 mb-1 chips-sort-ignore"
+         type="text"
+         [class.pl-3]="chips.hasItems()"
+         [placeholder]="model.label"
+         [readonly]="model.readOnly"
+         [(ngModel)]="currentValue"
+         (blur)="onBlurEvent($event)"
+         (keypress)="preventEventsPropagation($event)"
+         (keydown)="preventEventsPropagation($event)"
+         (keyup)="onKeyUp($event)" />
+
+
+  <input *ngIf="searchOptions"
+         class="border-0 form-control-plaintext tag-input mt-1 mb-1 chips-sort-ignore"
+         type="text"
+         [(ngModel)]="currentValue"
+         [attr.autoComplete]="model.autoComplete"
+         [class.is-invalid]="showErrorMessages"
+         [class.pl-3]="chips.hasItems()"
+         [dynamicId]="bindId && model.id"
+         [inputFormatter]="formatter"
+         [name]="model.name"
+         [ngbTypeahead]="search"
+         [placeholder]="model.label"
+         [readonly]="model.readOnly"
+         [resultTemplate]="rt"
+         [type]="model.inputType"
+         (blur)="onBlurEvent($event)"
+         (focus)="onFocusEvent($event)"
+         (change)="$event.stopPropagation()"
+         (input)="onInput($event)"
+         (selectItem)="onSelectItem($event)"
+         (keypress)="preventEventsPropagation($event)"
+         (keydown)="preventEventsPropagation($event)"
+         (keyup)="onKeyUp($event)"/>
+    <i *ngIf="searching" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
+  </ds-chips>
+
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
new file mode 100644
index 0000000000..15cc0dc5da
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
@@ -0,0 +1,34 @@
+@import "../../../../../../../styles/variables";
+
+/* style fa-spin */
+.fa-spin {
+  pointer-events: none;
+  right: 0;
+}
+.chips-left {
+  left: 0;
+  padding-right: 100%;
+}
+
+:host /deep/ .dropdown-menu {
+  width: 100% !important;
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  left: 0 !important;
+  margin-top: 15px !important;
+}
+
+:host /deep/ .dropdown-item.active,
+:host /deep/ .dropdown-item:active,
+:host /deep/ .dropdown-item:focus,
+:host /deep/ .dropdown-item:hover {
+  color: $dropdown-link-hover-color !important;
+  background-color: $dropdown-link-hover-bg !important;
+}
+
+.tag-input {
+  flex-grow: 1;
+  outline: none;
+  width: auto !important;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
new file mode 100644
index 0000000000..e2b951d4e9
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
@@ -0,0 +1,194 @@
+import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { Observable } from 'rxjs/Observable';
+import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
+
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { DynamicTagModel } from './dynamic-tag.model';
+import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
+import { Chips } from '../../../../../chips/models/chips.model';
+import { hasValue, isEmpty, isNotEmpty } from '../../../../../empty.util';
+import { isEqual } from 'lodash';
+import { GlobalConfig } from '../../../../../../../config/global-config.interface';
+import { GLOBAL_CONFIG } from '../../../../../../../config';
+
+@Component({
+  selector: 'ds-dynamic-tag',
+  styleUrls: ['./dynamic-tag.component.scss'],
+  templateUrl: './dynamic-tag.component.html'
+})
+export class DsDynamicTagComponent implements OnInit {
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() model: DynamicTagModel;
+  @Input() showErrorMessages = false;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+  @Output() focus: EventEmitter<any> = new EventEmitter<any>();
+
+  chips: Chips;
+  hasAuthority: boolean;
+
+  searching = false;
+  searchOptions: IntegrationSearchOptions;
+  searchFailed = false;
+  hideSearchingWhenUnsubscribed = new Observable(() => () => this.changeSearchingStatus(false));
+  currentValue: any;
+
+  formatter = (x: { display: string }) => x.display;
+
+  search = (text$: Observable<string>) =>
+    text$
+      .debounceTime(300)
+      .distinctUntilChanged()
+      .do(() => this.changeSearchingStatus(true))
+      .switchMap((term) => {
+        if (term === '' || term.length < this.model.minChars) {
+          return Observable.of({list: []});
+        } else {
+          this.searchOptions.query = term;
+          return this.authorityService.getEntriesByName(this.searchOptions)
+            .map((authorities) => {
+              // @TODO Pagination for authority is not working, to refactor when it will be fixed
+              return {
+                list: authorities.payload,
+                pageInfo: authorities.pageInfo
+              };
+            })
+            .do(() => this.searchFailed = false)
+            .catch(() => {
+              this.searchFailed = true;
+              return Observable.of({list: []});
+            });
+        }
+      })
+      .map((results) => results.list)
+      .do(() => this.changeSearchingStatus(false))
+      .merge(this.hideSearchingWhenUnsubscribed);
+
+  constructor(@Inject(GLOBAL_CONFIG) protected EnvConfig: GlobalConfig,
+              private authorityService: AuthorityService,
+              private cdr: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.hasAuthority = this.model.authorityOptions && hasValue(this.model.authorityOptions.name);
+    if (this.hasAuthority) {
+      this.searchOptions = new IntegrationSearchOptions(
+        this.model.authorityOptions.scope,
+        this.model.authorityOptions.name,
+        this.model.authorityOptions.metadata);
+    }
+
+    this.chips = new Chips(this.model.value, 'display');
+
+    this.chips.chipsItems
+      .subscribe((subItems: any[]) => {
+        const items = this.chips.getChipsItems();
+        // Does not emit change if model value is equal to the current value
+        if (!isEqual(items, this.model.value)) {
+          this.model.valueUpdates.next(items);
+          this.change.emit(event);
+        }
+      })
+  }
+
+  changeSearchingStatus(status: boolean) {
+    this.searching = status;
+    this.cdr.detectChanges();
+  }
+
+  onInput(event) {
+    if (event.data) {
+      this.group.markAsDirty();
+    }
+    this.cdr.detectChanges();
+  }
+
+  onBlurEvent(event: Event) {
+    if (isNotEmpty(this.currentValue)) {
+        this.addTagsToChips();
+    }
+    this.blur.emit(event);
+  }
+
+  onFocusEvent($event) {
+    this.focus.emit(event);
+  }
+
+  onSelectItem(event: NgbTypeaheadSelectItemEvent) {
+    this.chips.add(event.item);
+    // this.group.controls[this.model.id].setValue(this.model.value);
+    this.updateModel(event);
+
+    setTimeout(() => {
+      // Reset the input text after x ms, mandatory or the formatter overwrite it
+      this.currentValue = null;
+      this.cdr.detectChanges();
+    }, 50);
+  }
+
+  updateModel(event) {
+    this.model.valueUpdates.next(this.chips.getChipsItems());
+    this.change.emit(event);
+  }
+
+  onKeyUp(event) {
+    if (event.keyCode === 13 || event.keyCode === 188) {
+      event.preventDefault();
+      // Key: Enter or , or ;
+      this.addTagsToChips();
+      event.stopPropagation();
+    }
+  }
+
+  preventEventsPropagation(event) {
+    event.stopPropagation();
+    if (event.keyCode === 13) {
+      // Key: Enter or , or ;
+      event.preventDefault();
+    }
+  }
+
+  private addTagsToChips() {
+    if (!this.hasAuthority || !this.model.authorityOptions.closed) {
+      let res: string[] = [];
+      res = this.currentValue.split(',');
+
+      const res1 = [];
+      res.forEach((item) => {
+        item.split(';').forEach((i) => {
+          res1.push(i);
+        });
+      });
+
+      res1.forEach((c) => {
+        c = c.trim();
+        if (c.length > 0) {
+          this.chips.add(c);
+        }
+      });
+
+      // this.currentValue = '';
+      setTimeout(() => {
+        // Reset the input text after x ms, mandatory or the formatter overwrite it
+        this.currentValue = null;
+        this.cdr.detectChanges();
+      }, 50);
+      this.updateModel(event);
+    }
+  }
+
+  removeChips(event) {
+    // console.log("Removed chips index: "+event);
+    this.model.valueUpdates.next(this.chips.getChipsItems());
+    this.change.emit(event);
+  }
+
+  changeChips(event) {
+    this.model.valueUpdates.next(this.chips.getChipsItems());
+    this.change.emit(event);
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts
new file mode 100644
index 0000000000..08f26a99de
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts
@@ -0,0 +1,143 @@
+// import { AUTOCOMPLETE_OFF, DYNAMIC_FORM_CONTROL_INPUT_TYPE_TEXT } from '@ng-dynamic-forms/core';
+// import { Observable } from 'rxjs/Observable';
+//
+// import {
+//   DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD, DynamicTypeaheadModel,
+//   DynamicTypeaheadResponseModel
+// } from './dynamic-tag.model';
+// import { PageInfo } from '../../../../../../core/shared/page-info.model';
+//
+// describe('DynamicTypeaheadModel test suite', () => {
+//
+//   let model: any;
+//   const search = (text: string): Observable<DynamicTypeaheadResponseModel> =>
+//     Observable.of({
+//       list: ['One', 'Two', 'Three'],
+//       pageInfo: new PageInfo()
+//     });
+//   const config = {
+//     id: 'input',
+//     minChars: 3,
+//     search: search
+//   };
+//
+//   beforeEach(() => model = new DynamicTypeaheadModel(config));
+//
+//   it('tests if correct default type property is set', () => {
+//
+//     expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD);
+//   });
+//
+//   it('tests if correct default input type property is set', () => {
+//
+//     expect(model.inputType).toEqual(DYNAMIC_FORM_CONTROL_INPUT_TYPE_TEXT);
+//   });
+//
+//   it('tests if correct default autoComplete property is set', () => {
+//
+//     expect(model.autoComplete).toEqual(AUTOCOMPLETE_OFF);
+//   });
+//
+//   it('tests if correct default autoFocus property is set', () => {
+//
+//     expect(model.autoFocus).toBe(false);
+//   });
+//
+//   it('tests if correct default cls properties aree set', () => {
+//
+//     expect(model.cls).toBeDefined();
+//     expect(model.cls.element.container).toEqual('');
+//     expect(model.cls.element.control).toEqual('');
+//     expect(model.cls.element.errors).toEqual('');
+//     expect(model.cls.element.label).toEqual('');
+//     expect(model.cls.grid.container).toEqual('');
+//     expect(model.cls.grid.control).toEqual('');
+//     expect(model.cls.grid.errors).toEqual('');
+//     expect(model.cls.grid.label).toEqual('');
+//   });
+//
+//   it('tests if correct default hint property is set', () => {
+//
+//     expect(model.hint).toBeNull();
+//   });
+//
+//   it('tests if correct default label property is set', () => {
+//
+//     expect(model.label).toBeNull();
+//   });
+//
+//   it('tests if correct default max property is set', () => {
+//
+//     expect(model.max).toBeNull();
+//   });
+//
+//   it('tests if correct default maxLength property is set', () => {
+//
+//     expect(model.maxLength).toBeNull();
+//   });
+//
+//   it('tests if correct default minLength property is set', () => {
+//
+//     expect(model.minLength).toBeNull();
+//   });
+//
+//   it('tests if correct minChars property is set', () => {
+//
+//     expect(model.minChars).toEqual(3);
+//   });
+//
+//   it('tests if correct default min property is set', () => {
+//
+//     expect(model.min).toBeNull();
+//   });
+//
+//   it('tests if correct default placeholder property is set', () => {
+//
+//     expect(model.placeholder).toEqual('');
+//   });
+//
+//   it('tests if correct default readonly property is set', () => {
+//
+//     expect(model.readOnly).toBe(false);
+//   });
+//
+//   it('tests if correct default required property is set', () => {
+//
+//     expect(model.required).toBe(false);
+//   });
+//
+//   it('tests if correct default spellcheck property is set', () => {
+//
+//     expect(model.spellCheck).toBe(false);
+//   });
+//
+//   it('tests if correct default step property is set', () => {
+//
+//     expect(model.step).toBeNull();
+//   });
+//
+//   it('tests if correct default prefix property is set', () => {
+//
+//     expect(model.prefix).toBeNull();
+//   });
+//
+//   it('tests if correct default suffix property is set', () => {
+//
+//     expect(model.suffix).toBeNull();
+//   });
+//
+//   it('tests if correct search function is set', () => {
+//
+//     expect(model.search).toBe(search);
+//   });
+//
+//   it('should serialize correctly', () => {
+//
+//     const json = JSON.parse(JSON.stringify(model));
+//
+//     expect(json.id).toEqual(model.id);
+//     expect(json.disabled).toEqual(model.disabled);
+//     expect(json.value).toBe(model.value);
+//     expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD);
+//   });
+// });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
new file mode 100644
index 0000000000..73018122f3
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
@@ -0,0 +1,28 @@
+import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_TAG = 'TYPETAG';
+
+export interface DynamicTagModelConfig extends DsDynamicInputModelConfig {
+  minChars: number;
+  value?: any;
+}
+
+export class DynamicTagModel extends DsDynamicInputModel {
+
+  @serializable() minChars: number;
+  @serializable() value: any[];
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_TAG;
+
+  constructor(config: DynamicTagModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.autoComplete = AUTOCOMPLETE_OFF;
+    this.minChars = config.minChars;
+    const value = config.value || [];
+    this.valueUpdates.next(value)
+  }
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
new file mode 100644
index 0000000000..354c3d7532
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
@@ -0,0 +1,25 @@
+<ng-template #rt let-r="result" let-t="term">
+  {{ r.display}}
+</ng-template>
+<div class="position-relative right-addon">
+  <i *ngIf="searching" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
+  <input class="form-control"
+         [attr.autoComplete]="model.autoComplete"
+         [class.is-invalid]="showErrorMessages"
+         [dynamicId]="bindId && model.id"
+         [inputFormatter]="formatter"
+         [name]="model.name"
+         [ngbTypeahead]="search"
+         [placeholder]="model.label"
+         [readonly]="model.readOnly"
+         [resultTemplate]="rt"
+         [type]="model.inputType"
+         [(ngModel)]="currentValue"
+         (blur)="onBlurEvent($event)"
+         (focus)="onFocusEvent($event)"
+         (change)="onChangeEvent($event)"
+         (input)="onInput($event)"
+         (selectItem)="onSelectItem($event)">
+
+  <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+</div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
new file mode 100644
index 0000000000..e4f6722c65
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
@@ -0,0 +1,25 @@
+@import "../../../../../../../styles/variables";
+
+/* style fa-spin */
+.fa-spin {
+  pointer-events: none;
+}
+
+/* align fa-spin */
+.left-addon .fa-spin  { left:  0;}
+.right-addon .fa-spin { right: 0;}
+
+:host /deep/ .dropdown-menu {
+  width: 100% !important;
+  max-height: 200px;
+  overflow-y: auto !important;
+  overflow-x: hidden;
+}
+
+:host /deep/ .dropdown-item.active,
+:host /deep/ .dropdown-item:active,
+:host /deep/ .dropdown-item:focus,
+:host /deep/ .dropdown-item:hover {
+  color: $dropdown-link-hover-color !important;
+  background-color: $dropdown-link-hover-bg !important;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
new file mode 100644
index 0000000000..a261eef8f7
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
@@ -0,0 +1,121 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { Observable } from 'rxjs/Observable';
+import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
+
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { DynamicTypeaheadModel } from './dynamic-typeahead.model';
+import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
+import { isEmpty, isNotEmpty } from '../../../../../empty.util';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+
+@Component({
+  selector: 'ds-dynamic-typeahead',
+  styleUrls: ['./dynamic-typeahead.component.scss'],
+  templateUrl: './dynamic-typeahead.component.html'
+})
+export class DsDynamicTypeaheadComponent implements OnInit {
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() model: DynamicTypeaheadModel;
+  @Input() showErrorMessages = false;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter<any>();
+  @Output() change: EventEmitter<any> = new EventEmitter<any>();
+  @Output() focus: EventEmitter<any> = new EventEmitter<any>();
+
+  searching = false;
+  searchOptions: IntegrationSearchOptions;
+  searchFailed = false;
+  hideSearchingWhenUnsubscribed = new Observable(() => () => this.changeSearchingStatus(false));
+  currentValue: any;
+
+  formatter = (x: { display: string }) => {
+    return (typeof x === 'object') ? x.display : x
+  };
+
+  search = (text$: Observable<string>) =>
+    text$
+      .debounceTime(300)
+      .distinctUntilChanged()
+      .do(() => this.changeSearchingStatus(true))
+      .switchMap((term) => {
+        if (term === '' || term.length < this.model.minChars) {
+          return Observable.of({list: []});
+        } else {
+          this.searchOptions.query = term;
+          return this.authorityService.getEntriesByName(this.searchOptions)
+            .map((authorities) => {
+              // @TODO Pagination for authority is not working, to refactor when it will be fixed
+              return {
+                list: authorities.payload,
+                pageInfo: authorities.pageInfo
+              };
+            })
+            .do(() => this.searchFailed = false)
+            .catch(() => {
+              this.searchFailed = true;
+              return Observable.of({list: []});
+            });
+        }
+      })
+      .map((results) => results.list)
+      .do(() => this.changeSearchingStatus(false))
+      .merge(this.hideSearchingWhenUnsubscribed);
+
+  constructor(private authorityService: AuthorityService, private cdr: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    this.currentValue = this.model.value;
+    this.searchOptions = new IntegrationSearchOptions(
+      this.model.authorityOptions.scope,
+      this.model.authorityOptions.name,
+      this.model.authorityOptions.metadata);
+    this.group.get(this.model.id).valueChanges
+      .filter((value) => this.currentValue !== value)
+      .subscribe((value) => {
+        this.currentValue = value;
+      });
+  }
+
+  changeSearchingStatus(status: boolean) {
+    this.searching = status;
+    this.cdr.detectChanges();
+  }
+
+  onInput(event) {
+    if (!this.model.authorityOptions.closed && isNotEmpty(event.target.value)) {
+      const valueObj = new FormFieldMetadataValueObject(event.target.value);
+      this.currentValue = valueObj;
+      this.model.valueUpdates.next(valueObj as any);
+      this.change.emit(valueObj);
+    }
+    if (event.data) {
+      // this.group.markAsDirty();
+    }
+  }
+
+  onBlurEvent(event: Event) {
+    this.blur.emit(event);
+  }
+
+  onChangeEvent(event: Event) {
+    event.stopPropagation();
+    if (isEmpty(this.currentValue)) {
+      this.model.valueUpdates.next(null);
+      this.change.emit(null);
+    }
+  }
+
+  onFocusEvent(event) {
+    this.focus.emit(event);
+  }
+
+  onSelectItem(event: NgbTypeaheadSelectItemEvent) {
+    this.currentValue = event.item;
+    this.model.valueUpdates.next(event.item);
+    this.change.emit(event.item);
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
new file mode 100644
index 0000000000..054127825d
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
@@ -0,0 +1,25 @@
+import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD = 'TYPEAHEAD';
+
+export interface DsDynamicTypeaheadModelConfig extends DsDynamicInputModelConfig {
+  minChars: number;
+  value: any;
+}
+
+export class DynamicTypeaheadModel extends DsDynamicInputModel {
+
+  @serializable() minChars: number;
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD;
+
+  constructor(config: DsDynamicTypeaheadModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.autoComplete = AUTOCOMPLETE_OFF;
+    this.minChars = config.minChars;
+  }
+
+}
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
new file mode 100644
index 0000000000..8e61f80af4
--- /dev/null
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -0,0 +1,212 @@
+import { Injectable } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import {
+  DynamicFormArrayGroupModel,
+  DynamicFormArrayModel,
+  DynamicFormControlModel,
+  DynamicFormGroupModel,
+  DynamicFormService,
+  DynamicPathable,
+  JSONUtils,
+} from '@ng-dynamic-forms/core';
+import { mergeWith } from 'lodash';
+
+import { isEmpty, isNotEmpty, isNotNull, isNull } from '../../empty.util';
+import { DynamicComboboxModel } from './ds-dynamic-form-ui/models/ds-dynamic-combobox.model';
+import { SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
+import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { DynamicListCheckboxGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
+import { DynamicGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model';
+import { DynamicTagModel } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
+import { DynamicListRadioGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
+import { RowParser } from './parsers/row-parser';
+
+import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
+import { DynamicRowGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
+
+@Injectable()
+export class FormBuilderService extends DynamicFormService {
+
+  findById(id: string, groupModel: DynamicFormControlModel[], arrayIndex = null): DynamicFormControlModel | null {
+
+    let result = null;
+    const findByIdFn = (findId: string, findGroupModel: DynamicFormControlModel[]): void => {
+
+      for (const controlModel of findGroupModel) {
+
+        if (controlModel.id === findId) {
+          if (controlModel instanceof DynamicFormArrayModel && isNotNull(arrayIndex)) {
+            result = controlModel.get(arrayIndex);
+          } else {
+            result = controlModel;
+          }
+          break;
+        }
+
+        if (controlModel instanceof DynamicFormGroupModel) {
+          findByIdFn(findId, (controlModel as DynamicFormGroupModel).group);
+        }
+
+        if (controlModel instanceof DynamicFormArrayModel && (isNull(arrayIndex) || controlModel.size > (arrayIndex))) {
+          arrayIndex = (isNull(arrayIndex)) ? 0 : arrayIndex;
+          findByIdFn(findId, controlModel.get(arrayIndex).group);
+        }
+      }
+    };
+
+    findByIdFn(id, groupModel);
+
+    return result;
+  }
+
+  clearAllModelsValue(groupModel: DynamicFormControlModel[]): void {
+
+    const iterateControlModels = (findGroupModel: DynamicFormControlModel[]): void => {
+
+      for (const controlModel of findGroupModel) {
+
+        if (controlModel instanceof DynamicFormGroupModel) {
+          iterateControlModels((controlModel as DynamicFormGroupModel).group);
+          continue;
+        }
+
+        if (controlModel instanceof DynamicFormArrayModel) {
+          iterateControlModels(controlModel.groupFactory());
+          continue;
+        }
+
+        if (controlModel.hasOwnProperty('valueUpdates')) {
+          (controlModel as any).valueUpdates.next(undefined);
+        }
+      }
+    };
+
+    iterateControlModels(groupModel);
+  }
+
+  getValueFromModel(groupModel: DynamicFormControlModel[]): void {
+
+    let result = Object.create({});
+
+    const customizer = (objValue, srcValue) => {
+      if (Array.isArray(objValue)) {
+        return objValue.concat(srcValue);
+      }
+    };
+
+    const iterateControlModels = (findGroupModel: DynamicFormControlModel[]): void => {
+      let iterateResult = Object.create({});
+
+      // Iterate over all group's controls
+      for (const controlModel of findGroupModel) {
+
+        if (controlModel instanceof DynamicRowGroupModel && !this.isCustomGroup(controlModel)) {
+          iterateResult = mergeWith(iterateResult, iterateControlModels((controlModel as DynamicFormGroupModel).group), customizer);
+          continue;
+        }
+
+        if (controlModel instanceof DynamicFormGroupModel && !this.isCustomGroup(controlModel)) {
+          iterateResult[controlModel.name] = iterateControlModels((controlModel as DynamicFormGroupModel).group);
+          continue;
+        }
+
+        if (controlModel instanceof DynamicRowArrayModel) {
+          for (const arrayItemModel of controlModel.groups) {
+            iterateResult = mergeWith(iterateResult, iterateControlModels(arrayItemModel.group), customizer);
+          }
+          continue;
+        }
+
+        if (controlModel instanceof DynamicFormArrayModel) {
+          iterateResult[controlModel.name] = [];
+          for (const arrayItemModel of controlModel.groups) {
+            iterateResult[controlModel.name].push(iterateControlModels(arrayItemModel.group));
+          }
+          continue;
+        }
+
+        let controlId;
+        // Get the field's name
+        if (controlModel instanceof DynamicComboboxModel) {
+          // If is instance of DynamicComboboxModel take the qualdrop id as field's name
+          controlId = controlModel.qualdropId;
+        } else {
+          controlId = controlModel.name;
+        }
+
+        const controlValue = (controlModel as any).value || null;
+        if (controlId && iterateResult.hasOwnProperty(controlId) && isNotNull(iterateResult[controlId])) {
+          iterateResult[controlId].push(controlValue);
+        } else {
+          iterateResult[controlId] = isNotEmpty(controlValue) ? (Array.isArray(controlValue) ? controlValue : [controlValue]) : null;
+        }
+      }
+
+      return iterateResult;
+    };
+
+    result = iterateControlModels(groupModel);
+
+    return result;
+  }
+
+  modelFromConfiguration(json: string | SubmissionFormsModel, scopeUUID: string, initFormValues: any, submissionScope?: string, readOnly = false): DynamicFormControlModel[] | never {
+    let rows: DynamicFormControlModel[] = [];
+    const rawData = typeof json === 'string' ? JSON.parse(json, JSONUtils.parseReviver) : json;
+
+    if (rawData.rows && !isEmpty(rawData.rows)) {
+      rawData.rows.forEach((currentRow) => {
+        const rowParsed = new RowParser(currentRow, scopeUUID, initFormValues, submissionScope, readOnly).parse();
+        if (isNotNull(rowParsed)) {
+          if (Array.isArray(rowParsed)) {
+            rows = rows.concat(rowParsed);
+          } else {
+            rows.push(rowParsed);
+          }
+        }
+      });
+    }
+
+    return rows;
+  }
+
+  isModelInCustomGroup(model: DynamicFormControlModel) {
+    return model.parent &&
+      (model.parent instanceof DynamicConcatModel
+        || model.parent instanceof DynamicComboboxModel);
+  }
+
+  hasMappedGroupValue(model: DynamicFormControlModel) {
+    return ((model.parent && model.parent instanceof DynamicComboboxModel)
+      || model.parent instanceof DynamicGroupModel);
+  }
+
+  isCustomGroup(model: DynamicFormControlModel) {
+    return model &&
+      (model instanceof DynamicConcatModel
+        || model instanceof DynamicComboboxModel
+        || model instanceof DynamicListCheckboxGroupModel
+        || model instanceof DynamicListRadioGroupModel);
+  }
+
+  isModelInAuthorityGroup(model: DynamicFormControlModel) {
+    return (model instanceof DynamicListCheckboxGroupModel || model instanceof DynamicTagModel);
+  }
+
+  getFormControlById(id: string, formGroup: FormGroup, groupModel: DynamicFormControlModel[], index = 0) {
+    const fieldModel = this.findById(id, groupModel, index);
+    return isNotEmpty(fieldModel) ? formGroup.get(this.getPath(fieldModel)) : null;
+  }
+
+  getId(model: DynamicPathable) {
+    if (model instanceof DynamicFormArrayGroupModel) {
+      return model.index.toString();
+    } else {
+      return ((model as DynamicFormControlModel).id !== (model as DynamicFormControlModel).name) ?
+        (model as DynamicFormControlModel).name :
+        (model as DynamicFormControlModel).id;
+    }
+  }
+
+}
diff --git a/src/app/shared/form/builder/models/form-field-language-value.model.ts b/src/app/shared/form/builder/models/form-field-language-value.model.ts
new file mode 100644
index 0000000000..e626c0262d
--- /dev/null
+++ b/src/app/shared/form/builder/models/form-field-language-value.model.ts
@@ -0,0 +1,14 @@
+export class FormFieldLanguageValueObject {
+  value: string;
+  language: string;
+
+  constructor(value: string, language: string) {
+    this.value = value;
+    this.language = language;
+  }
+}
+
+export interface LanguageCode {
+  display: string;
+  code: string;
+}
diff --git a/src/app/shared/form/builder/models/form-field-metadata-value.model.ts b/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
new file mode 100644
index 0000000000..7379d62de6
--- /dev/null
+++ b/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
@@ -0,0 +1,42 @@
+import { isNotEmpty } from '../../../empty.util';
+
+export class FormFieldMetadataValueObject {
+  metadata?: string;
+  value: string;
+  display: string;
+  language: any;
+  authority: string;
+  confidence: number;
+  place: number;
+  closed: boolean;
+  label: string;
+
+  constructor(value: string,
+              language: any = null,
+              authority: string = null,
+              display: string = null,
+              confidence: number = -1,
+              place: number = -1,
+              metadata: string = null) {
+    this.value = value;
+    this.language = language;
+    this.authority = authority;
+    this.display = display || value;
+
+    this.confidence = confidence;
+    if (authority != null) {
+      this.confidence = 600;
+    } else if (isNotEmpty(confidence)) {
+      this.confidence = confidence;
+    }
+
+    this.place = place;
+    if (isNotEmpty(metadata)) {
+      this.metadata = metadata;
+    }
+  }
+
+  hasAuthority(): boolean {
+    return isNotEmpty(this.authority);
+  }
+}
diff --git a/src/app/shared/form/builder/models/form-field-previous-value-object.ts b/src/app/shared/form/builder/models/form-field-previous-value-object.ts
new file mode 100644
index 0000000000..f0ead99f91
--- /dev/null
+++ b/src/app/shared/form/builder/models/form-field-previous-value-object.ts
@@ -0,0 +1,37 @@
+import { isEqual } from 'lodash';
+
+export class FormFieldPreviousValueObject {
+
+  private _path;
+  private _value;
+
+  constructor(path: any[] = null, value: any = null) {
+    this._path = path;
+    this._value = value;
+  }
+
+  get path() {
+    return this._path;
+  }
+
+  set path(path: any[]) {
+    this._path = path;
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  set value(value: any) {
+    this._value = value;
+  }
+
+  public delete() {
+    this._value = null;
+    this._path = null;
+  }
+
+  public isPathEqual(path) {
+    return this._path && isEqual(this._path, path);
+  }
+}
diff --git a/src/app/shared/form/builder/models/form-field-unexpected-object.model.ts b/src/app/shared/form/builder/models/form-field-unexpected-object.model.ts
new file mode 100644
index 0000000000..1b37498a64
--- /dev/null
+++ b/src/app/shared/form/builder/models/form-field-unexpected-object.model.ts
@@ -0,0 +1,3 @@
+export interface FormFieldChangedObject {
+  string: any
+}
diff --git a/src/app/shared/form/builder/models/form-field.model.ts b/src/app/shared/form/builder/models/form-field.model.ts
new file mode 100644
index 0000000000..faf51f14d3
--- /dev/null
+++ b/src/app/shared/form/builder/models/form-field.model.ts
@@ -0,0 +1,42 @@
+import { autoserialize } from 'cerialize';
+import { FormRowModel } from '../../../../core/shared/config/config-submission-forms.model';
+import { LanguageCode } from './form-field-language-value.model';
+import { FormFieldMetadataValueObject } from './form-field-metadata-value.model';
+
+export class FormFieldModel {
+
+  @autoserialize
+  hints: string;
+
+  @autoserialize
+  label: string;
+
+  @autoserialize
+  languageCodes: LanguageCode[];
+
+  @autoserialize
+  mandatoryMessage: string;
+
+  @autoserialize
+  mandatory: string;
+
+  @autoserialize
+  repeatable: boolean;
+
+  @autoserialize
+  input: {
+    type: string;
+  };
+
+  @autoserialize
+  selectableMetadata: FormFieldMetadataValueObject[];
+
+  @autoserialize
+  rows: FormRowModel[];
+
+  @autoserialize
+  scope: string;
+
+  @autoserialize
+  value: any;
+}
diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
new file mode 100644
index 0000000000..14150e9ccc
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -0,0 +1,99 @@
+import { FieldParser } from './field-parser';
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import {
+  DynamicFormControlLayout, DynamicInputModel,
+  DynamicInputModelConfig
+} from '@ng-dynamic-forms/core';
+import {
+  CONCAT_FIRST_INPUT_SUFFIX,
+  CONCAT_GROUP_SUFFIX, CONCAT_SECOND_INPUT_SUFFIX,
+  DynamicConcatModel, DynamicConcatModelConfig
+} from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { isNotEmpty } from '../../../empty.util';
+
+export class ConcatFieldParser extends FieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              private separator: string,
+              protected firstPlaceholder: string = null,
+              protected secondPlaceholder: string = null) {
+    super(configData, initFormValues, readOnly);
+
+    this.separator = separator;
+    this.firstPlaceholder = firstPlaceholder;
+    this.secondPlaceholder = secondPlaceholder;
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject | any): any {
+
+    let clsGroup: DynamicFormControlLayout;
+    let clsInput: DynamicFormControlLayout;
+    const newId = this.configData.selectableMetadata[0].metadata
+      .split('.')
+      .slice(0, this.configData.selectableMetadata[0].metadata.split('.').length - 1)
+      .join('.');
+
+    clsInput = {
+      grid: {
+        host: 'col-sm-6'
+      }
+    };
+
+    const groupId = newId.replace(/\./g, '_') + CONCAT_GROUP_SUFFIX;
+    const concatGroup: DynamicConcatModelConfig = this.initModel(groupId, false, false);
+
+    concatGroup.group = [];
+    concatGroup.separator = this.separator;
+
+    const input1ModelConfig: DynamicInputModelConfig = this.initModel(newId + CONCAT_FIRST_INPUT_SUFFIX, true, false, false);
+    const input2ModelConfig: DynamicInputModelConfig = this.initModel(newId + CONCAT_SECOND_INPUT_SUFFIX, true, true, false);
+
+    if (this.configData.mandatory) {
+      input1ModelConfig.required = true;
+    }
+
+    if (isNotEmpty(this.firstPlaceholder)) {
+      input1ModelConfig.placeholder = this.firstPlaceholder;
+    }
+
+    if (isNotEmpty(this.secondPlaceholder)) {
+      input2ModelConfig.placeholder = this.secondPlaceholder;
+    }
+
+    // Init values
+    if (isNotEmpty(fieldValue)) {
+      const  values = fieldValue.split(this.separator);
+
+      if (values.length > 1) {
+        input1ModelConfig.value = values[0];
+        input2ModelConfig.value = values[1];
+      }
+    }
+
+    // Split placeholder if is like 'placeholder1/placeholder2'
+    const placeholder = this.configData.label.split('/');
+    if (placeholder.length === 2) {
+      input1ModelConfig.placeholder = placeholder[0];
+      input2ModelConfig.placeholder = placeholder[1];
+    }
+
+    const model1 = new DynamicInputModel(input1ModelConfig, clsInput);
+    const model2 = new DynamicInputModel(input2ModelConfig, clsInput);
+    concatGroup.group.push(model1);
+    concatGroup.group.push(model2);
+
+    clsGroup = {
+      element: {
+        control: 'form-row',
+      }
+    };
+    const concatModel = new DynamicConcatModel(concatGroup, clsGroup);
+    concatModel.name = this.getFieldId()[0];
+
+    return concatModel;
+  }
+
+}
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
new file mode 100644
index 0000000000..b4b7f62a9e
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -0,0 +1,49 @@
+import { FieldParser } from './field-parser';
+import { DynamicDatePickerModelConfig } from '@ng-dynamic-forms/core';
+import { FormFieldModel } from '../models/form-field.model';
+import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model';
+import { isNotEmpty } from '../../../empty.util';
+import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component';
+
+export class DateFieldParser extends FieldParser {
+
+  public modelFactory(): any {
+    const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel();
+
+    inputDateModelConfig.toggleIcon = 'fa fa-calendar';
+
+    const dateModel = new DynamicDsDatePickerModel(inputDateModelConfig);
+
+    // Init Data and validity check
+    if (isNotEmpty(this.getInitFieldValue())) {
+      let malformedData = false;
+      const value = this.getInitFieldValue().toString();
+      if (value.length >= 4) {
+        const valuesArray = value.split(DS_DATE_PICKER_SEPARATOR);
+        if (valuesArray.length < 4) {
+          for (let i = 0; i < valuesArray.length; i++) {
+            const len = i === 0 ? 4 : 2;
+            if (valuesArray[i].length !== len) {
+              malformedData = true;
+            }
+          }
+        }
+
+        if (!malformedData) {
+          dateModel.valueUpdates.next(this.getInitFieldValue());
+        } else {
+          // TODO Set error message
+          dateModel.malformedDate = true;
+          // TODO
+          // const errorMessage = 'The stored date is not compliant';
+          // dateModel.validators = Object.assign({}, dateModel.validators, {malformedDate: null});
+          // dateModel.errorMessages = Object.assign({}, dateModel.errorMessages, {malformedDate: errorMessage});
+
+          // this.formService.addErrorToField(this.group.get(this.model.id), this.model, errorMessage)
+        }
+      }
+
+    }
+    return dateModel;
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
new file mode 100644
index 0000000000..431e126641
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
@@ -0,0 +1,44 @@
+import { FieldParser } from './field-parser';
+import { DynamicFormControlLayout, } from '@ng-dynamic-forms/core';
+import {
+  DynamicScrollableDropdownModel,
+  DynamicScrollableDropdownModelConfig
+} from '../ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { FormFieldModel } from '../models/form-field.model';
+import { isNotEmpty } from '../../../empty.util';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+
+export class DropdownFieldParser extends FieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly);
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+    const dropdownModelConfig: DynamicScrollableDropdownModelConfig = this.initModel();
+    let layout: DynamicFormControlLayout;
+
+    if (isNotEmpty(this.configData.selectableMetadata[0].authority)) {
+      this.setAuthorityOptions(dropdownModelConfig, this.authorityUuid);
+      dropdownModelConfig.maxOptions = 10;
+      if (isNotEmpty(fieldValue)) {
+        dropdownModelConfig.value = fieldValue;
+      }
+      layout = {
+        element: {
+          control: 'col'
+        },
+        grid: {
+          host: 'col'
+        }
+      };
+      const dropdownModel = new DynamicScrollableDropdownModel(dropdownModelConfig, layout);
+      return dropdownModel;
+    } else {
+      throw  Error(`Authority name is not available. Please checks form configuration file.`);
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
new file mode 100644
index 0000000000..29a133171d
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -0,0 +1,272 @@
+import { hasValue, isNotEmpty, isNotNull, isNotUndefined } from '../../../empty.util';
+import { FormFieldModel } from '../models/form-field.model';
+
+import { uniqueId } from 'lodash';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import {
+  DynamicRowArrayModel,
+  DynamicRowArrayModelConfig
+} from '../ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { DynamicFormControlLayout } from '@ng-dynamic-forms/core';
+import { setLayout } from './parser.utils';
+import { AuthorityOptions } from '../../../../core/integration/models/authority-options.model';
+
+export abstract class FieldParser {
+
+  protected fieldId: string;
+
+  constructor(protected configData: FormFieldModel, protected initFormValues, protected readOnly: boolean) {
+  }
+
+  public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject): any;
+
+  public parse() {
+    if (((this.getInitValueCount() > 1 && !this.configData.repeatable) || (this.configData.repeatable))
+      && (this.configData.input.type !== 'list')
+      && (this.configData.input.type !== 'tag')
+      && (this.configData.input.type !== 'group')
+    ) {
+      let arrayCounter = 0;
+      let fieldArrayCounter = 0;
+
+      const config = {
+        id: uniqueId() + '_array',
+        initialCount: this.getInitArrayIndex(),
+        notRepeteable: !this.configData.repeatable,
+        groupFactory: () => {
+          let model;
+          if ((arrayCounter === 0)) {
+            model = this.modelFactory();
+            arrayCounter++;
+          } else {
+            const fieldArrayOfValueLenght = this.getInitValueCount(arrayCounter - 1);
+            let fieldValue = null;
+            if (fieldArrayOfValueLenght > 0) {
+              fieldValue = this.getInitFieldValue(arrayCounter - 1, fieldArrayCounter++);
+              if (fieldArrayCounter === fieldArrayOfValueLenght) {
+                fieldArrayCounter = 0;
+                arrayCounter++;
+              }
+            }
+            model = this.modelFactory(fieldValue);
+          }
+          setLayout(model, 'element', 'host', 'col');
+          if (model.hasLanguages) {
+            setLayout(model, 'grid', 'control', 'col');
+          }
+          return [model];
+        }
+      } as DynamicRowArrayModelConfig;
+
+      const layout: DynamicFormControlLayout = {
+        grid: {
+          group: 'dsgridgroup form-row'
+        }
+      };
+
+      return new DynamicRowArrayModel(config, layout);
+
+    } else {
+      const model = this.modelFactory(this.getInitFieldValue());
+      if (model.hasLanguages) {
+        setLayout(model, 'grid', 'control', 'col');
+      }
+      return model;
+    }
+  }
+
+  protected getInitValueCount(index = 0, fieldId?): number {
+    const fieldIds = fieldId || this.getFieldId();
+    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds[0])) {
+      return this.initFormValues[fieldIds[0]].length;
+    } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
+      const values = [];
+      fieldIds.forEach((id) => {
+        if (this.initFormValues.hasOwnProperty(id)) {
+          values.push(this.initFormValues[id].length);
+        }
+      });
+      return values[index];
+    } else {
+      return 0;
+    }
+  }
+
+  protected getInitGroupValues(): FormFieldMetadataValueObject[] {
+    const fieldIds = this.getFieldId();
+    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds[0])) {
+      return this.initFormValues[fieldIds[0]];
+    }
+  }
+
+  protected getInitFieldValues(fieldId): FormFieldMetadataValueObject[] {
+    if (isNotEmpty(this.initFormValues) && isNotNull(fieldId) && this.initFormValues.hasOwnProperty(fieldId)) {
+      return this.initFormValues[fieldId];
+    }
+  }
+
+  protected getInitFieldValue(outerIndex = 0, innerIndex = 0, fieldId?): FormFieldMetadataValueObject {
+    const fieldIds = fieldId || this.getFieldId();
+    if (isNotEmpty(this.initFormValues)
+      && isNotNull(fieldIds)
+      && fieldIds.length === 1
+      && this.initFormValues.hasOwnProperty(fieldIds[outerIndex])
+      && this.initFormValues[fieldIds[outerIndex]].length > innerIndex) {
+      return this.initFormValues[fieldIds[outerIndex]][innerIndex];
+    } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
+      const values: FormFieldMetadataValueObject[] = [];
+      fieldIds.forEach((id) => {
+        if (this.initFormValues.hasOwnProperty(id)) {
+          const valueObj: FormFieldMetadataValueObject = Object.create({});
+          valueObj.metadata = id;
+          valueObj.value = this.initFormValues[id][innerIndex];
+          values.push(valueObj);
+        }
+      });
+      return values[outerIndex];
+    } else {
+      return null;
+    }
+  }
+
+  protected getInitArrayIndex() {
+    const fieldIds: any = this.getFieldId();
+    if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
+      return this.initFormValues[fieldIds].length;
+    } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
+      let counter = 0;
+      fieldIds.forEach((id) => {
+        if (this.initFormValues.hasOwnProperty(id)) {
+          counter = counter + this.initFormValues[id].length;
+        }
+      });
+      return (counter === 0) ? 1 : counter;
+    } else {
+      return 1;
+    }
+  }
+
+  protected getFieldId(): string[] {
+    if (Array.isArray(this.configData.selectableMetadata)) {
+      if (this.configData.selectableMetadata.length === 1) {
+        return [this.configData.selectableMetadata[0].metadata];
+      } else {
+        const ids = [];
+        this.configData.selectableMetadata.forEach((entry) => ids.push(entry.metadata));
+        return ids;
+      }
+    } else {
+      return null;
+    }
+  }
+
+  protected initModel(id?: string, label = true, labelEmpty = false, setErrors = true) {
+
+    const controlModel = Object.create(null);
+
+    // Sets input ID
+    this.fieldId = id ? id : this.getFieldId()[0];
+
+    // Sets input name (with the original field's id value)
+    controlModel.name = this.fieldId;
+
+    // input ID doesn't allow dots, so replace them
+    controlModel.id = (this.fieldId).replace(/\./g, '_');
+
+    // Set read only option
+    controlModel.readOnly = this.readOnly;
+    controlModel.disabled = this.readOnly;
+
+    if (label) {
+      controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;
+    }
+
+    controlModel.placeholder = this.configData.label;
+
+    if (this.configData.mandatory && setErrors) {
+      this.setErrors(controlModel);
+    }
+
+    // Available Languages
+    if (this.configData.languageCodes && this.configData.languageCodes.length > 0) {
+      (controlModel as DsDynamicInputModel).languageCodes = this.configData.languageCodes;
+    }
+
+    return controlModel;
+  }
+
+  protected setErrors(controlModel) {
+    controlModel.required = true;
+    controlModel.validators = Object.assign({}, controlModel.validators, {required: null});
+    controlModel.errorMessages = Object.assign(
+      {},
+      controlModel.errorMessages,
+      {required: this.configData.mandatoryMessage});
+  }
+
+  protected setOptions(controlModel) {
+    // Checks if field has multiple values and sets options available
+    if (isNotUndefined(this.configData.selectableMetadata) && this.configData.selectableMetadata.length > 1) {
+      controlModel.options = [];
+      this.configData.selectableMetadata.forEach((option, key) => {
+        if (key === 0) {
+          controlModel.value = option.metadata;
+        }
+        controlModel.options.push({label: option.label, value: option.metadata});
+      });
+    }
+  }
+
+  public setAuthorityOptions(controlModel, authorityUuid) {
+    if (isNotEmpty(this.configData.selectableMetadata[0].authority)) {
+      controlModel.authorityOptions = new AuthorityOptions(
+        this.configData.selectableMetadata[0].authority,
+        this.configData.selectableMetadata[0].metadata,
+        authorityUuid,
+        this.configData.selectableMetadata[0].closed
+      )
+    }
+  }
+
+  public setValues(modelConfig: DsDynamicInputModelConfig, fieldValue: any, forceValueAsObj: boolean = false, groupModel?: boolean) {
+    if (isNotEmpty(fieldValue)) {
+      if (groupModel) {
+        // Array, values is an array
+        modelConfig.value = this.getInitGroupValues();
+        if (Array.isArray(modelConfig.value) && modelConfig.value.length > 0 && modelConfig.value[0].language) {
+          // Array Item has language, ex. AuthorityModel
+          modelConfig.language = modelConfig.value[0].language;
+        }
+        return;
+      }
+
+      if (typeof fieldValue === 'object') {
+        modelConfig.language = fieldValue.language;
+        if (hasValue(fieldValue.language)) {
+          // Instance of FormFieldLanguageValueObject
+          modelConfig.value = fieldValue.value;
+        } else if (hasValue(fieldValue.metadata)) {
+          // Is a combobox field's value
+          modelConfig.value = fieldValue.value;
+        } else {
+          // Instance of FormFieldMetadataValueObject
+          modelConfig.value = fieldValue;
+        }
+      } else {
+        if (forceValueAsObj) {
+          // If value isn't an instance of FormFieldMetadataValueObject instantiate it
+          modelConfig.value = new FormFieldMetadataValueObject(fieldValue);
+        } else {
+          if (typeof fieldValue === 'string') {
+            // Case only string
+            modelConfig.value = fieldValue;
+          }
+        }
+      }
+    }
+
+    return modelConfig;
+  }
+
+}
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
new file mode 100644
index 0000000000..5ed0dfc18b
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -0,0 +1,67 @@
+import { FieldParser } from './field-parser';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { FormFieldModel } from '../models/form-field.model';
+import {
+  DynamicGroupModel,
+  DynamicGroupModelConfig, PLACEHOLDER_PARENT_METADATA
+} from '../ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model';
+import { isNotEmpty } from '../../../empty.util';
+import { FormRowModel } from '../../../../core/shared/config/config-submission-forms.model';
+
+export class GroupFieldParser extends FieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly);
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject) {
+    const modelConfiguration: DynamicGroupModelConfig = this.initModel();
+
+    modelConfiguration.scopeUUID = this.authorityUuid;
+    if (this.configData && this.configData.rows && this.configData.rows.length > 0) {
+      modelConfiguration.formConfiguration = this.configData.rows;
+      modelConfiguration.relationFields = [];
+      this.configData.rows.forEach((row: FormRowModel) => {
+        row.fields.forEach((field: FormFieldModel) => {
+          if (field.selectableMetadata[0].metadata === this.configData.selectableMetadata[0].metadata) {
+            if (!field.mandatory) {
+              // throw new Error(`Configuration not valid: Main field ${this.configData.selectableMetadata[0].metadata} may be mandatory`);
+            }
+            modelConfiguration.mandatoryField = this.configData.selectableMetadata[0].metadata;
+          } else {
+            modelConfiguration.relationFields.push(field.selectableMetadata[0].metadata);
+          }
+        })
+      });
+    } else {
+      throw new Error(`Configuration not valid: ${modelConfiguration.name}`);
+    }
+
+    if (isNotEmpty(this.getInitGroupValues())) {
+      modelConfiguration.value = [];
+      const mandatoryFieldEntries: FormFieldMetadataValueObject[] = this.getInitFieldValues(modelConfiguration.mandatoryField);
+      mandatoryFieldEntries.forEach((entry, index) => {
+        const item = Object.create(null);
+        const listFields = modelConfiguration.relationFields.concat(modelConfiguration.mandatoryField);
+        listFields.forEach((fieldId) => {
+          const value = this.getInitFieldValue(0, index, [fieldId]);
+          item[fieldId] = isNotEmpty(value) ? value : PLACEHOLDER_PARENT_METADATA;
+        });
+        modelConfiguration.value.push(item);
+      })
+    }
+    const cls = {
+      element: {
+        container: 'mb-3'
+      }
+    };
+
+    const model = new DynamicGroupModel(modelConfiguration, cls);
+    model.name = this.getFieldId()[0];
+    return model;
+  }
+
+}
diff --git a/src/app/shared/form/builder/parsers/list-field-parser.ts b/src/app/shared/form/builder/parsers/list-field-parser.ts
new file mode 100644
index 0000000000..a502918a02
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/list-field-parser.ts
@@ -0,0 +1,52 @@
+import { FieldParser } from './field-parser';
+import { FormFieldModel } from '../models/form-field.model';
+import { isNotEmpty } from '../../../empty.util';
+import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { DynamicListCheckboxGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
+import { DynamicListRadioGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
+
+export class ListFieldParser extends FieldParser {
+  searchOptions: IntegrationSearchOptions;
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly);
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+    const listModelConfig = this.initModel();
+    listModelConfig.repeatable = this.configData.repeatable;
+
+    if (this.configData.selectableMetadata[0].authority
+      && this.configData.selectableMetadata[0].authority.length > 0) {
+
+      if (isNotEmpty(this.getInitGroupValues())) {
+        listModelConfig.value = [];
+        this.getInitGroupValues().forEach((value: any) => {
+          if (value instanceof FormFieldMetadataValueObject) {
+            listModelConfig.value.push(value);
+          } else {
+            const valueObj = new FormFieldMetadataValueObject(value);
+            listModelConfig.value.push(valueObj);
+          }
+        });
+      }
+      this.setAuthorityOptions(listModelConfig, this.authorityUuid);
+    }
+
+    let listModel;
+    if (listModelConfig.repeatable) {
+      listModelConfig.group = [];
+      listModel = new DynamicListCheckboxGroupModel(listModelConfig);
+    } else {
+      listModelConfig.options = [];
+      listModel = new DynamicListRadioGroupModel(listModelConfig);
+    }
+
+    return listModel;
+  }
+
+}
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
new file mode 100644
index 0000000000..9cec80c5ad
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
@@ -0,0 +1,30 @@
+import { FieldParser } from './field-parser';
+import { FormFieldModel } from '../models/form-field.model';
+import { AuthorityValueModel } from '../../../../core/integration/models/authority-value.model';
+import { isNotEmpty } from '../../../empty.util';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { DynamicLookupModel, DynamicLookupModelConfig } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+
+export class LookupFieldParser extends FieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly);
+  }
+
+  public modelFactory(fieldValue: any): any {
+    if (this.configData.selectableMetadata[0].authority) {
+      const lookupModelConfig: DynamicLookupModelConfig = this.initModel();
+
+      this.setAuthorityOptions(lookupModelConfig, this.authorityUuid);
+      lookupModelConfig.maxOptions = 10;
+
+      this.setValues(lookupModelConfig, fieldValue, true);
+
+      const lookupModel = new DynamicLookupModel(lookupModelConfig);
+      return lookupModel;
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
new file mode 100644
index 0000000000..8ae8d78b2b
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
@@ -0,0 +1,22 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { LookupFieldParser } from './lookup-field-parser';
+
+export class LookupNameFieldParser extends LookupFieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly, authorityUuid);
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject | any): any {
+    const lookupModel = super.modelFactory(fieldValue);
+    lookupModel.separator = ',';
+    lookupModel.placeholder = 'form.last-name';
+    lookupModel.placeholder2 = 'form.first-name';
+    return lookupModel;
+
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/name-field-parser.ts b/src/app/shared/form/builder/parsers/name-field-parser.ts
new file mode 100644
index 0000000000..dbc9d45f86
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/name-field-parser.ts
@@ -0,0 +1,10 @@
+import { FormFieldModel } from '../models/form-field.model';
+
+import { ConcatFieldParser } from './concat-field-parser';
+
+export class NameFieldParser extends ConcatFieldParser {
+
+  constructor(protected configData: FormFieldModel, protected initFormValues, protected readOnly: boolean) {
+    super(configData, initFormValues, readOnly, ',', 'form.last-name', 'form.first-name');
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
new file mode 100644
index 0000000000..3b1bfc935c
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -0,0 +1,95 @@
+import { DynamicSelectModel, DynamicSelectModelConfig } from '@ng-dynamic-forms/core';
+
+import { FieldParser } from './field-parser';
+import { FormFieldModel } from '../models/form-field.model';
+import {
+  COMBOBOX_GROUP_SUFFIX,
+  COMBOBOX_METADATA_SUFFIX,
+  COMBOBOX_VALUE_SUFFIX,
+  DsDynamicComboboxModelConfig,
+  DynamicComboboxModel
+} from '../ds-dynamic-form-ui/models/ds-dynamic-combobox.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { isNotEmpty } from '../../../empty.util';
+import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import {
+  DsDynamicTypeaheadModelConfig,
+  DynamicTypeaheadModel
+} from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model';
+
+export class OneboxFieldParser extends FieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly);
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+    if (this.configData.selectableMetadata.length > 1) {
+      // Case ComboBox
+      const clsGroup = {
+        element: {
+          control: 'form-row',
+        }
+      };
+
+      const clsSelect = {
+        element: {
+          control: 'input-group-addon ds-form-input-addon',
+        },
+        grid: {
+          host: 'col-sm-4 pr-0'
+        }
+      };
+
+      const clsInput = {
+        element: {
+          control: 'ds-form-input-value',
+        },
+        grid: {
+          host: 'col-sm-8 pl-0'
+        }
+      };
+
+      const newId = this.configData.selectableMetadata[0].metadata
+        .split('.')
+        .slice(0, this.configData.selectableMetadata[0].metadata.split('.').length - 1)
+        .join('.');
+
+      const inputSelectGroup: DsDynamicComboboxModelConfig = Object.create(null);
+      inputSelectGroup.id = newId.replace(/\./g, '_') + COMBOBOX_GROUP_SUFFIX;
+      inputSelectGroup.group = [];
+      inputSelectGroup.legend = this.configData.label;
+
+      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + COMBOBOX_METADATA_SUFFIX);
+      this.setOptions(selectModelConfig);
+      if (isNotEmpty(fieldValue)) {
+        selectModelConfig.value = fieldValue.metadata;
+      }
+      selectModelConfig.disabled = true;
+      inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
+
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + COMBOBOX_VALUE_SUFFIX, true, true);
+      this.setValues(inputModelConfig, fieldValue);
+
+      inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
+      inputSelectGroup.group.push(new DsDynamicInputModel(inputModelConfig, clsInput));
+
+      return new DynamicComboboxModel(inputSelectGroup, clsGroup);
+    } else if (this.configData.selectableMetadata[0].authority) {
+      const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel();
+      this.setAuthorityOptions(typeaheadModelConfig, this.authorityUuid);
+      this.setValues(typeaheadModelConfig, fieldValue, true);
+      typeaheadModelConfig.minChars = 3;
+      const typeaheadModel = new DynamicTypeaheadModel(typeaheadModelConfig);
+      return typeaheadModel;
+    } else {
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel();
+      this.setValues(inputModelConfig, fieldValue);
+      const inputModel = new DsDynamicInputModel(inputModelConfig);
+      return inputModel;
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/parser.utils.ts b/src/app/shared/form/builder/parsers/parser.utils.ts
new file mode 100644
index 0000000000..734ec4b83a
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/parser.utils.ts
@@ -0,0 +1,17 @@
+import { isNull, isUndefined } from '../../../empty.util';
+import { DynamicFormControlLayout, DynamicFormControlLayoutConfig } from '@ng-dynamic-forms/core';
+
+export function setLayout(model: any, controlLayout: string, controlLayoutConfig: string, style: string) {
+  if (isNull(model.layout)) {
+    model.layout = {} as DynamicFormControlLayout;
+    model.layout[controlLayout] = {} as DynamicFormControlLayoutConfig;
+    model.layout[controlLayout][controlLayoutConfig] = style;
+  } else if (isUndefined(model.layout[controlLayout])) {
+    model.layout[controlLayout] = {} as DynamicFormControlLayoutConfig;
+    model.layout[controlLayout][controlLayoutConfig] = style;
+  } else if (isUndefined(model.layout[controlLayout][controlLayoutConfig])) {
+    model.layout[controlLayout][controlLayoutConfig] = style;
+  } else {
+    model.layout[controlLayout][controlLayoutConfig] = model.layout[controlLayout][controlLayoutConfig].concat(` ${style}`);
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
new file mode 100644
index 0000000000..b082cc060a
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -0,0 +1,162 @@
+import { DynamicFormArrayModel, DynamicFormControlModel, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core';
+import { uniqueId } from 'lodash';
+
+import { DateFieldParser } from './date-field-parser';
+import { DropdownFieldParser } from './dropdown-field-parser';
+import { ListFieldParser } from './list-field-parser';
+import { OneboxFieldParser } from './onebox-field-parser';
+import { NameFieldParser } from './name-field-parser';
+import { SeriesFieldParser } from './series-field-parser';
+import { TagFieldParser } from './tag-field-parser';
+import { TextareaFieldParser } from './textarea-field-parser';
+import { GroupFieldParser } from './group-field-parser';
+import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model';
+import { DynamicGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model';
+import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
+import { isEmpty } from '../../../empty.util';
+import { LookupFieldParser } from './lookup-field-parser';
+import { LookupNameFieldParser } from './lookup-name-field-parser';
+import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { setLayout } from './parser.utils';
+import { FormFieldModel } from '../models/form-field.model';
+
+export const ROW_ID_PREFIX = 'df-row-group-config-';
+
+export class RowParser {
+  protected authorityOptions: IntegrationSearchOptions;
+
+  constructor(protected rowData,
+              protected scopeUUID,
+              protected initFormValues: any,
+              protected submissionScope,
+              protected readOnly: boolean) {
+    this.authorityOptions = new IntegrationSearchOptions(scopeUUID);
+  }
+
+  public parse(): DynamicRowGroupModel {
+    let fieldModel: any = null;
+    let parsedResult = null;
+    const config: DynamicFormGroupModelConfig = {
+      id: uniqueId(ROW_ID_PREFIX),
+      group: [],
+    };
+
+    const scopedFields: FormFieldModel[] = this.filterScopedFields(this.rowData.fields);
+
+    const layoutGridClass = ' col-sm-' + Math.trunc(12 / scopedFields.length) + ' d-flex flex-column justify-content-start';
+
+    // Iterate over row's fields
+    scopedFields.forEach((fieldData: FormFieldModel) => {
+
+      switch (fieldData.input.type) {
+        case 'date':
+          fieldModel = (new DateFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
+          break;
+
+        case 'dropdown':
+          fieldModel = (new DropdownFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
+          break;
+
+        case 'list':
+          fieldModel = (new ListFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
+          break;
+
+        case 'lookup':
+          fieldModel = (new LookupFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
+          break;
+
+        case 'onebox':
+          fieldModel = (new OneboxFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
+          break;
+
+        case 'lookup-name':
+          fieldModel = (new LookupNameFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
+          break;
+
+        case 'name':
+          fieldModel = (new NameFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
+          break;
+
+        case 'series':
+          fieldModel = (new SeriesFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
+          break;
+
+        case 'tag':
+          fieldModel = (new TagFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
+          break;
+
+        case 'textarea':
+          fieldModel = (new TextareaFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
+          break;
+
+        case 'group':
+          fieldModel = new GroupFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse();
+          break;
+
+        case 'twobox':
+          // group.push(new TwoboxFieldParser(fieldData).parse());
+          break;
+
+        default:
+          throw new Error(`unknown form control model type defined on JSON object with label "${fieldData.label}"`);
+      }
+
+      if (fieldModel) {
+        if (fieldModel instanceof DynamicFormArrayModel || fieldModel instanceof DynamicGroupModel) {
+          if (this.rowData.fields.length > 1) {
+            setLayout(fieldModel, 'grid', 'host', layoutGridClass);
+            config.group.push(fieldModel);
+            // if (isEmpty(parsedResult)) {
+            //   parsedResult = [];
+            // }
+            // parsedResult.push(fieldModel);
+          } else {
+            parsedResult = fieldModel;
+          }
+          return;
+        } else {
+          if (fieldModel instanceof Array) {
+            fieldModel.forEach((model) => {
+              parsedResult = model;
+              return;
+            })
+          } else {
+            setLayout(fieldModel, 'grid', 'host', layoutGridClass);
+            config.group.push(fieldModel);
+          }
+        }
+        fieldModel = null;
+      }
+    });
+
+    if (config && !isEmpty(config.group)) {
+      const clsGroup = {
+        element: {
+          control: 'form-row',
+        }
+      };
+      const groupModel = new DynamicRowGroupModel(config, clsGroup);
+      if (Array.isArray(parsedResult)) {
+        parsedResult.push(groupModel)
+      } else {
+        parsedResult = groupModel;
+      }
+    }
+    return parsedResult;
+  }
+
+  checksFieldScope(fieldScope) {
+    return (isEmpty(fieldScope) || isEmpty(this.submissionScope) || fieldScope === this.submissionScope);
+  }
+
+  filterScopedFields(fields: FormFieldModel[]): FormFieldModel[] {
+    const filteredFields: FormFieldModel[] = [];
+    fields.forEach((field: FormFieldModel) => {
+      // Whether field scope doesn't match the submission scope, skip it
+      if (this.checksFieldScope(field.scope)) {
+        filteredFields.push(field);
+      }
+    });
+    return filteredFields;
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.ts b/src/app/shared/form/builder/parsers/series-field-parser.ts
new file mode 100644
index 0000000000..dd0b406e8e
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/series-field-parser.ts
@@ -0,0 +1,10 @@
+import { FormFieldModel } from '../models/form-field.model';
+
+import { ConcatFieldParser } from './concat-field-parser';
+
+export class SeriesFieldParser extends ConcatFieldParser {
+
+  constructor(protected configData: FormFieldModel, protected initFormValues, protected readOnly: boolean) {
+    super(configData, initFormValues, readOnly, ';');
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.ts b/src/app/shared/form/builder/parsers/tag-field-parser.ts
new file mode 100644
index 0000000000..fc153337e6
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/tag-field-parser.ts
@@ -0,0 +1,31 @@
+import { FieldParser } from './field-parser';
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { isNotEmpty } from '../../../empty.util';
+import { DynamicTagModel, DynamicTagModelConfig } from '../ds-dynamic-form-ui/models/tag/dynamic-tag.model';
+
+export class TagFieldParser extends FieldParser {
+
+  constructor(protected configData: FormFieldModel,
+              protected initFormValues,
+              protected readOnly: boolean,
+              protected authorityUuid: string) {
+    super(configData, initFormValues, readOnly);
+  }
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+    const tagModelConfig: DynamicTagModelConfig = this.initModel();
+    if (this.configData.selectableMetadata[0].authority
+      && this.configData.selectableMetadata[0].authority.length > 0) {
+      this.setAuthorityOptions(tagModelConfig, this.authorityUuid);
+    }
+
+    tagModelConfig.minChars = 3;
+    this.setValues(tagModelConfig, fieldValue, null, true);
+
+    const tagModel = new DynamicTagModel(tagModelConfig);
+
+    return tagModel;
+  }
+
+}
diff --git a/src/app/shared/form/builder/parsers/textarea-field-parser.ts b/src/app/shared/form/builder/parsers/textarea-field-parser.ts
new file mode 100644
index 0000000000..4596bb18ce
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/textarea-field-parser.ts
@@ -0,0 +1,32 @@
+import { FieldParser } from './field-parser';
+import {
+  DynamicFormControlLayout, DynamicTextAreaModel, DynamicTextAreaModelConfig
+} from '@ng-dynamic-forms/core';
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { isNotEmpty } from '../../../empty.util';
+import {
+  DsDynamicTextAreaModel,
+  DsDynamicTextAreaModelConfig
+} from '../ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
+
+export class TextareaFieldParser extends FieldParser {
+
+  public modelFactory(fieldValue: FormFieldMetadataValueObject | any): any {
+    const textAreaModelConfig: DsDynamicTextAreaModelConfig = this.initModel();
+
+    let layout: DynamicFormControlLayout;
+
+    layout = {
+      element: {
+        label: 'col-form-label'
+      }
+    };
+
+    textAreaModelConfig.rows = 10;
+    this.setValues(textAreaModelConfig, fieldValue);
+    const textAreaModel = new DsDynamicTextAreaModel(textAreaModelConfig, layout);
+
+    return textAreaModel;
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/twobox-field-parser.ts b/src/app/shared/form/builder/parsers/twobox-field-parser.ts
new file mode 100644
index 0000000000..1614ccf331
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/twobox-field-parser.ts
@@ -0,0 +1,10 @@
+import { FieldParser } from './field-parser';
+import { FormFieldModel } from '../models/form-field.model';
+
+// @TODO to be implemented
+export class TwoboxFieldParser extends FieldParser {
+
+  public modelFactory(): any {
+    return null;
+  }
+}
diff --git a/src/app/shared/form/form.actions.ts b/src/app/shared/form/form.actions.ts
new file mode 100644
index 0000000000..681add077e
--- /dev/null
+++ b/src/app/shared/form/form.actions.ts
@@ -0,0 +1,126 @@
+import { Action } from '@ngrx/store';
+
+import { type } from '../ngrx/type';
+
+/**
+ * For each action type in an action group, make a simple
+ * enum object for all of this group's action types.
+ *
+ * The 'type' utility function coerces strings into string
+ * literal types and runs a simple check to guarantee all
+ * action types in the application are unique.
+ */
+export const FormActionTypes = {
+  FORM_INIT: type('dspace/form/FORM_INIT'),
+  FORM_CHANGE: type('dspace/form/FORM_CHANGE'),
+  FORM_REMOVE: type('dspace/form/FORM_REMOVE'),
+  FORM_STATUS_CHANGE: type('dspace/form/FORM_STATUS_CHANGE'),
+  FORM_ADD_ERROR: type('dspace/form/ADD_ERROR'),
+  FORM_REMOVE_ERROR: type('dspace/form/REMOVE_ERROR'),
+  CLEAR_ERRORS: type('dspace/form/CLEAR_ERRORS'),
+};
+
+/* tslint:disable:max-classes-per-file */
+export class FormInitAction implements Action {
+  type = FormActionTypes.FORM_INIT;
+  payload: {
+    formId: string;
+    formData: any;
+    valid: boolean;
+  };
+
+  /**
+   * Create a new FormInitAction
+   *
+   * @param formId
+   *    the Form's ID
+   * @param formData
+   *    the FormGroup Object
+   * @param valid
+   *    the Form validation status
+   */
+  constructor(formId: string, formData: any, valid: boolean) {
+    this.payload = {formId, formData, valid};
+  }
+}
+
+export class FormChangeAction implements Action {
+  type = FormActionTypes.FORM_CHANGE;
+  payload: {
+    formId: string;
+    formData: any;
+  };
+
+  /**
+   * Create a new FormInitAction
+   *
+   * @param formId
+   *    the Form's ID
+   * @param formData
+   *    the FormGroup Object
+   */
+  constructor(formId: string, formData: any) {
+    this.payload = {formId, formData};
+  }
+}
+
+export class FormRemoveAction implements Action {
+  type = FormActionTypes.FORM_REMOVE;
+  payload: {
+    formId: string;
+  };
+
+  /**
+   * Create a new FormRemoveAction
+   *
+   * @param formId
+   *    the Form's ID
+   */
+  constructor(formId: string) {
+    this.payload = {formId};
+  }
+}
+
+export class FormStatusChangeAction implements Action {
+  type = FormActionTypes.FORM_STATUS_CHANGE;
+  payload: {
+    formId: string;
+    valid: boolean;
+  };
+
+  /**
+   * Create a new FormInitAction
+   *
+   * @param formId
+   *    the Form's ID
+   * @param valid
+   *    the Form validation status
+   */
+  constructor(formId: string, valid: boolean) {
+    this.payload = {formId, valid};
+  }
+}
+
+export class FormAddError implements Action {
+  type = FormActionTypes.FORM_ADD_ERROR;
+  payload: {
+    formId: string,
+    fieldId: string,
+    errorMessage: string,
+  };
+
+  constructor(formId: string, fieldId: string, errorMessage: string) {
+    this.payload = {formId, fieldId, errorMessage};
+  }
+}
+
+/* tslint:enable:max-classes-per-file */
+
+/**
+ * Export a type alias of all actions in this action group
+ * so that reducers can easily compose action types
+ */
+export type FormAction = FormInitAction
+  | FormChangeAction
+  | FormStatusChangeAction
+  | FormAddError
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
new file mode 100644
index 0000000000..e760c0111e
--- /dev/null
+++ b/src/app/shared/form/form.component.html
@@ -0,0 +1,61 @@
+<div class="container-fluid">
+  <form [formGroup]="formGroup">
+
+    <ds-dynamic-form
+      [formId]="formId"
+      [formGroup]="formGroup"
+      [formModel]="formModel"
+      (dfBlur)="onBlur($event)"
+      (dfChange)="onChange($event)"
+      (dfFocus)="onFocus($event)">
+
+      <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
+
+        <!--Array with repeteable items-->
+        <div *ngIf="!context.notRepeteable"
+             class="col-xs-2 d-flex flex-column justify-content-sm-center align-items-end mt-3">
+          <div class="btn-group" role="group" aria-label="Basic example">
+            <button type="button" class="btn btn-secondary"
+                    [disabled]="isItemReadOnly(context, index)"
+                    (click)="insertItem($event, group.context, group.index + 1)">
+              <i class="fa fa-plus" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="btn btn-secondary"
+                    (click)="removeItem($event, context, index)"
+                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+              <i class="fa fa-trash" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+
+        <!--Array with non repeteable items - Only delete button-->
+        <div *ngIf="context.notRepeteable && group.context.groups.length > 1"
+             class="col-xs-2 d-flex flex-column justify-content-sm-center align-items-end mt-3">
+          <div class="btn-group" role="group" aria-label="Basic example">
+            <button type="button" class="btn btn-secondary"
+                    (click)="removeItem($event, context, index)"
+                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+              <i class="fa fa-trash" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+    </ds-dynamic-form>
+
+    <div *ngIf="displaySubmit">
+      <hr>
+      <div class="form-group row">
+
+        <div class="col text-right">
+          <button type="reset" class="btn btn-default" (click)="reset()">{{'form.cancel' | translate}}</button>
+          <button type="submit" class="btn btn-primary" (click)="onSubmit($event)"
+                  [disabled]="!(isValid() | async)">{{'form.submit' | translate}}
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </form>
+
+</div>
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss
new file mode 100644
index 0000000000..0f8145f262
--- /dev/null
+++ b/src/app/shared/form/form.component.scss
@@ -0,0 +1,23 @@
+@import "../../../styles/_variables.scss";
+
+.ds-form-input-addon {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.ds-form-input-btn {
+  border: $input-btn-border-width solid $input-border-color;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}
+
+.ds-form-input-btn:focus {
+  box-shadow: none !important;
+}
+
+.ds-form-input-value {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
new file mode 100644
index 0000000000..a0489a5ab8
--- /dev/null
+++ b/src/app/shared/form/form.component.spec.ts
@@ -0,0 +1,175 @@
+// Load the implementations that should be tested
+import { CommonModule } from '@angular/common';
+
+import {
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  DebugElement
+} from '@angular/core';
+
+import {
+  async,
+  ComponentFixture,
+  inject,
+  TestBed,
+} from '@angular/core/testing';
+
+import { StoreModule } from '@ngrx/store';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import Spy = jasmine.Spy;
+
+import { FormComponent } from './form.component';
+import { FormService } from './form.service';
+import { DynamicFormControlModel, DynamicFormValidationService, DynamicInputModel } from '@ng-dynamic-forms/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilderService } from './builder/form-builder.service';
+import { SubmissionFormsConfigService } from '../../core/config/submission-forms-config.service';
+import { ResponseCacheService } from '../../core/cache/response-cache.service';
+import { RequestService } from '../../core/data/request.service';
+import { ObjectCacheService } from '../../core/cache/object-cache.service';
+import { Observable } from 'rxjs/Observable';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: { template: html }
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+export const TEST_FORM_MODEL = [
+
+  new DynamicInputModel(
+    {
+      id: 'dc_title',
+      label: 'Title',
+      placeholder: 'Title',
+      validators: {
+        required: null
+      },
+      errorMessages: {
+        required: 'You must enter a main title for this item.'
+      }
+    }
+  ),
+
+  new DynamicInputModel(
+    {
+      id: 'dc_title_alternative',
+      label: 'Other Titles',
+      placeholder: 'Other Titles',
+    }
+  ),
+
+  new DynamicInputModel(
+    {
+      id: 'dc_publisher',
+      label: 'Publisher',
+      placeholder: 'Publisher',
+    }
+  ),
+
+  new DynamicInputModel(
+    {
+      id: 'dc_identifier_citation',
+      label: 'Citation',
+      placeholder: 'Citation',
+    }
+  ),
+
+  new DynamicInputModel(
+    {
+      id: 'dc_identifier_issn',
+      label: 'Identifiers',
+      placeholder: 'Identifiers',
+    }
+  ),
+];
+
+export const TEST_FORM_GROUP = {
+  dc_title: new FormControl(),
+  dc_title_alternative: new FormControl(),
+  dc_publisher: new FormControl(),
+  dc_identifier_citation: new FormControl(),
+  dc_identifier_issn: new FormControl()
+}
+
+describe('Form component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+  const formServiceStub = {
+    getFormData: (formId) => Observable.of([])
+  }
+  const formBuilderServiceStub = {
+    createFormGroup: (formModel) => new FormGroup(TEST_FORM_GROUP)
+  }
+  const submissionFormsConfigServiceStub = { }
+
+  // async beforeEach
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserModule,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        StoreModule.forRoot({}),
+        NgbModule.forRoot(),
+      ],
+      declarations: [
+        FormComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        FormComponent,
+        { provide: FormService, useValue: formServiceStub },
+        { provide: FormBuilderService, useValue: formBuilderServiceStub },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-form #formRef="formComponent"
+               [formId]="formId"
+               [formModel]="formModel"
+               [displaySubmit]="false"></ds-form>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+
+  });
+
+  it('should create Form Component', inject([FormComponent], (app: FormComponent) => {
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  public formId;
+  public formModel: DynamicFormControlModel[];
+
+  constructor() {
+    this.formId = 'testForm';
+    this.formModel = TEST_FORM_MODEL;
+  }
+
+}
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
new file mode 100644
index 0000000000..47258315e2
--- /dev/null
+++ b/src/app/shared/form/form.component.ts
@@ -0,0 +1,274 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+
+import {
+  DynamicFormArrayModel,
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+  DynamicFormGroupModel,
+} from '@ng-dynamic-forms/core';
+import { Store } from '@ngrx/store';
+
+import { AppState } from '../../app.reducer';
+import { FormChangeAction, FormInitAction, FormRemoveAction, FormStatusChangeAction } from './form.actions';
+import { FormBuilderService } from './builder/form-builder.service';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { hasValue, isNotNull, isNull } from '../empty.util';
+import { FormService } from './form.service';
+import { formObjectFromIdSelector } from './selectors';
+import { FormEntry, FormError } from './form.reducers';
+import { isEmpty } from 'lodash';
+
+/**
+ * The default form component.
+ */
+@Component({
+  exportAs: 'formComponent',
+  selector: 'ds-form',
+  styleUrls: ['form.component.scss'],
+  templateUrl: 'form.component.html',
+})
+export class FormComponent implements OnDestroy, OnInit {
+
+  private formValid: boolean;
+
+  /**
+   * A boolean that indicate if to display form's submit and cancel buttons
+   */
+  @Input() displaySubmit = true;
+
+  /**
+   * The form unique ID
+   */
+  @Input() formId: string;
+
+  /**
+   * An array of DynamicFormControlModel type
+   */
+  @Input() formModel: DynamicFormControlModel[];
+  @Input() parentFormModel: DynamicFormGroupModel | DynamicFormGroupModel[];
+  @Input() formGroup: FormGroup;
+
+  /* tslint:disable:no-output-rename */
+  @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output('dfFocus') focus: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  /* tslint:enable:no-output-rename */
+  @Output() addArrayItem: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+  @Output() removeArrayItem: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+
+  /**
+   * An event fired when form is valid and submitted .
+   * Event's payload equals to the form content.
+   */
+  @Output() submit: EventEmitter<Observable<any>> = new EventEmitter<Observable<any>>();
+
+  /**
+   * An object of FormGroup type
+   */
+  // public formGroup: FormGroup;
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  private subs: Subscription[] = [];
+
+  constructor(private formService: FormService,
+              protected changeDetectorRef: ChangeDetectorRef,
+              private formBuilderService: FormBuilderService,
+              private store: Store<AppState>) {
+  }
+
+  /**
+   * Method provided by Angular. Invoked after the view has been initialized.
+   */
+
+  /*ngAfterViewChecked(): void {
+    this.subs.push(this.formGroup.valueChanges
+      .filter((formGroup) => this.formGroup.dirty)
+      .subscribe(() => {
+        // Dispatch a FormChangeAction if the user has changed the value in the UI
+        this.store.dispatch(new FormChangeAction(this.formId, this.formGroup.value));
+        this.formGroup.markAsPristine();
+      }));
+  }*/
+
+  private getFormGroup(): FormGroup {
+    if (!!this.parentFormModel) {
+      return this.formGroup.parent as FormGroup;
+    }
+
+    return this.formGroup;
+  }
+
+  private getFormGroupValue() {
+    return this.getFormGroup().value;
+  }
+
+  private getFormGroupValidStatus() {
+    return this.getFormGroup().valid;
+  }
+
+  /**
+   * Method provided by Angular. Invoked after the constructor
+   */
+  ngOnInit() {
+    if (!this.formGroup) {
+      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    } else {
+      this.formModel.forEach((model) => {
+        this.formBuilderService.addFormGroupControl(this.formGroup, this.parentFormModel, model);
+      });
+    }
+
+    this.store.dispatch(new FormInitAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel), this.getFormGroupValidStatus()));
+
+    // TODO: take a look to the following method:
+    // this.keepSync();
+
+    this.formValid = this.getFormGroupValidStatus();
+
+    this.subs.push(this.formGroup.statusChanges
+      .filter((currentStatus) => this.formValid !== this.getFormGroupValidStatus())
+      .subscribe((currentStatus) => {
+        // Dispatch a FormStatusChangeAction if the form status has changed
+        this.store.dispatch(new FormStatusChangeAction(this.formId, this.getFormGroupValidStatus()));
+        this.formValid = this.getFormGroupValidStatus();
+      }));
+
+    this.subs.push(
+      this.store.select(formObjectFromIdSelector(this.formId))
+        .filter((formState: FormEntry) => !!formState && !isEmpty(formState.errors))
+        .map((formState) => formState.errors)
+        .distinctUntilChanged()
+        .delay(100) // this terrible delay is here to prevent the detection change error
+        .subscribe((errors: FormError[]) => {
+          const {formGroup, formModel} = this;
+
+          errors.forEach((error: FormError) => {
+            const {fieldId} = error;
+            let field: AbstractControl;
+            if (!!this.parentFormModel) {
+              field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel);
+            } else {
+              field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel);
+            }
+
+            if (field) {
+              const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
+              this.formService.addErrorToField(field, model, error.message);
+            }
+          });
+
+          this.changeDetectorRef.detectChanges();
+        })
+    );
+  }
+
+  /**
+   * Method provided by Angular. Invoked when the instance is destroyed
+   */
+  ngOnDestroy() {
+    this.store.dispatch(new FormRemoveAction(this.formId));
+    this.subs
+      .filter((sub) => hasValue(sub))
+      .forEach((sub) => sub.unsubscribe());
+  }
+
+  /**
+   * Method to check if the form status is valid or not
+   */
+  public isValid(): Observable<boolean> {
+    return this.formService.isValid(this.formId)
+  }
+
+  /**
+   * Method to keep synchronized form controls values with form state
+   */
+  private keepSync() {
+    this.subs.push(this.formService.getFormData(this.formId)
+      .subscribe((stateFormData) => {
+        if (!Object.is(stateFormData, this.formGroup.value) && this.formGroup) {
+          this.formGroup.setValue(stateFormData);
+        }
+      }));
+  }
+
+  onBlur(event) {
+    this.blur.emit(event);
+  }
+
+  onFocus(event) {
+    this.focus.emit(event);
+  }
+
+  onChange(event) {
+    const action: FormChangeAction = new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel));
+
+    this.store.dispatch(action);
+    this.formGroup.markAsPristine();
+
+    this.change.emit(event);
+    const control: FormControl = event.control;
+
+    control.setErrors(null);
+  }
+
+  /**
+   * Method called on submit.
+   * Emit a new submit Event whether the form is valid, mark fields with error otherwise
+   */
+  onSubmit() {
+    if (this.getFormGroupValidStatus()) {
+      this.submit.emit(this.formService.getFormData(this.formId));
+    } else {
+      this.formService.validateAllFormFields(this.formGroup);
+    }
+  }
+
+  /**
+   * Method to reset form fields
+   */
+  reset() {
+    this.formGroup.reset();
+  }
+
+  isItemReadOnly(arrayContext: DynamicFormArrayModel, index: number): boolean {
+    const context = arrayContext.groups[index];
+    const model = context.group[0] as any;
+    return model.readOnly;
+  }
+
+  removeItem($event, arrayContext: DynamicFormArrayModel, index: number) {
+    const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
+    this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
+    this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
+    this.store.dispatch(new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel)));
+  }
+
+  insertItem($event, arrayContext: DynamicFormArrayModel, index: number) {
+    const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
+    this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
+    this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
+    this.store.dispatch(new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel)));
+  }
+
+  protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent {
+    const context = arrayContext.groups[index];
+    const itemGroupModel = context.context;
+    let group = this.formGroup.get(itemGroupModel.id) as FormGroup;
+    if (isNull(group)) {
+      for (const key of Object.keys(this.formGroup.controls)) {
+        group = this.formGroup.controls[key].get(itemGroupModel.id) as FormGroup;
+        if (isNotNull(group)) {
+          break;
+        }
+      }
+    }
+    const model = context.group[0] as DynamicFormControlModel;
+    const control = group.controls[index] as FormControl;
+    return {$event, context, control, group, model, type};
+  }
+}
diff --git a/src/app/shared/form/form.effects.ts b/src/app/shared/form/form.effects.ts
new file mode 100644
index 0000000000..078f658300
--- /dev/null
+++ b/src/app/shared/form/form.effects.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+
+@Injectable()
+export class FormEffects {
+
+  constructor(private actions$: Actions) {
+
+  }
+
+}
diff --git a/src/app/shared/form/form.reducers.ts b/src/app/shared/form/form.reducers.ts
new file mode 100644
index 0000000000..04d7d28d85
--- /dev/null
+++ b/src/app/shared/form/form.reducers.ts
@@ -0,0 +1,179 @@
+import {
+  FormAction, FormActionTypes, FormAddError, FormChangeAction, FormInitAction, FormRemoveAction,
+  FormStatusChangeAction
+} from './form.actions';
+import { hasValue } from '../empty.util';
+import { uniqWith, isEqual } from 'lodash';
+
+export interface FormError {
+  message: string;
+  fieldId: string;
+}
+
+export interface FormEntry {
+  data: any;
+  valid: boolean;
+  errors: FormError[];
+}
+
+export interface FormState {
+  [formId: string]: FormEntry;
+}
+
+const initialState: FormState = Object.create(null);
+
+export function formReducer(state = initialState, action: FormAction): FormState {
+  switch (action.type) {
+
+    case FormActionTypes.FORM_INIT: {
+      return initForm(state, action as FormInitAction);
+    }
+
+    case FormActionTypes.FORM_CHANGE: {
+      return changeDataForm(state, action as FormChangeAction);
+    }
+
+    case FormActionTypes.FORM_REMOVE: {
+      return removeForm(state, action as FormRemoveAction);
+    }
+
+    case FormActionTypes.FORM_STATUS_CHANGE: {
+      return changeStatusForm(state, action as FormStatusChangeAction);
+    }
+
+    case FormActionTypes.FORM_ADD_ERROR: {
+      return addFormErrors(state, action as FormAddError)
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
+
+function addFormErrors(state: FormState, action: FormAddError) {
+  const formId = action.payload.formId;
+  if (hasValue(state[formId])) {
+    const error: FormError = {
+      fieldId: action.payload.fieldId,
+      message: action.payload.errorMessage
+    };
+
+    return Object.assign({}, state, {
+      [ formId ]: {
+        data: state[formId].data,
+        valid: state[formId].valid,
+        errors: state[formId].errors ? uniqWith(state[formId].errors.concat(error), isEqual) : [].concat(error),
+      }
+    });
+  } else {
+    return state;
+  }
+}
+
+/**
+ * Init form state.
+ *
+ * @param state
+ *    the current state
+ * @param action
+ *    an FormInitAction
+ * @return FormState
+ *    the new state, with the form initialized.
+ */
+function initForm(state: FormState, action: FormInitAction): FormState {
+  if (!hasValue(state[ action.payload.formId ])) {
+    return Object.assign({}, state, {
+      [ action.payload.formId ]: {
+        data: action.payload.formData,
+        valid: action.payload.valid
+      }
+    });
+  } else {
+    const newState = Object.assign({}, state);
+    newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
+        data: action.payload.formData,
+        valid: action.payload.valid
+      }
+    );
+    return newState;
+  }
+}
+
+/**
+ * Set form data.
+ *
+ * @param state
+ *    the current state
+ * @param action
+ *    an FormChangeAction
+ * @return FormState
+ *    the new state, with the data changed.
+ */
+function changeDataForm(state: FormState, action: FormChangeAction): FormState {
+  if (!hasValue(state[ action.payload.formId ])) {
+    return Object.assign({}, state, {
+      [ action.payload.formId ]: {
+        data: action.payload.formData,
+        valid: state[ action.payload.formId ].valid
+      }
+    });
+  } else {
+    const newState = Object.assign({}, state);
+    newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
+        data: action.payload.formData,
+        valid: state[ action.payload.formId ].valid
+      }
+    );
+    return newState;
+  }
+}
+
+/**
+ * Set form status.
+ *
+ * @param state
+ *    the current state
+ * @param action
+ *    an FormStatusChangeAction
+ * @return FormState
+ *    the new state, with the status changed.
+ */
+function changeStatusForm(state: FormState, action: FormStatusChangeAction): FormState {
+  if (!hasValue(state[ action.payload.formId ])) {
+    return Object.assign({}, state, {
+      [ action.payload.formId ]: {
+        data: state[ action.payload.formId ].data,
+        valid: action.payload.valid
+      }
+    });
+  } else {
+    const newState = Object.assign({}, state);
+    newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
+        data: state[ action.payload.formId ].data,
+        valid: action.payload.valid
+      }
+    );
+    return newState;
+  }
+}
+
+/**
+ * Remove form state.
+ *
+ * @param state
+ *    the current state
+ * @param action
+ *    an FormRemoveAction
+ * @return FormState
+ *    the new state, with the form initialized.
+ */
+function removeForm(state: FormState, action: FormRemoveAction): FormState {
+  if (hasValue(state[ action.payload.formId ])) {
+    const newState = Object.assign({}, state);
+    delete newState[ action.payload.formId ];
+    return newState;
+  } else {
+    return state;
+  }
+}
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
new file mode 100644
index 0000000000..9d7b18acbc
--- /dev/null
+++ b/src/app/shared/form/form.service.ts
@@ -0,0 +1,118 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs/Observable';
+import { Store } from '@ngrx/store';
+
+import { AppState } from '../../app.reducer';
+import { formObjectFromIdSelector } from './selectors';
+import { FormBuilderService } from './builder/form-builder.service';
+import { DynamicFormControlModel, DynamicFormGroupModel } from '@ng-dynamic-forms/core';
+import { isNotEmpty, isNotUndefined } from '../empty.util';
+import { find, uniqueId } from 'lodash';
+import { FormChangeAction } from './form.actions';
+
+@Injectable()
+export class FormService {
+
+  constructor(private formBuilderService: FormBuilderService,
+              private store: Store<AppState>) {
+  }
+
+  /**
+   * Method to retrieve form's status from state
+   */
+  public isValid(formId: string): Observable<boolean> {
+    return this.store.select(formObjectFromIdSelector(formId))
+      .filter((state) => isNotUndefined(state))
+      .map((state) => state.valid)
+      .distinctUntilChanged();
+  }
+
+  /**
+   * Method to retrieve form's data from state
+   */
+  public getFormData(formId: string): Observable<FormControl> {
+    return this.store.select(formObjectFromIdSelector(formId))
+      .filter((state) => isNotUndefined(state))
+      .map((state) => state.data)
+      .distinctUntilChanged();
+  }
+
+  /**
+   * Method to retrieve form's data from state
+   */
+  public isFormInitialized(formId: string): Observable<boolean> {
+    return this.store.select(formObjectFromIdSelector(formId))
+      .distinctUntilChanged()
+      .map((state) => isNotUndefined(state));
+  }
+
+  public getUniqueId(formId): string {
+    return uniqueId() + '_' + formId;
+  }
+
+  /**
+   * Method to validate form's fields
+   */
+  public validateAllFormFields(formGroup: FormGroup) {
+    Object.keys(formGroup.controls).forEach((field) => {
+      const control = formGroup.get(field);
+      if (control instanceof FormControl) {
+        control.markAsTouched({onlySelf: true});
+      } else if (control instanceof FormGroup) {
+        this.validateAllFormFields(control);
+      }
+    });
+  }
+
+  public setValue(formGroup: FormGroup, fieldModel: DynamicFormControlModel, fieldId: string, value: any) {
+    if (isNotEmpty(fieldModel)) {
+      const path = this.formBuilderService.getPath(fieldModel);
+      const fieldControl = formGroup.get(path);
+      fieldControl.markAsDirty();
+      fieldControl.setValue(value);
+    }
+  }
+
+  public addErrorToField(field: AbstractControl, model: DynamicFormControlModel, message: string) {
+    const errorFound = !!(find(field.errors, (err) => err === message));
+
+    // search for the same error in the formControl.errors property
+    if (!errorFound) {
+      const errorKey = uniqueId('error-'); // create a single key for the error
+      const error = {}; // create the error object
+
+      error[errorKey] = message; // assign message
+
+      // if form control model has errorMessages object, create it
+      if (!model.errorMessages) {
+        model.errorMessages = {};
+      }
+
+      // put the error in the form control model
+      model.errorMessages[errorKey] = message;
+
+      // Use correct error messages from the model
+      const lastArray = message.split('.');
+      if (lastArray && lastArray.length > 0) {
+        const last = lastArray[lastArray.length - 1];
+        const modelMsg = model.errorMessages[last];
+        if (modelMsg && modelMsg.length > 0) {
+          model.errorMessages[errorKey] = modelMsg;
+        }
+      }
+
+      // add the error in the form control
+      field.setErrors(error);
+
+      // formGroup.markAsDirty();
+      field.markAsTouched();
+    }
+  }
+
+  public resetForm(formGroup: FormGroup, groupModel: DynamicFormControlModel[], formId: string) {
+    this.formBuilderService.clearAllModelsValue(groupModel);
+    formGroup.reset();
+    this.store.dispatch(new FormChangeAction(formId, formGroup.value));
+  }
+}
diff --git a/src/app/shared/form/selectors.ts b/src/app/shared/form/selectors.ts
new file mode 100644
index 0000000000..a4f27945ef
--- /dev/null
+++ b/src/app/shared/form/selectors.ts
@@ -0,0 +1,10 @@
+import { createSelector, MemoizedSelector, Selector } from '@ngrx/store';
+
+import { AppState } from '../../app.reducer';
+import { FormEntry, FormState } from './form.reducers';
+
+export const formStateSelector = (state: AppState) => state.forms;
+
+export function formObjectFromIdSelector(formId: string): MemoizedSelector<AppState, FormEntry> {
+  return createSelector(formStateSelector, (forms: FormState) => forms[formId]);
+}
diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html
new file mode 100644
index 0000000000..5eb45a0bfb
--- /dev/null
+++ b/src/app/shared/number-picker/number-picker.component.html
@@ -0,0 +1,33 @@
+<div class="d-flex flex-column align-items-center justify-content-around">
+    <button
+      type="button"
+      class="btn btn-link"
+      [disabled]="disabled"
+      (click)="increment()">
+      <span class="chevron"></span>
+      <span class="sr-only">Increment</span>
+    </button>
+    <input
+      type="text"
+      class="form-control"
+      maxlength="{{size}}"
+      size="{{size}}"
+      placeholder="{{placeholder}}"
+      [name]="name"
+      [(ngModel)]="value"
+      (change)="update($event)"
+      (focus)="onFocus()"
+      [readonly]="disabled"
+      [disabled]="disabled"
+      [ngClass]="{'is-invalid': invalid}"
+      aria-label="name"
+    >
+    <button
+      type="button"
+      class="btn btn-link"
+      [disabled]="disabled"
+      (click)="decrement()">
+      <span class="chevron bottom"></span>
+      <span class="sr-only">Decrement</span>
+    </button>
+</div>
diff --git a/src/app/shared/number-picker/number-picker.component.scss b/src/app/shared/number-picker/number-picker.component.scss
new file mode 100644
index 0000000000..33ed45b295
--- /dev/null
+++ b/src/app/shared/number-picker/number-picker.component.scss
@@ -0,0 +1,44 @@
+.ngb-tp {
+  display: flex;
+  align-items: center;
+}
+.ngb-tp-hour, .ngb-tp-minute, .ngb-tp-second, .ngb-tp-meridian {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+.ngb-tp-spacer {
+  width: 1em;
+  text-align: center;
+}
+.chevron::before {
+  border-style: solid;
+  border-width: 0.29em 0.29em 0 0;
+  content: '';
+  display: inline-block;
+  height: 0.69em;
+  left: 0.05em;
+  position: relative;
+  top: 0.15em;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  vertical-align: middle;
+  width: 0.71em;
+}
+.chevron.bottom:before {
+  top: -.3em;
+  -webkit-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+input {
+  text-align: center;
+  display: inline-block;
+  max-width: 80px !important;
+}
+
+//.error {
+//  border-color: red;
+//}
diff --git a/src/app/shared/number-picker/number-picker.component.ts b/src/app/shared/number-picker/number-picker.component.ts
new file mode 100644
index 0000000000..67b5107b79
--- /dev/null
+++ b/src/app/shared/number-picker/number-picker.component.ts
@@ -0,0 +1,147 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, SimpleChanges, } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'ds-number-picker',
+  styleUrls: ['./number-picker.component.scss'],
+  templateUrl: './number-picker.component.html',
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: NumberPickerComponent, multi: true}
+  ],
+})
+
+export class NumberPickerComponent implements OnInit, ControlValueAccessor {
+  @Output()
+  selected = new EventEmitter<number>();
+  @Output()
+  remove = new EventEmitter<number>();
+  @Output()
+  change = new EventEmitter<any>();
+
+  @Input()
+  step: number;
+  @Input()
+  min: number;
+  @Input()
+  max: number;
+  @Input()
+  size: number;
+  @Input()
+  placeholder: string;
+  @Input()
+  name: string;
+  @Input()
+  disabled: boolean;
+  @Input()
+  invalid: boolean;
+  @Input()
+  value: number;
+  lastValue: number;
+
+  constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {
+  }
+
+  ngOnInit() {
+    // this.lastValue = this.value;
+    this.step = this.step || 1;
+    this.min = this.min || 0;
+    this.max = this.max || 100;
+    this.disabled = this.disabled || false;
+    this.invalid = this.invalid || false;
+    this.cd.detectChanges();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (this.value) {
+      if (changes.max) {
+        // When the user select a month with < # of days
+        this.value = this.value > this.max ? this.max : this.value;
+      }
+
+    } else if (changes.value && changes.value.currentValue === null) {
+      // When the user delete the inserted value
+        this.value = null;
+    } else if (changes.invalid) {
+      this.invalid = changes.invalid.currentValue;
+    }
+  }
+
+  increment(reverse?: boolean) {
+    // First after init
+    if (!this.value) {
+      this.value = this.lastValue;
+    } else {
+      this.lastValue = this.value;
+
+      let newValue = this.value;
+      if (reverse) {
+        newValue -= this.step;
+      } else {
+        newValue += this.step;
+      }
+
+      if (newValue >= this.min && newValue <= this.max) {
+        this.value = newValue;
+      } else {
+        if (newValue > this.max) {
+          this.value = this.min;
+        } else {
+          this.value = this.max;
+        }
+      }
+    }
+
+    this.emitChange();
+  }
+
+  decrement() {
+    this.increment(true);
+  }
+
+  update(event) {
+    try {
+      const i = Number.parseInt(event.target.value);
+
+      if (i >= this.min && i <= this.max) {
+        this.value = i;
+        this.emitChange();
+      } else if (event.target.value === null || event.target.value === '') {
+        this.value = null;
+        this.emitChange();
+      } else {
+        this.value = this.lastValue;
+        this.emitChange();
+      }
+    } catch (e) {
+      this.value = this.lastValue;
+      this.emitChange();
+    }
+  }
+
+  onFocus() {
+    if (this.value) {
+      this.lastValue = this.value;
+    }
+  }
+
+  writeValue(value) {
+    if (this.lastValue) {
+      this.lastValue = this.value;
+      this.value = value;
+    } else {
+      // First init
+      this.lastValue = value;
+    }
+  }
+
+  registerOnChange(fn) {
+    // this.change = fn;
+  }
+
+  registerOnTouched(fn) {
+  }
+
+  emitChange() {
+    this.change.emit({field: this.name, value: this.value});
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index c78c218fa9..81503f2245 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -3,15 +3,20 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerModule, NgbModule, NgbTimepickerModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { TranslateModule } from '@ngx-translate/core';
 
 import { NgxPaginationModule } from 'ngx-pagination';
 
+import { FileUploadModule } from 'ng2-file-upload';
+
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
 import { EnumKeysPipe } from './utils/enum-keys-pipe';
 import { FileSizePipe } from './utils/file-size-pipe';
 import { SafeUrlPipe } from './utils/safe-url-pipe';
+import { ConsolePipe } from './utils/console.pipe';
 
 import { CollectionListElementComponent } from './object-list/collection-list-element/collection-list-element.component';
 import { CommunityListElementComponent } from './object-list/community-list-element/community-list-element.component';
@@ -20,11 +25,11 @@ import { SearchResultListElementComponent } from './object-list/search-result-li
 import { WrapperListElementComponent } from './object-list/wrapper-list-element/wrapper-list-element.component';
 import { ObjectListComponent } from './object-list/object-list.component';
 
-import { CollectionGridElementComponent} from './object-grid/collection-grid-element/collection-grid-element.component'
-import { CommunityGridElementComponent} from './object-grid/community-grid-element/community-grid-element.component'
-import { ItemGridElementComponent} from './object-grid/item-grid-element/item-grid-element.component'
-import { AbstractListableElementComponent} from './object-collection/shared/object-collection-element/abstract-listable-element.component'
-import { WrapperGridElementComponent} from './object-grid/wrapper-grid-element/wrapper-grid-element.component'
+import { CollectionGridElementComponent} from './object-grid/collection-grid-element/collection-grid-element.component';
+import { CommunityGridElementComponent} from './object-grid/community-grid-element/community-grid-element.component';
+import { ItemGridElementComponent} from './object-grid/item-grid-element/item-grid-element.component';
+import { AbstractListableElementComponent} from './object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { WrapperGridElementComponent} from './object-grid/wrapper-grid-element/wrapper-grid-element.component';
 import { ObjectGridComponent } from './object-grid/object-grid.component';
 import { ObjectCollectionComponent } from './object-collection/object-collection.component';
 import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
@@ -32,7 +37,6 @@ import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-head
 import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
 import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
-
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
@@ -40,21 +44,47 @@ import { SearchResultGridElementComponent } from './object-grid/search-result-gr
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
+import { FormComponent } from './form/form.component';
+import { DsDynamicTypeaheadComponent } from './form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component';
+import { DsDynamicScrollableDropdownComponent } from './form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
+import { DsDynamicFormControlComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component';
+import { DsDynamicFormComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form.component';
+import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { TextMaskModule } from 'angular2-text-mask';
 import { DragClickDirective } from './utils/drag-click.directive';
 import { TruncatePipe } from './utils/truncate.pipe';
 import { TruncatableComponent } from './truncatable/truncatable.component';
 import { TruncatableService } from './truncatable/truncatable.service';
 import { TruncatablePartComponent } from './truncatable/truncatable-part/truncatable-part.component';
+import { UploaderComponent } from './uploader/uploader.component';
+import { ChipsComponent } from './chips/chips.component';
+import { DsDynamicTagComponent } from './form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component';
+import { DsDynamicListComponent } from './form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component';
+import { DsDynamicGroupComponent } from './form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components';
+import { SortablejsModule } from 'angular-sortablejs';
+import { NumberPickerComponent } from './number-picker/number-picker.component';
+import { DsDatePickerComponent } from './form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component';
+import { DsDynamicLookupComponent } from './form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
   CommonModule,
+  SortablejsModule,
+  DynamicFormsCoreModule,
+  DynamicFormsNGBootstrapUIModule,
+  FileUploadModule,
   FormsModule,
+  InfiniteScrollModule,
   NgbModule,
+  NgbDatepickerModule,
+  NgbTimepickerModule,
+  NgbTypeaheadModule,
   NgxPaginationModule,
   ReactiveFormsModule,
   RouterModule,
-  TranslateModule
+  TranslateModule,
+  TextMaskModule
 ];
 
 const PIPES = [
@@ -62,16 +92,29 @@ const PIPES = [
   EnumKeysPipe,
   FileSizePipe,
   SafeUrlPipe,
-  TruncatePipe
+  TruncatePipe,
+  ConsolePipe
 ];
 
 const COMPONENTS = [
   // put shared components here
+  ChipsComponent,
   ComcolPageContentComponent,
   ComcolPageHeaderComponent,
   ComcolPageLogoComponent,
+  DsDynamicFormComponent,
+  DsDynamicFormControlComponent,
+  DsDynamicListComponent,
+  DsDynamicLookupComponent,
+  DsDynamicScrollableDropdownComponent,
+  DsDynamicTagComponent,
+  DsDynamicTypeaheadComponent,
+  DsDynamicGroupComponent,
+  DsDatePickerComponent,
   ErrorComponent,
+  FormComponent,
   LoadingComponent,
+  NumberPickerComponent,
   ObjectListComponent,
   AbstractListableElementComponent,
   WrapperListElementComponent,
@@ -82,6 +125,7 @@ const COMPONENTS = [
   SearchFormComponent,
   ThumbnailComponent,
   GridThumbnailComponent,
+  UploaderComponent,
   WrapperListElementComponent,
   ViewModeSwitchComponent,
   TruncatableComponent,
diff --git a/src/app/shared/uploader/uploader-options.model.ts b/src/app/shared/uploader/uploader-options.model.ts
new file mode 100644
index 0000000000..0bd6412b17
--- /dev/null
+++ b/src/app/shared/uploader/uploader-options.model.ts
@@ -0,0 +1,13 @@
+
+export class UploaderOptions {
+  /**
+   * URL of the REST endpoint for file upload.
+   */
+  url: string;
+
+  authToken: string;
+
+  disableMultipart = false;
+
+  itemAlias: string;
+}
diff --git a/src/app/shared/uploader/uploader.component.html b/src/app/shared/uploader/uploader.component.html
new file mode 100644
index 0000000000..f01b1f7a78
--- /dev/null
+++ b/src/app/shared/uploader/uploader.component.html
@@ -0,0 +1,51 @@
+<div ng2FileDrop
+     *ngIf="enableDragOverDocument"
+     class="ds-document-drop-zone position-fixed h-100 w-100"
+     [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
+     [uploader]="uploader"
+     (fileOver)="fileOverDocument($event)">
+</div>
+<div *ngIf="(isOverDocumentDropZone | async)"
+     class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
+  <div class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
+    <p class="text-primary">{{dropOverDocumentMsg | translate}}</p>
+  </div>
+</div>
+<div [attr.id]="uploaderId" class="row">
+  <div class="col-md-12">
+    <div ng2FileDrop
+         [ngClass]="{'ds-base-drop-zone-file-over': (isOverBaseDropZone | async)}"
+         [uploader]="uploader"
+         (fileOver)="fileOverBase($event)"
+         class="well ds-base-drop-zone mt-1 mb-3 text-muted">
+      <p class="text-center m-0 pt-2" [hidden]="uploader?.queue?.length !== 0">
+        <span><i class="fa fa-cloud-upload" aria-hidden="true"></i> {{dropMsg | translate}} {{'uploader.or' | translate}}
+          <label class="btn btn-link m-0 p-0">
+            <input class="d-none" type="file" ng2FileSelect [uploader]="uploader" multiple  />
+            {{'uploader.browse' | translate}}
+          </label>
+        </span>
+      </p>
+      <div *ngIf="(isOverBaseDropZone | async) || uploader?.queue?.length !== 0">
+        <div class="m-1">
+          <div class="upload-item-top">
+            <span class="filename">{{'uploader.queue-lenght' | translate}}: {{ uploader?.queue?.length }} | {{ uploader?.queue[0]?.file.name }}</span>
+            <div class="btn-group btn-group-sm float-right" role="group">
+              <button type="button" class="btn btn-danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
+                <i class="fa fa-trash" aria-hidden="true"></i>
+              </button>
+            </div>
+            <span *ngIf="uploader.progress < 100" class="float-right mr-3">{{ uploader.progress }}%</span>
+            <span *ngIf="uploader.progress === 100" class="float-right mr-3">{{'uploader.processing' | translate}}...</span>
+          </div>
+          <div class="ds-base-drop-zone-progress clearfix mt-2">
+            <div role="progressbar"
+                 style="height: 5px; width: 0;"
+                 [ngStyle]="{ 'width': uploader.progress + '%' }"
+                 [ngClass]="{'progress-bar': true, 'bg-success progress-bar-striped progress-bar-animated': uploader.progress === 100}"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/uploader/uploader.component.scss b/src/app/shared/uploader/uploader.component.scss
new file mode 100644
index 0000000000..f0b54bfe15
--- /dev/null
+++ b/src/app/shared/uploader/uploader.component.scss
@@ -0,0 +1,40 @@
+@import '../../../styles/_variables.scss';
+
+.ds-base-drop-zone {
+  border: 2px dashed $gray-600;
+}
+
+/* Default class applied to drop zones on over */
+.ds-base-drop-zone-file-over {
+  border: 2px dashed map-get($theme-colors, primary);
+}
+
+.ds-base-drop-zone p {
+  height: 42px;
+}
+
+.ds-document-drop-zone {
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.ds-document-drop-zone-active {
+  z-index: 1025 !important;
+}
+
+.ds-document-drop-zone-inner {
+  background-color: rgba($white, 0.7);
+  z-index: 1021;
+  top: 0;
+  left: 0;
+}
+
+.ds-document-drop-zone-inner-content {
+  border: 4px dashed map-get($theme-colors, primary);
+  z-index: 1021;
+}
+
+.ds-document-drop-zone-inner-content p {
+  font-size: ($font-size-lg * 2.5);
+}
diff --git a/src/app/shared/uploader/uploader.component.ts b/src/app/shared/uploader/uploader.component.ts
new file mode 100644
index 0000000000..476ba510e0
--- /dev/null
+++ b/src/app/shared/uploader/uploader.component.ts
@@ -0,0 +1,168 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core'
+
+import { FileUploader } from 'ng2-file-upload';
+import { Observable } from 'rxjs/Observable';
+import { uniqueId } from 'lodash';
+import { ScrollToConfigOptions, ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
+
+import { UploaderOptions } from './uploader-options.model';
+import { isNotEmpty, isUndefined } from '../empty.util';
+import { UploaderService } from './uploader.service';
+
+@Component({
+  selector: 'ds-uploader',
+  templateUrl: 'uploader.component.html',
+  styleUrls: ['uploader.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated
+})
+
+export class UploaderComponent {
+
+  /**
+   * The message to show when drag files on the drop zone
+   */
+  @Input() dropMsg: string;
+
+  /**
+   * The message to show when drag files on the window document
+   */
+  @Input() dropOverDocumentMsg: string;
+
+  /**
+   * The message to show when drag files on the window document
+   */
+  @Input() enableDragOverDocument: boolean;
+
+  /**
+   * The function to call before an upload
+   */
+  @Input() onBeforeUpload: () => void;
+
+  /**
+   * Configuration for the ng2-file-upload component.
+   */
+  @Input() uploadFilesOptions: UploaderOptions;
+
+  /**
+   * The function to call when upload is completed
+   */
+  @Output() onCompleteItem: EventEmitter<any> = new EventEmitter<any>();
+
+  public uploader: FileUploader;
+  public uploaderId: string;
+  public isOverBaseDropZone = Observable.of(false);
+  public isOverDocumentDropZone = Observable.of(false);
+
+  @HostListener('window:dragover', ['$event'])
+  onDragOver(event: any) {
+
+    if (this.enableDragOverDocument && this.uploaderService.isAllowedDragOverPage()) {
+      // Show drop area on the page
+      event.preventDefault();
+      if ((event.target as any).tagName !== 'HTML') {
+        this.isOverDocumentDropZone = Observable.of(true);
+      }
+    }
+  }
+
+  constructor(private cdr: ChangeDetectorRef, private scrollToService: ScrollToService, private uploaderService: UploaderService) {
+  }
+
+  /**
+   * Method provided by Angular. Invoked after the constructor.
+   */
+  ngOnInit() {
+    this.uploaderId = 'ds-drag-and-drop-uploader' + uniqueId();
+    this.checkConfig(this.uploadFilesOptions);
+    this.uploader = new FileUploader({
+      url: this.uploadFilesOptions.url,
+      authToken: this.uploadFilesOptions.authToken,
+      disableMultipart: this.uploadFilesOptions.disableMultipart,
+      itemAlias: this.uploadFilesOptions.itemAlias,
+      removeAfterUpload: true,
+      autoUpload: true
+    });
+
+    if (isUndefined(this.enableDragOverDocument)) {
+      this.enableDragOverDocument = false;
+    }
+    if (isUndefined(this.dropMsg)) {
+      this.dropMsg = 'uploader.drag-message';
+    }
+    if (isUndefined(this.dropOverDocumentMsg)) {
+      this.dropOverDocumentMsg = 'uploader.drag-message';
+    }
+  }
+
+  ngAfterViewInit() {
+    // Maybe to remove: needed to avoid CORS issue with our temp upload server
+    this.uploader.onAfterAddingFile = ((item) => {
+      item.withCredentials = false;
+    });
+    this.uploader.onBeforeUploadItem = () => {
+      this.onBeforeUpload();
+      this.isOverDocumentDropZone = Observable.of(false);
+
+      // Move page target to the uploader
+      const config: ScrollToConfigOptions = {
+        target: this.uploaderId
+      };
+      this.scrollToService.scrollTo(config);
+    };
+    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
+      if (isNotEmpty(response)) {
+        const responsePath = JSON.parse(response);
+        this.onCompleteItem.emit(responsePath);
+      }
+    };
+    this.uploader.onProgressAll = () => this.onProgress();
+    this.uploader.onProgressItem = () => this.onProgress();
+  }
+
+  /**
+   * Called when files are dragged on the base drop area.
+   */
+  public fileOverBase(isOver: boolean): void {
+    this.isOverBaseDropZone = Observable.of(isOver);
+  }
+
+  /**
+   * Called when files are dragged on the window document drop area.
+   */
+  public fileOverDocument(isOver: boolean) {
+    if (!isOver) {
+      this.isOverDocumentDropZone = Observable.of(isOver);
+    }
+  }
+
+  private onProgress() {
+    this.cdr.detectChanges();
+  }
+
+  /**
+   * Ensure options passed contains the required properties.
+   *
+   * @param fileUploadOptions
+   *    The upload-files options object.
+   */
+  private checkConfig(fileUploadOptions: any) {
+    const required = ['url', 'authToken', 'disableMultipart', 'itemAlias'];
+    const missing = required.filter((prop) => {
+      return !((prop in fileUploadOptions) && fileUploadOptions[prop] !== '');
+    });
+    if (0 < missing.length) {
+      throw new Error('UploadFiles: Argument is missing the following required properties: ' + missing.join(', '));
+    }
+  }
+
+}
diff --git a/src/app/shared/uploader/uploader.service.ts b/src/app/shared/uploader/uploader.service.ts
new file mode 100644
index 0000000000..548de34f9c
--- /dev/null
+++ b/src/app/shared/uploader/uploader.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UploaderService {
+  private _overrideDragOverPage = false;
+
+  public overrideDragOverPage() {
+    this._overrideDragOverPage = true;
+  }
+
+  public allowDragOverPage() {
+    this._overrideDragOverPage = false;
+  }
+
+  public isAllowedDragOverPage(): boolean {
+    return !this._overrideDragOverPage;
+  }
+}
diff --git a/src/app/shared/utils/console.pipe.ts b/src/app/shared/utils/console.pipe.ts
new file mode 100644
index 0000000000..fc672a84ae
--- /dev/null
+++ b/src/app/shared/utils/console.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dsConsole'
+})
+export class ConsolePipe implements PipeTransform {
+  transform(value: any): string {
+    console.log(value);
+    return '';
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index bb571e8d6c..77cd9b1e71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -81,6 +81,14 @@
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0.tgz#8f2ae70db2fe1dcbf5e0acb49dc2b1bbba2be8d2"
 
+"@ng-dynamic-forms/core@5.4.7":
+  version "5.4.7"
+  resolved "https://registry.yarnpkg.com/@ng-dynamic-forms/core/-/core-5.4.7.tgz#203dffe4bb31a3599e906990ad9dc2b35714e37a"
+
+"@ng-dynamic-forms/ui-ng-bootstrap@5.4.7":
+  version "5.4.7"
+  resolved "https://registry.yarnpkg.com/@ng-dynamic-forms/ui-ng-bootstrap/-/ui-ng-bootstrap-5.4.7.tgz#66d037a226da96fe84c4dbac98e4dba859c551f8"
+
 "@ngrx/effects@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-5.1.0.tgz#cef84576b2d0333f19188aedfe156fd301bff70a"
@@ -122,6 +130,10 @@
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-2.0.1.tgz#aa67788e64bfa8652691a77b022b3b4031209113"
 
+"@nicky-lenaers/ngx-scroll-to@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@nicky-lenaers/ngx-scroll-to/-/ngx-scroll-to-0.6.0.tgz#6d2922f5765a472e3c86499d9e53df5ca210e637"
+
 "@types/acorn@^4.0.3":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.3.tgz#d1f3e738dde52536f9aad3d3380d14e448820afd"
@@ -421,12 +433,22 @@ angular-idle-preload@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/angular-idle-preload/-/angular-idle-preload-2.0.4.tgz#7b177c0f52918c090e5c345480b922297cd59a0d"
 
+angular-sortablejs@^2.5.0:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/angular-sortablejs/-/angular-sortablejs-2.5.2.tgz#ffd651e47cc93a191db4c023f617db3789fd9af5"
+
 angular2-template-loader@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/angular2-template-loader/-/angular2-template-loader-0.6.2.tgz#c0d44e90fff0fac95e8b23f043acda7fd1c51d7c"
   dependencies:
     loader-utils "^0.2.15"
 
+angular2-text-mask@8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/angular2-text-mask/-/angular2-text-mask-8.0.4.tgz#07e485746cfb9f27e710b27b2785eac4cc4871fc"
+  dependencies:
+    text-mask-core "^5.0.0"
+
 angulartics2@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/angulartics2/-/angulartics2-5.2.0.tgz#5bac82d4b6acf798b7db906488861e70b49fe04c"
@@ -5587,12 +5609,20 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
+ng2-file-upload@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.2.1.tgz#5563c5dfd6f43fbfbe815c206e343464a0a6a197"
+
 ngrx-store-freeze@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ngrx-store-freeze/-/ngrx-store-freeze-0.2.1.tgz#04fb29db33cafda0f2d6ea32adeaac4891b1b27b"
   dependencies:
     deep-freeze-strict "^1.1.1"
 
+ngx-infinite-scroll@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.8.2.tgz#9cc615c01fbb6307599453c9d9cfb5c1db4fd3e8"
+
 ngx-pagination@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/ngx-pagination/-/ngx-pagination-3.0.3.tgz#314145263613738d8c544da36cd8dacc5aa89a6f"
@@ -8151,6 +8181,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.7.0.tgz#80a2b2370abd568e1cec8c271131ef30a904fa28"
+
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -8590,6 +8624,14 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+text-mask-core@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/text-mask-core/-/text-mask-core-5.0.1.tgz#86db742bdfe3b4c383bb51a3b4ca342c86110639"
+
+text-mask-core@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/text-mask-core/-/text-mask-core-5.1.1.tgz#a7f65634e11236818fd36a92668e17bf9368f357"
+
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"

From a1146505643084af922da757a50b661c7df7013a Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 9 May 2018 19:23:09 +0200
Subject: [PATCH 02/41] fixes and adjustments

---
 src/app/core/core.module.ts                   | 12 +++++++++++
 .../data/config-response-parsing.service.ts   |  2 +-
 .../ds-dynamic-form-control.component.html    | 20 ++++++++++++-------
 .../ds-dynamic-form-control.component.ts      |  4 ++--
 .../date-picker.component.html}               |  0
 .../date-picker.component.scss}               |  0
 .../date-picker.component.ts}                 |  6 +++---
 .../date-picker.model.ts}                     |  0
 .../dynamic-group.component.html              |  0
 .../dynamic-group.component.scss              |  0
 .../dynamic-group.components.ts               |  1 -
 .../dynamic-group.model.ts                    |  0
 .../form/builder/form-builder.service.ts      |  8 ++++----
 .../form/builder/parsers/date-field-parser.ts |  4 ++--
 .../builder/parsers/group-field-parser.ts     |  2 +-
 .../shared/form/builder/parsers/row-parser.ts |  2 +-
 src/app/shared/form/form.component.html       |  1 +
 src/app/shared/form/form.component.ts         |  4 +++-
 src/app/shared/shared.module.ts               |  4 ++--
 webpack/webpack.server.js                     |  4 ++++
 20 files changed, 49 insertions(+), 25 deletions(-)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-date-picker/ds-date-picker.component.html => date-picker/date-picker.component.html} (100%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-date-picker/ds-date-picker.component.scss => date-picker/date-picker.component.scss} (100%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-date-picker/ds-date-picker.component.ts => date-picker/date-picker.component.ts} (96%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-date-picker/ds-date-picker.model.ts => date-picker/date-picker.model.ts} (100%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-dynamic-group => dynamic-group}/dynamic-group.component.html (100%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-dynamic-group => dynamic-group}/dynamic-group.component.scss (100%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-dynamic-group => dynamic-group}/dynamic-group.components.ts (99%)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-dynamic-group => dynamic-group}/dynamic-group.model.ts (100%)

diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 3ae9fd5407..e57f1b45c6 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
+import { DynamicFormLayoutService, DynamicFormService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 
 import { coreEffects } from './core.effects';
 import { coreReducers } from './core.reducers';
@@ -21,6 +22,8 @@ import { DebugResponseParsingService } from './data/debug-response-parsing.servi
 import { DSOResponseParsingService } from './data/dso-response-parsing.service';
 import { SearchResponseParsingService } from './data/search-response-parsing.service';
 import { DSpaceRESTv2Service } from './dspace-rest-v2/dspace-rest-v2.service';
+import { FormBuilderService } from '../shared/form/builder/form-builder.service';
+import { FormService } from '../shared/form/form.service';
 import { HostWindowService } from '../shared/host-window.service';
 import { ItemDataService } from './data/item-data.service';
 import { MetadataService } from './metadata/metadata.service';
@@ -39,6 +42,8 @@ import { RouteService } from '../shared/route.service';
 import { SubmissionDefinitionsConfigService } from './config/submission-definitions-config.service';
 import { SubmissionFormsConfigService } from './config/submission-forms-config.service';
 import { SubmissionSectionsConfigService } from './config/submission-sections-config.service';
+import { AuthorityService } from './integration/authority.service';
+import { IntegrationResponseParsingService } from './integration/integration-response-parsing.service';
 import { UUIDService } from './shared/uuid.service';
 import { HALEndpointService } from './shared/hal-endpoint.service';
 import { FacetValueResponseParsingService } from './data/facet-value-response-parsing.service';
@@ -66,6 +71,11 @@ const PROVIDERS = [
   CollectionDataService,
   DSOResponseParsingService,
   DSpaceRESTv2Service,
+  DynamicFormLayoutService,
+  DynamicFormService,
+  DynamicFormValidationService,
+  FormBuilderService,
+  FormService,
   HALEndpointService,
   HostWindowService,
   ItemDataService,
@@ -89,6 +99,8 @@ const PROVIDERS = [
   SubmissionDefinitionsConfigService,
   SubmissionFormsConfigService,
   SubmissionSectionsConfigService,
+  AuthorityService,
+  IntegrationResponseParsingService,
   UploaderService,
   UUIDService,
   { provide: NativeWindowService, useFactory: NativeWindowFactory }
diff --git a/src/app/core/data/config-response-parsing.service.ts b/src/app/core/data/config-response-parsing.service.ts
index 033c9ddc68..dfbbfc50c7 100644
--- a/src/app/core/data/config-response-parsing.service.ts
+++ b/src/app/core/data/config-response-parsing.service.ts
@@ -27,7 +27,7 @@ export class ConfigResponseParsingService extends BaseResponseParsingService imp
   }
 
   parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
-    if (isNotEmpty(data.payload) && isNotEmpty(data.payload._links) && data.statusCode === '200') {
+    if (isNotEmpty(data.payload) && isNotEmpty(data.payload._links) && (data.statusCode === '201' || data.statusCode === '200' || data.statusCode === 'OK')) {
       const configDefinition = this.process<ConfigObject,ConfigType>(data.payload, request.href);
       return new ConfigSuccessResponse(configDefinition[Object.keys(configDefinition)[0]], data.statusCode, this.processPageInfo(data.payload));
     } else {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
index de30440dc2..f26238cc1f 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -93,8 +93,10 @@
                  [ngClass]="getClass('element', 'control', checkboxModel)">
             <input type="checkbox" ngbButton
                    [checked]="checkboxModel.checked"
+                   [id]="bindId && checkboxModel.id"
                    [dynamicId]="bindId && checkboxModel.id"
                    [formControlName]="checkboxModel.id"
+                   [indeterminate]="checkboxModel.indeterminate"
                    [name]="checkboxModel.name"
                    [required]="checkboxModel.required"
                    [tabindex]="checkboxModel.tabIndex"
@@ -165,14 +167,18 @@
         <!-- INPUT ------------------------------------------------------------------------------------------------>
         <div *ngSwitchCase="7" [class.input-group]="model.prefix || model.suffix">
 
-          <div *ngIf="model.prefix" class="input-group-addon" [innerHTML]="model.prefix"></div>
+          <div *ngIf="model.prefix" class="input-group-prepend">
+            <span class="input-group-text" [innerHTML]="model.prefix"></span>
+          </div>
 
           <ng-container *ngTemplateOutlet="inputTemplate;
                                            context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
 
           </ng-container>
 
-          <div *ngIf="model.suffix" class="input-group-addon" [innerHTML]="model.suffix"></div>
+          <div *ngIf="model.suffix" class="input-group-append">
+            <span class="input-group-text" [innerHTML]="model.suffix"></span>
+          </div>
 
           <datalist *ngIf="model.list" [id]="model.listId">
             <option *ngFor="let option of model.list" [value]="option">
@@ -181,7 +187,7 @@
         </div>
 
         <!-- RADIO GROUP ------------------------------------------------------------------------------------------>
-        <div *ngSwitchCase="8" ngbRadioGroup class="btn-group" role="radiogroup"
+        <div *ngSwitchCase="8" ngbRadioGroup class="btn-group btn-group-toggle" role="radiogroup"
              [dynamicId]="bindId && model.id"
              [formControlName]="model.id"
              [ngClass]="getClass('element', 'control')"
@@ -191,19 +197,19 @@
           <legend *ngIf="model.legend" [innerHTML]="model.legend"></legend>
 
           <label *ngFor="let option of model.options$ | async" ngbButtonLabel
-                       [ngClass]="[getClass('element', 'option'), getClass('grid', 'option')]">
+                 [ngClass]="[getClass('element', 'option'), getClass('grid', 'option')]">
 
             <input type="radio" ngbButton
                    [disabled]="option.disabled"
                    [name]="model.name"
                    [value]="option.value"
-                           (blur)="onBlur($event)"
-                           (focus)="onFocus($event)"/><span [innerHTML]="option.label"></span>
+                   (blur)="onBlur($event)"
+                   (focus)="onFocus($event)"/><span [innerHTML]="option.label"></span>
           </label>
 
         </div>
 
-
+        <!-- SELECT ----------------------------------------------------------------------------------------------->
         <ng-container *ngSwitchCase="9">
           <ng-container *ngTemplateOutlet="selectTemplate;
                                                  context:{bindId: bindId, model: model, showErrorMessages: showErrorMessages}">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
index dc60697c1f..cd6557b560 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -34,8 +34,8 @@ import {
 import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './models/tag/dynamic-tag.model';
-import { DYNAMIC_FORM_CONTROL_TYPE_RELATION } from './models/ds-dynamic-group/dynamic-group.model';
-import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/ds-date-picker/ds-date-picker.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_RELATION } from './models/dynamic-group/dynamic-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/date-picker.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup.model';
 import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-group.model';
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
similarity index 100%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.html
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
similarity index 100%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.scss
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
similarity index 96%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 6b661c65c9..663e17c0b1 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -1,13 +1,13 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { DynamicDsDatePickerModel } from './ds-date-picker.model';
+import { DynamicDsDatePickerModel } from './date-picker.model';
 
 export const DS_DATE_PICKER_SEPARATOR = '-';
 
 @Component({
   selector: 'ds-date-picker',
-  styleUrls: ['./ds-date-picker.component.scss'],
-  templateUrl: './ds-date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss'],
+  templateUrl: './date-picker.component.html',
 })
 
 export class DsDatePickerComponent implements OnInit {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
similarity index 100%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model.ts
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
similarity index 100%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.html
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.scss
similarity index 100%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.component.scss
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.scss
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
similarity index 99%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index f74de35110..7c209966c2 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -63,7 +63,6 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
   }
 
   ngOnInit() {
-    console.log(this.model.hasErrorMessages);
     const config = {rows: this.model.formConfiguration} as SubmissionFormsModel;
     if (isNotEmpty(this.model.value)) {
       this.formCollapsed = Observable.of(true);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
similarity index 100%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model.ts
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index 8e61f80af4..78509f76de 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -12,12 +12,12 @@ import {
 } from '@ng-dynamic-forms/core';
 import { mergeWith } from 'lodash';
 
-import { isEmpty, isNotEmpty, isNotNull, isNull } from '../../empty.util';
+import { isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
 import { DynamicComboboxModel } from './ds-dynamic-form-ui/models/ds-dynamic-combobox.model';
 import { SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
 import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { DynamicListCheckboxGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
-import { DynamicGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model';
+import { DynamicGroupModel } from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { DynamicTagModel } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
 import { DynamicListRadioGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
 import { RowParser } from './parsers/row-parser';
@@ -135,7 +135,7 @@ export class FormBuilderService extends DynamicFormService {
           controlId = controlModel.name;
         }
 
-        const controlValue = (controlModel as any).value || null;
+        const controlValue = isNotUndefined((controlModel as any).value) ? (controlModel as any).value : null;
         if (controlId && iterateResult.hasOwnProperty(controlId) && isNotNull(iterateResult[controlId])) {
           iterateResult[controlId].push(controlValue);
         } else {
@@ -151,7 +151,7 @@ export class FormBuilderService extends DynamicFormService {
     return result;
   }
 
-  modelFromConfiguration(json: string | SubmissionFormsModel, scopeUUID: string, initFormValues: any, submissionScope?: string, readOnly = false): DynamicFormControlModel[] | never {
+  modelFromConfiguration(json: string | SubmissionFormsModel, scopeUUID: string, initFormValues: any = {}, submissionScope?: string, readOnly = false): DynamicFormControlModel[] | never {
     let rows: DynamicFormControlModel[] = [];
     const rawData = typeof json === 'string' ? JSON.parse(json, JSONUtils.parseReviver) : json;
 
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
index b4b7f62a9e..57e4a4cacb 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -1,9 +1,9 @@
 import { FieldParser } from './field-parser';
 import { DynamicDatePickerModelConfig } from '@ng-dynamic-forms/core';
 import { FormFieldModel } from '../models/form-field.model';
-import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.model';
+import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
 import { isNotEmpty } from '../../../empty.util';
-import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component';
+import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/date-picker/date-picker.component';
 
 export class DateFieldParser extends FieldParser {
 
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
index 5ed0dfc18b..cd897bb265 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -4,7 +4,7 @@ import { FormFieldModel } from '../models/form-field.model';
 import {
   DynamicGroupModel,
   DynamicGroupModelConfig, PLACEHOLDER_PARENT_METADATA
-} from '../ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model';
+} from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { isNotEmpty } from '../../../empty.util';
 import { FormRowModel } from '../../../../core/shared/config/config-submission-forms.model';
 
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
index b082cc060a..833ccfb6bd 100644
--- a/src/app/shared/form/builder/parsers/row-parser.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -11,7 +11,7 @@ import { TagFieldParser } from './tag-field-parser';
 import { TextareaFieldParser } from './textarea-field-parser';
 import { GroupFieldParser } from './group-field-parser';
 import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model';
-import { DynamicGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.model';
+import { DynamicGroupModel } from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
 import { isEmpty } from '../../../empty.util';
 import { LookupFieldParser } from './lookup-field-parser';
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index e760c0111e..0539a57000 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -5,6 +5,7 @@
       [formId]="formId"
       [formGroup]="formGroup"
       [formModel]="formModel"
+      [formLayout]="formLayout"
       (dfBlur)="onBlur($event)"
       (dfChange)="onChange($event)"
       (dfFocus)="onFocus($event)">
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index 47258315e2..99712bde9c 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -5,7 +5,7 @@ import {
   DynamicFormArrayModel,
   DynamicFormControlEvent,
   DynamicFormControlModel,
-  DynamicFormGroupModel,
+  DynamicFormGroupModel, DynamicFormLayout,
 } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 
@@ -49,6 +49,7 @@ export class FormComponent implements OnDestroy, OnInit {
   @Input() formModel: DynamicFormControlModel[];
   @Input() parentFormModel: DynamicFormGroupModel | DynamicFormGroupModel[];
   @Input() formGroup: FormGroup;
+  @Input() formLayout: DynamicFormLayout = null;
 
   /* tslint:disable:no-output-rename */
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -205,6 +206,7 @@ export class FormComponent implements OnDestroy, OnInit {
   }
 
   onChange(event) {
+    console.log(event, this.formGroup);
     const action: FormChangeAction = new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel));
 
     this.store.dispatch(action);
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 81503f2245..d784df9df3 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -61,10 +61,10 @@ import { UploaderComponent } from './uploader/uploader.component';
 import { ChipsComponent } from './chips/chips.component';
 import { DsDynamicTagComponent } from './form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component';
 import { DsDynamicListComponent } from './form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component';
-import { DsDynamicGroupComponent } from './form/builder/ds-dynamic-form-ui/models/ds-dynamic-group/dynamic-group.components';
+import { DsDynamicGroupComponent } from './form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components';
 import { SortablejsModule } from 'angular-sortablejs';
 import { NumberPickerComponent } from './number-picker/number-picker.component';
-import { DsDatePickerComponent } from './form/builder/ds-dynamic-form-ui/models/ds-date-picker/ds-date-picker.component';
+import { DsDatePickerComponent } from './form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component';
 import { DsDynamicLookupComponent } from './form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component';
 
 const MODULES = [
diff --git a/webpack/webpack.server.js b/webpack/webpack.server.js
index 20f188dc79..ce0c52602a 100644
--- a/webpack/webpack.server.js
+++ b/webpack/webpack.server.js
@@ -17,6 +17,10 @@ module.exports = {
         whitelist: [
           /@angular/,
           /@ng/,
+		      /angular2-text-mask/,
+      	  /ng2-file-upload/,
+      	  /angular-sortablejs/,
+      	  /sortablejs/,
           /ngx/]
       })],
     }

From 876dba289232e99d394864ebbdb2a0282d6cce33 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 10 May 2018 17:24:09 +0200
Subject: [PATCH 03/41] Added tests

---
 src/app/shared/chips/chips.component.spec.ts  |  79 ++++++++
 src/app/shared/form/form.actions.ts           |   7 +-
 src/app/shared/form/form.component.spec.ts    |  64 ++++---
 src/app/shared/form/form.reducer.spec.ts      | 174 ++++++++++++++++++
 src/app/shared/form/form.reducers.ts          |   6 +-
 src/app/shared/form/form.service.spec.ts      |  73 ++++++++
 src/app/shared/form/form.service.ts           |   2 +-
 .../uploader/uploader.component.spec.ts       |  91 +++++++++
 8 files changed, 457 insertions(+), 39 deletions(-)
 create mode 100644 src/app/shared/chips/chips.component.spec.ts
 create mode 100644 src/app/shared/form/form.reducer.spec.ts
 create mode 100644 src/app/shared/form/form.service.spec.ts
 create mode 100644 src/app/shared/uploader/uploader.component.spec.ts

diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts
new file mode 100644
index 0000000000..add22b5d42
--- /dev/null
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -0,0 +1,79 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import 'rxjs/add/observable/of';
+
+import { Chips } from './models/chips.model';
+import { UploaderService } from '../uploader/uploader.service';
+import { ChipsComponent } from './chips.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { SortablejsModule } from 'angular-sortablejs';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Chips component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        NgbModule.forRoot(),
+        SortablejsModule.forRoot({ animation: 150 }),
+      ],
+      declarations: [
+        ChipsComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        ChipsComponent,
+        UploaderService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-chips
+        *ngIf="chips.hasItems()"
+        [chips]="chips"
+        [editable]="true"
+        (selected)="onChipSelected($event)"></ds-chips>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create Chips Component', inject([ChipsComponent], (app: ChipsComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  public chips = new Chips([]);
+
+}
diff --git a/src/app/shared/form/form.actions.ts b/src/app/shared/form/form.actions.ts
index 681add077e..b1d5f2b3e3 100644
--- a/src/app/shared/form/form.actions.ts
+++ b/src/app/shared/form/form.actions.ts
@@ -15,9 +15,9 @@ export const FormActionTypes = {
   FORM_CHANGE: type('dspace/form/FORM_CHANGE'),
   FORM_REMOVE: type('dspace/form/FORM_REMOVE'),
   FORM_STATUS_CHANGE: type('dspace/form/FORM_STATUS_CHANGE'),
-  FORM_ADD_ERROR: type('dspace/form/ADD_ERROR'),
-  FORM_REMOVE_ERROR: type('dspace/form/REMOVE_ERROR'),
-  CLEAR_ERRORS: type('dspace/form/CLEAR_ERRORS'),
+  FORM_ADD_ERROR: type('dspace/form/FORM_ADD_ERROR'),
+  FORM_REMOVE_ERROR: type('dspace/form/FORM_REMOVE_ERROR'),
+  FORM_CLEAR_ERRORS: type('dspace/form/FORM_CLEAR_ERRORS'),
 };
 
 /* tslint:disable:max-classes-per-file */
@@ -122,5 +122,6 @@ export class FormAddError implements Action {
  */
 export type FormAction = FormInitAction
   | FormChangeAction
+  | FormRemoveAction
   | FormStatusChangeAction
   | FormAddError
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index a0489a5ab8..efc6383603 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -1,40 +1,25 @@
 // Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import {
-  Component,
-  CUSTOM_ELEMENTS_SCHEMA,
-  DebugElement
-} from '@angular/core';
-
-import {
-  async,
-  ComponentFixture,
-  inject,
-  TestBed,
-} from '@angular/core/testing';
-
-import { StoreModule } from '@ngrx/store';
-
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import { DynamicFormControlModel, DynamicFormValidationService, DynamicInputModel } from '@ng-dynamic-forms/core';
+import { Store } from '@ngrx/store';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-import Spy = jasmine.Spy;
+import { TranslateModule } from '@ngx-translate/core';
 
 import { FormComponent } from './form.component';
 import { FormService } from './form.service';
-import { DynamicFormControlModel, DynamicFormValidationService, DynamicInputModel } from '@ng-dynamic-forms/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormBuilderService } from './builder/form-builder.service';
-import { SubmissionFormsConfigService } from '../../core/config/submission-forms-config.service';
-import { ResponseCacheService } from '../../core/cache/response-cache.service';
-import { RequestService } from '../../core/data/request.service';
-import { ObjectCacheService } from '../../core/cache/object-cache.service';
-import { Observable } from 'rxjs/Observable';
+import { FormState } from './form.reducers';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
-    set: { template: html }
+    set: {template: html}
   });
   const fixture = TestBed.createComponent(type);
 
@@ -110,7 +95,14 @@ describe('Form component', () => {
   const formBuilderServiceStub = {
     createFormGroup: (formModel) => new FormGroup(TEST_FORM_GROUP)
   }
-  const submissionFormsConfigServiceStub = { }
+  const submissionFormsConfigServiceStub = {};
+
+  const store: Store<FormState> = jasmine.createSpyObj('store', {
+    /* tslint:disable:no-empty */
+    dispatch: {},
+    /* tslint:enable:no-empty */
+    select: Observable.of({})
+  });
 
   // async beforeEach
   beforeEach(async(() => {
@@ -121,17 +113,22 @@ describe('Form component', () => {
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        StoreModule.forRoot({}),
         NgbModule.forRoot(),
+        TranslateModule.forRoot()
       ],
       declarations: [
         FormComponent,
         TestComponent,
       ], // declare the test component
       providers: [
+        ChangeDetectorRef,
+        DynamicFormValidationService,
+        FormBuilderService,
         FormComponent,
-        { provide: FormService, useValue: formServiceStub },
-        { provide: FormBuilderService, useValue: formBuilderServiceStub },
+        FormService,
+        {
+          provide: Store, useValue: store
+        }
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
@@ -141,17 +138,17 @@ describe('Form component', () => {
   // synchronous beforeEach
   beforeEach(() => {
     html = `
-      <ds-form #formRef="formComponent"
+      <ds-form *ngIf="formModel" #formRef="formComponent"
                [formId]="formId"
                [formModel]="formModel"
-               [displaySubmit]="false"></ds-form>`;
+               [displaySubmit]="displaySubmit"></ds-form>`;
 
     testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
     testComp = testFixture.componentInstance;
-
   });
 
   it('should create Form Component', inject([FormComponent], (app: FormComponent) => {
+
     expect(app).toBeDefined();
   }));
 
@@ -166,6 +163,7 @@ class TestComponent {
 
   public formId;
   public formModel: DynamicFormControlModel[];
+  public displaySubmit = false;
 
   constructor() {
     this.formId = 'testForm';
diff --git a/src/app/shared/form/form.reducer.spec.ts b/src/app/shared/form/form.reducer.spec.ts
new file mode 100644
index 0000000000..64141a15b6
--- /dev/null
+++ b/src/app/shared/form/form.reducer.spec.ts
@@ -0,0 +1,174 @@
+import { formReducer } from './form.reducers';
+import {
+  FormAddError,
+  FormChangeAction,
+  FormInitAction,
+  FormRemoveAction,
+  FormStatusChangeAction
+} from './form.actions';
+
+describe('formReducer', () => {
+
+  it('should set init state of the form', () => {
+    const state = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': null,
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: false,
+        errors: []
+      }
+    };
+    const formId = 'testForm';
+    const formData = {
+      'dc.contributor.author': null,
+      'dc.title': null,
+      'dc.date.issued': null,
+      'dc.description': null
+    };
+    const valid = false;
+    const action = new FormInitAction(formId, formData, valid);
+    const newState = formReducer({}, action);
+
+    expect(newState).toEqual(state);
+  });
+
+  it('should change form data on form change', () => {
+    const initState = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': null,
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: false,
+        errors: []
+      }
+    };
+    const state = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': ['test'],
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: false,
+        errors: []
+      }
+    };
+    const formId = 'testForm';
+    const formData = {
+      'dc.contributor.author': null,
+      'dc.title': ['test'],
+      'dc.date.issued': null,
+      'dc.description': null
+    };
+
+    const action = new FormChangeAction(formId, formData);
+    const newState = formReducer(initState, action);
+
+    expect(newState).toEqual(state);
+  });
+
+  it('should change form status on form status change', () => {
+    const initState = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': ['test'],
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: false,
+        errors: []
+      }
+    };
+    const state = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': ['test'],
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: true,
+        errors: []
+      }
+    };
+    const formId = 'testForm';
+
+    const action = new FormStatusChangeAction(formId, true);
+    const newState = formReducer(initState, action);
+
+    expect(newState).toEqual(state);
+  });
+
+  it('should add error to form state', () => {
+    const initState = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': ['test'],
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: true,
+        errors: []
+      }
+    };
+
+    const state = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': ['test'],
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: true,
+        errors: [
+          {
+            fieldId: 'dc.title',
+            message: 'Not valid'
+          }
+        ]
+      }
+    };
+
+    const formId = 'testForm';
+    const fieldId = 'dc.title';
+    const message = 'Not valid';
+
+    const action = new FormAddError(formId, fieldId, message);
+    const newState = formReducer(initState, action);
+
+    expect(newState).toEqual(state);
+  });
+
+  it('should remove form state', () => {
+    const initState = {
+      testForm: {
+        data: {
+          'dc.contributor.author': null,
+          'dc.title': ['test'],
+          'dc.date.issued': null,
+          'dc.description': null
+        },
+        valid: true,
+        errors: []
+      }
+    };
+
+    const formId = 'testForm';
+
+    const action = new FormRemoveAction(formId);
+    const newState = formReducer(initState, action);
+
+    expect(newState).toEqual({});
+  });
+});
diff --git a/src/app/shared/form/form.reducers.ts b/src/app/shared/form/form.reducers.ts
index 04d7d28d85..d06db331eb 100644
--- a/src/app/shared/form/form.reducers.ts
+++ b/src/app/shared/form/form.reducers.ts
@@ -86,14 +86,16 @@ function initForm(state: FormState, action: FormInitAction): FormState {
     return Object.assign({}, state, {
       [ action.payload.formId ]: {
         data: action.payload.formData,
-        valid: action.payload.valid
+        valid: action.payload.valid,
+        errors: []
       }
     });
   } else {
     const newState = Object.assign({}, state);
     newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
         data: action.payload.formData,
-        valid: action.payload.valid
+        valid: action.payload.valid,
+        errors: []
       }
     );
     return newState;
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
new file mode 100644
index 0000000000..b72bbbd0d6
--- /dev/null
+++ b/src/app/shared/form/form.service.spec.ts
@@ -0,0 +1,73 @@
+import { Store, StoreModule } from '@ngrx/store';
+import { async, inject, TestBed } from '@angular/core/testing';
+import 'rxjs/add/observable/of';
+import { FormService } from './form.service';
+import { FormBuilderService } from './builder/form-builder.service';
+import { AppState } from '../../app.reducer';
+import { DynamicPathable } from '@ng-dynamic-forms/core/src/model/misc/dynamic-form-control-path.model';
+import { DynamicFormControlModel } from '@ng-dynamic-forms/core';
+import { formReducer } from './form.reducers';
+
+describe('FormService', () => {
+  const formId = 'testForm';
+  let service: FormService;
+  const formData = {
+    'dc.contributor.author': null,
+    'dc.title': ['test'],
+    'dc.date.issued': null,
+    'dc.description': null
+  };
+  const formState = {
+    testForm: {
+      data: formData,
+      valid: true,
+      errors: []
+    }
+  };
+
+  const formBuilderServiceStub: any = {
+    getPath: (model: DynamicPathable) => [],
+    /* tslint:disable:no-empty */
+    clearAllModelsValue: (groupModel: DynamicFormControlModel[]) => {
+    }
+    /* tslint:enable:no-empty */
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        StoreModule.forRoot({formReducer})
+      ],
+      providers: [
+        {provide: FormBuilderService, useValue: formBuilderServiceStub},
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(inject([Store], (store: Store<AppState>) => {
+    store
+      .subscribe((state) => {
+        state.forms = formState;
+      });
+    service = new FormService(formBuilderServiceStub, store);
+  }));
+
+  it('should check whether form state is init', () => {
+    service.isFormInitialized(formId).subscribe((init) => {
+      expect(init).toBe(true);
+    });
+  });
+
+  it('should return form status when isValid is called', () => {
+    service.isValid(formId).subscribe((status) => {
+      expect(status).toBe(true);
+    });
+  });
+
+  it('should return form data when getFormData is called', () => {
+    service.getFormData(formId).subscribe((data) => {
+      expect(data).toBe(formData);
+    });
+  });
+
+});
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
index 9d7b18acbc..2adef27179 100644
--- a/src/app/shared/form/form.service.ts
+++ b/src/app/shared/form/form.service.ts
@@ -31,7 +31,7 @@ export class FormService {
   /**
    * Method to retrieve form's data from state
    */
-  public getFormData(formId: string): Observable<FormControl> {
+  public getFormData(formId: string): Observable<any> {
     return this.store.select(formObjectFromIdSelector(formId))
       .filter((state) => isNotUndefined(state))
       .map((state) => state.data)
diff --git a/src/app/shared/uploader/uploader.component.spec.ts b/src/app/shared/uploader/uploader.component.spec.ts
new file mode 100644
index 0000000000..f1e12e7693
--- /dev/null
+++ b/src/app/shared/uploader/uploader.component.spec.ts
@@ -0,0 +1,91 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+
+import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
+
+import { UploaderService } from './uploader.service';
+import { UploaderOptions } from './uploader-options.model';
+import { UploaderComponent } from './uploader.component';
+import { FileUploadModule } from 'ng2-file-upload';
+import { TranslateModule } from '@ngx-translate/core';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Chips component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        FileUploadModule,
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        UploaderComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        ScrollToService,
+        UploaderComponent,
+        UploaderService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-uploader [onBeforeUpload]="onBeforeUpload"
+                   [uploadFilesOptions]="uploadFilesOptions"
+                   (onCompleteItem)="onCompleteItem($event)"></ds-uploader>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create Uploader Component', inject([UploaderComponent], (app: UploaderComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+  public uploadFilesOptions: UploaderOptions = {
+    url: 'http://test',
+    authToken: null,
+    disableMultipart: false,
+    itemAlias: null
+  };
+
+  /* tslint:disable:no-empty */
+  public onBeforeUpload = () => {
+  };
+
+  onCompleteItem(event) {
+  }
+
+  /* tslint:enable:no-empty */
+}

From 5ec01031d9e9f57d203351f73c78abd9c4ebf879 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 11 Jun 2018 11:13:05 +0200
Subject: [PATCH 04/41] updated with the latest changes

---
 .../ds-dynamic-form-control.component.html    |  2 +-
 .../ds-dynamic-form-control.component.ts      |  2 -
 .../date-picker/date-picker.component.html    | 80 ++++++++---------
 .../date-picker/date-picker.component.ts      | 30 +++----
 .../dynamic-group.component.html              | 11 ++-
 .../dynamic-group/dynamic-group.components.ts | 40 +++++++--
 .../models/list/dynamic-list.component.ts     | 10 +--
 .../lookup/dynamic-lookup.component.html      | 61 ++++++-------
 .../lookup/dynamic-lookup.component.scss      |  4 +
 ...dynamic-scrollable-dropdown.component.html |  4 +-
 .../typeahead/dynamic-typeahead.component.ts  | 11 ++-
 .../form/builder/form-builder.service.ts      | 84 ++++++++++++++---
 .../models/form-field-metadata-value.model.ts | 12 ++-
 .../form/builder/parsers/date-field-parser.ts | 18 ++--
 .../form/builder/parsers/field-parser.ts      | 25 +++---
 .../builder/parsers/onebox-field-parser.ts    |  1 -
 src/app/shared/form/form.actions.ts           | 25 ++++++
 src/app/shared/form/form.component.ts         | 18 ++--
 src/app/shared/form/form.reducers.ts          | 89 +++++++++++++------
 src/app/shared/form/form.service.ts           |  2 +-
 .../number-picker.component.html              | 14 +--
 .../number-picker.component.scss              | 23 +----
 .../number-picker/number-picker.component.ts  | 51 +++++------
 23 files changed, 375 insertions(+), 242 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
index f26238cc1f..5614e23c4a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -127,8 +127,8 @@
                  [showWeekdays]="getAdditional('showWeekdays', true)"
                  [showWeekNumbers]="getAdditional('showWeekNumbers', false)"
                  [startDate]="model.focusedDate"
+                 (dateSelect)="onValueChange($event)"
                  (blur)="onBlur($event)"
-                 (change)="onValueChange($event)"
                  (focus)="onFocus($event)">
 
           <div class="input-group-append">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
index cd6557b560..a38c35eb9c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -12,7 +12,6 @@ import {
 import { FormGroup } from '@angular/forms';
 import {
   DynamicDatePickerModel,
-  DynamicFormArrayGroupModel,
   DynamicFormControlComponent,
   DynamicFormControlEvent,
   DynamicFormControlModel,
@@ -172,5 +171,4 @@ export class DsDynamicFormControlComponent extends DynamicFormControlComponent i
       this.onValueChange(event);
     }
   }
-
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
index 81733ff999..96ee0dd38e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -1,46 +1,46 @@
 <div class="d-flex">
-  <div class="mr-3">
-    <ds-number-picker
-      [disabled]="model.disabled"
-      [min]="minYear"
-      [max]="maxYear"
-      [name]="'year'"
-      [size]="4"
-      [(ngModel)]="initialYear"
-      [value]="year"
-      [invalid]="invalid"
-      [placeholder]='yearPlaceholder'
-      (change)="onChange($event)"
-    ></ds-number-picker>
-  </div>
+  <ds-number-picker
+    tabindex="1"
+    [disabled]="model.disabled"
+    [min]="minYear"
+    [max]="maxYear"
+    [name]="'year'"
+    [size]="4"
+    [(ngModel)]="initialYear"
+    [value]="year"
+    [invalid]="showErrorMessages"
+    [placeholder]='yearPlaceholder'
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>
 
-  <div class="mr-3">
-    <ds-number-picker
-      [min]="minMonth"
-      [max]="maxMonth"
-      [name]="'month'"
-      [size]="6"
-      [(ngModel)]="initialMonth"
-      [value]="month"
-      [placeholder]="monthPlaceholder"
-      [disabled]="!year || model.disabled"
-      (change)="onChange($event)"
-    ></ds-number-picker>
-  </div>
+  <ds-number-picker
+    tabindex="2"
+    [min]="minMonth"
+    [max]="maxMonth"
+    [name]="'month'"
+    [size]="6"
+    [(ngModel)]="initialMonth"
+    [value]="month"
+    [placeholder]="monthPlaceholder"
+    [disabled]="!year || model.disabled"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>
 
-  <div class="mr-3">
-    <ds-number-picker
-      [min]="minDay"
-      [max]="maxDay"
-      [name]="'day'"
-      [size]="2"
-      [(ngModel)]="initialDay"
-      [value]="day"
-      [placeholder]="dayPlaceholder"
-      [disabled]="!month || model.disabled"
-      (change)="onChange($event)"
-    ></ds-number-picker>
-  </div>
+  <ds-number-picker
+    tabindex="3"
+    [min]="minDay"
+    [max]="maxDay"
+    [name]="'day'"
+    [size]="2"
+    [(ngModel)]="initialDay"
+    [value]="day"
+    [placeholder]="dayPlaceholder"
+    [disabled]="!month || model.disabled"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>
 
 </div>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 663e17c0b1..6d50d4375b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { DynamicDsDatePickerModel } from './date-picker.model';
+import { hasValue, isNotEmpty } from '../../../../../empty.util';
 
 export const DS_DATE_PICKER_SEPARATOR = '-';
 
@@ -20,12 +21,10 @@ export class DsDatePickerComponent implements OnInit {
   // @Input()
   // maxDate;
 
-  @Output()
-  selected = new EventEmitter<number>();
-  @Output()
-  remove = new EventEmitter<number>();
-  @Output()
-  change = new EventEmitter<any>();
+  @Output() selected = new EventEmitter<number>();
+  @Output() remove = new EventEmitter<number>();
+  @Output() change = new EventEmitter<any>();
+  @Output() focus = new EventEmitter<any>();
 
   initialYear: number;
   initialMonth: number;
@@ -48,9 +47,8 @@ export class DsDatePickerComponent implements OnInit {
 
   disabledMonth = true;
   disabledDay = true;
-  invalid = false;
 
-  ngOnInit() {// TODO Manage fields when not setted
+  ngOnInit() {
     const now = new Date();
     this.initialYear = now.getFullYear();
     this.initialMonth = now.getMonth() + 1;
@@ -76,15 +74,6 @@ export class DsDatePickerComponent implements OnInit {
 
     this.maxYear = this.initialYear + 100;
 
-    // Invalid state for year
-    this.group.get(this.model.id).statusChanges.subscribe((state) => {
-      if (state === 'INVALID' || this.model.malformedDate) {
-        this.invalid = true;
-      } else {
-        this.invalid = false;
-        this.model.malformedDate = false;
-      }
-    });
   }
 
   onChange(event) {
@@ -157,8 +146,13 @@ export class DsDatePickerComponent implements OnInit {
         : this.day.toString();
       value += DS_DATE_PICKER_SEPARATOR + dd;
     }
+
     this.model.valueUpdates.next(value);
-    this.change.emit(event);
+    this.change.emit(value);
+  }
+
+  onFocus(event) {
+    this.focus.emit(event);
   }
 
   getLastDay(date: Date) {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
index 916026a85b..c628eaf8e5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
@@ -18,10 +18,11 @@
 <div class="pt-2" [ngClass]="{'border-top': !invalid, 'border border-danger': invalid}">
   <div *ngIf="!(formCollapsed | async)" class="pl-2 row"  @shrinkInOut>
     <ds-form #formRef="formComponent"
-             class="col-sm-9 pl-0"
+             class="col-sm-12 col-md-8 col-lg-9 col-xl-10 pl-0"
              [formId]="formId"
              [formModel]="formModel"
-             [displaySubmit]="false"></ds-form>
+             [displaySubmit]="false"
+             (dfChange)="onChange($event)"></ds-form>
 
 
     <div *ngIf="!(formCollapsed | async)" class="col p-0 m-0 d-flex justify-content-center align-items-center">
@@ -54,7 +55,11 @@
 
   <div class="d-flex">
     <div *ngIf="!chips.hasItems()">
-      <input type="text" readonly class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted" value="{{'form.no-value' | translate}}">
+      <input type="text"
+             class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted"
+             readonly
+             tabindex="-1"
+             value="{{'form.no-value' | translate}}">
     </div>
     <ds-chips
       *ngIf="chips.hasItems()"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index 7c209966c2..6662f7e24b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -11,7 +11,12 @@ import {
 } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
-import { DynamicFormControlModel, DynamicFormGroupModel, DynamicInputModel } from '@ng-dynamic-forms/core';
+import {
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+  DynamicFormGroupModel,
+  DynamicInputModel
+} from '@ng-dynamic-forms/core';
 import { isEqual } from 'lodash';
 
 import { DynamicGroupModel, PLACEHOLDER_PARENT_METADATA } from './dynamic-group.model';
@@ -28,6 +33,9 @@ import { GlobalConfig } from '../../../../../../../config/global-config.interfac
 import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
+import { isObjectEmpty } from '../../../../../object.util';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 
 @Component({
   selector: 'ds-dynamic-group',
@@ -67,9 +75,13 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
     if (isNotEmpty(this.model.value)) {
       this.formCollapsed = Observable.of(true);
     }
+    this.model.valueUpdates.subscribe((value: any[]) => {
+      this.formCollapsed = (isNotEmpty(value) && !(value.length === 1 && isObjectEmpty(value[0]))) ? Observable.of(true) : Observable.of(false);
+    });
+
     this.formId = this.formService.getUniqueId(this.model.id);
     this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {});
-    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField);
+    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField, this.EnvConfig.submission.metadata.icons);
     this.subs.push(
       this.chips.chipsItems
         .subscribe((subItems: any[]) => {
@@ -118,20 +130,32 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
     return res;
   }
 
+  onChange(event: DynamicFormControlEvent) {
+    return
+  }
+
   onChipSelected(event) {
     this.expandForm();
     this.selectedChipItem = this.chips.getChipByIndex(event);
     this.formModel.forEach((row) => {
       const modelRow = row as DynamicFormGroupModel;
       modelRow.group.forEach((model: DynamicInputModel) => {
-        const value = this.selectedChipItem.item[model.name] === PLACEHOLDER_PARENT_METADATA ? null : this.selectedChipItem.item[model.name];
-        if (model instanceof DynamicLookupModel) {
-          (model as DynamicLookupModel).valueUpdates.next(value);
-        } else if (model instanceof DynamicInputModel) {
-          model.valueUpdates.next(value);
+        const value = (this.selectedChipItem.item[model.name] === PLACEHOLDER_PARENT_METADATA
+          || this.selectedChipItem.item[model.name].value === PLACEHOLDER_PARENT_METADATA)
+            ? null
+            : this.selectedChipItem.item[model.name];
+        if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
+          model.valueUpdates.next(value.display);
         } else {
-          (model as any).value = value;
+          model.valueUpdates.next(value);
         }
+        // if (model instanceof DynamicLookupModel) {
+        //   (model as DynamicLookupModel).valueUpdates.next(value);
+        // } else if (model instanceof DynamicInputModel) {
+        //   model.valueUpdates.next(value);
+        // } else {
+        //   (model as any).value = value;
+        // }
       });
     });
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index a3baa3de88..91bd0275e7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -6,12 +6,11 @@ import { AuthorityService } from '../../../../../../core/integration/authority.s
 import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
 import { hasValue, isNotEmpty } from '../../../../../empty.util';
 import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
-import { ConfigData } from '../../../../../../core/config/config-data';
-import { ConfigAuthorityModel } from '../../../../../../core/shared/config/config-authority.model';
 import { FormBuilderService } from '../../../form-builder.service';
 import { DynamicCheckboxModel } from '@ng-dynamic-forms/core';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
+import { IntegrationData } from '../../../../../../core/integration/integration-data';
 
 export interface ListItem {
   id: string,
@@ -26,7 +25,6 @@ export interface ListItem {
   templateUrl: './dynamic-list.component.html'
 })
 
-// TODO Fare questo componente da zero
 export class DsDynamicListComponent implements OnInit {
   @Input() bindId = true;
   @Input() group: FormGroup;
@@ -91,13 +89,13 @@ export class DsDynamicListComponent implements OnInit {
   protected setOptionsFromAuthority() {
     if (this.model.authorityOptions.name && this.model.authorityOptions.name.length > 0) {
       const listGroup = this.group.controls[this.model.id] as FormGroup;
-      this.authorityService.getEntriesByName(this.searchOptions).subscribe((authorities: ConfigData) => {
+      this.authorityService.getEntriesByName(this.searchOptions).subscribe((authorities: IntegrationData) => {
         let groupCounter = 0;
         let itemsPerGroup = 0;
         let tempList: ListItem[] = [];
-        this.authorityList = authorities.payload as ConfigAuthorityModel[];
+        this.authorityList = authorities.payload as AuthorityValueModel[];
         // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-        (authorities.payload as ConfigAuthorityModel[]).forEach((option, key) => {
+        (authorities.payload as AuthorityValueModel[]).forEach((option, key) => {
           const value = option.id || option.value;
           const checked: boolean = isNotEmpty(findKey(
             this.model.value,
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 972538efad..14f468b0f8 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -1,7 +1,6 @@
-<div #sdRef="ngbDropdown"
-     ngbDropdown
+<div ngbDropdown #sdRef="ngbDropdown"
      (click)="$event.stopPropagation();"
-     (openChange)="openChange($event)">
+     (openChange)="openChange($event);">
 
   <!--Simple lookup, only 1 field -->
   <div class="form-row" *ngIf="!isLookupName">
@@ -19,26 +18,25 @@
                  [placeholder]="model.placeholder"
                  [readonly]="model.readOnly"
                  (change)="$event.preventDefault()"
-                 (blur)="onBlurEvent($event); sdRef.close();"
-                 (focus)="onFocusEvent($event); sdRef.close();"
-                 (click)="$event.stopPropagation(); sdRef.close();"
+                 (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();"
                  (input)="onInput($event)">
         </div>
 
       </div>
     </div>
     <div class="col-xs-12 col-sm-4 col-md-2 col-lg-1 text-center">
-      <button
-        *ngIf="!isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        [disabled]="model.readOnly || isSearchDisabled()"
-        (click)="search($event); sdRef.open();">{{'form.search' | translate}}
+      <button ngbDropdownAnchor
+              *ngIf="!isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              [disabled]="model.readOnly || isSearchDisabled()"
+              (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
       </button>
-      <button
-        *ngIf="isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        [disabled]="model.readOnly"
-        (click)="remove($event)">{{'form.remove' | translate}}
+      <button *ngIf="isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              [disabled]="model.readOnly"
+              (click)="remove($event)">{{'form.remove' | translate}}
       </button>
     </div>
   </div>
@@ -59,9 +57,9 @@
                  [placeholder]="model.placeholder | translate"
                  [readonly]="model.readOnly"
                  (change)="$event.preventDefault()"
-                 (blur)="onBlurEvent($event); sdRef.close();"
-                 (focus)="onFocusEvent($event); sdRef.close();"
-                 (click)="$event.stopPropagation(); sdRef.close();"
+                 (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();"
+                 (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();"
                  (input)="onInput($event)">
         </div>
 
@@ -78,24 +76,23 @@
                   [placeholder]="model.placeholder2 | translate"
                   [readonly]="model.readOnly"
                   (change)="$event.preventDefault()"
-                  (blur)="onBlurEvent($event); sdRef.close();"
-                  (focus)="onFocusEvent($event); sdRef.close();"
+                  (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
+                  (focus)="onFocusEvent($event); $event.stopPropagation(); sdRef.close();"
                   (click)="$event.stopPropagation(); sdRef.close();"
                   (input)="onInput($event)">
         </div>
       </div>
     </div>
     <div class="col-xs-12 col-md-3 col-lg-2 text-center">
-      <button
-        *ngIf="!isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        [disabled]="isSearchDisabled()"
-        (click)="search($event); sdRef.open();">{{'form.search' | translate}}
+      <button ngbDropdownAnchor
+              *ngIf="!isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              [disabled]="isSearchDisabled()"
+              (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
       </button>
-      <button
-        *ngIf="isInputDisabled()" class="btn btn-secondary"
-        type="button"
-        (click)="remove($event)">{{'form.remove' | translate}}
+      <button *ngIf="isInputDisabled()" class="btn btn-secondary"
+              type="button"
+              (click)="remove($event)">{{'form.remove' | translate}}
       </button>
     </div>
   </div>
@@ -115,11 +112,11 @@
 
       <button class="dropdown-item disabled"
               *ngIf="optionsList && optionsList.length == 0"
-              (click)="clearFields(); sdRef.close();">{{'form.no-results' | translate}}
+              (click)="$event.stopPropagation(); clearFields(); sdRef.close();">{{'form.no-results' | translate}}
       </button>
       <button class="dropdown-item collection-item"
               *ngFor="let listEntry of optionsList"
-              (click)="onSelect(listEntry); sdRef.close();"
+              (click)="$event.stopPropagation(); onSelect(listEntry); sdRef.close();"
               title="{{ listEntry.display }}">
         {{listEntry.value}}
       </button>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
index a333fc881f..a697772020 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -1,5 +1,9 @@
 @import "../../../../../../../styles/variables";
 
+.dropdown-toggle::after {
+  display:none
+}
+
 /* enable absolute positioning */
 .spinner-addon {
   position: relative;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index 1ea1b62cd0..aed4e16bca 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -30,11 +30,11 @@
          (scrolled)="onScroll()"
          [scrollWindow]="false">
 
-      <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">No results found</button>
+      <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
       <button class="dropdown-item collection-item" *ngFor="let listEntry of optionsList" (click)="onSelect(listEntry)" title="{{ listEntry.display }}">
         {{inputFormatter(listEntry)}}
       </button>
-      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>Loading...</p></div>
+      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
     </div>
 
   </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
index a261eef8f7..1d31fc0968 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
@@ -30,6 +30,7 @@ export class DsDynamicTypeaheadComponent implements OnInit {
   searchFailed = false;
   hideSearchingWhenUnsubscribed = new Observable(() => () => this.changeSearchingStatus(false));
   currentValue: any;
+  inputValue: any;
 
   formatter = (x: { display: string }) => {
     return (typeof x === 'object') ? x.display : x
@@ -88,9 +89,8 @@ export class DsDynamicTypeaheadComponent implements OnInit {
   onInput(event) {
     if (!this.model.authorityOptions.closed && isNotEmpty(event.target.value)) {
       const valueObj = new FormFieldMetadataValueObject(event.target.value);
-      this.currentValue = valueObj;
-      this.model.valueUpdates.next(valueObj as any);
-      this.change.emit(valueObj);
+      this.inputValue = valueObj;
+      this.model.valueUpdates.next(this.inputValue);
     }
     if (event.data) {
       // this.group.markAsDirty();
@@ -98,6 +98,10 @@ export class DsDynamicTypeaheadComponent implements OnInit {
   }
 
   onBlurEvent(event: Event) {
+    if (!this.model.authorityOptions.closed && isNotEmpty(this.inputValue)) {
+      this.change.emit(this.inputValue);
+      this.inputValue = null;
+    }
     this.blur.emit(event);
   }
 
@@ -114,6 +118,7 @@ export class DsDynamicTypeaheadComponent implements OnInit {
   }
 
   onSelectItem(event: NgbTypeaheadSelectItemEvent) {
+    this.inputValue = null;
     this.currentValue = event.item;
     this.model.valueUpdates.next(event.item);
     this.change.emit(event.item);
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index 78509f76de..2b0cddaaa4 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -10,20 +10,26 @@ import {
   DynamicPathable,
   JSONUtils,
 } from '@ng-dynamic-forms/core';
-import { mergeWith } from 'lodash';
+import { mergeWith, isObject } from 'lodash';
 
 import { isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
 import { DynamicComboboxModel } from './ds-dynamic-form-ui/models/ds-dynamic-combobox.model';
 import { SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
 import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { DynamicListCheckboxGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
-import { DynamicGroupModel } from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
-import { DynamicTagModel } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_RELATION,
+  DynamicGroupModel
+} from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_TAG, DynamicTagModel } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
 import { DynamicListRadioGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
 import { RowParser } from './parsers/row-parser';
 
 import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
 import { DynamicRowGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
+import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
+import { AuthorityValueModel } from '../../../core/integration/models/authority-value.model';
 
 @Injectable()
 export class FormBuilderService extends DynamicFormService {
@@ -95,11 +101,25 @@ export class FormBuilderService extends DynamicFormService {
       }
     };
 
-    const iterateControlModels = (findGroupModel: DynamicFormControlModel[]): void => {
+    const normalizeValue = (controlModel, controlValue, controlModelIndex) => {
+      const controlLanguage = (controlModel as DsDynamicInputModel).hasLanguages ? (controlModel as DsDynamicInputModel).language : null;
+      if (((isObject(controlValue) && controlValue.id) || controlValue instanceof AuthorityValueModel)) {
+        return new FormFieldMetadataValueObject(controlValue.value, controlLanguage, controlValue.id, controlValue.display, controlModelIndex);
+      } else if (!(controlValue instanceof FormFieldMetadataValueObject)) {
+        return new FormFieldMetadataValueObject(controlValue, controlLanguage, null, null, controlModelIndex);
+      } else {
+        const place = controlModelIndex || controlValue.place;
+        return Object.assign(new FormFieldMetadataValueObject(), controlValue, {place});
+      }
+    };
+
+    const iterateControlModels = (findGroupModel: DynamicFormControlModel[], controlModelIndex: number = 0): void => {
       let iterateResult = Object.create({});
 
       // Iterate over all group's controls
       for (const controlModel of findGroupModel) {
+      /* tslint:disable-next-line:no-shadowed-variable */
+      // for (const {controlModel, controlModelIndex} of findGroupModel.map((controlModel, controlModelIndex) => ({ controlModel, controlModelIndex }))) {
 
         if (controlModel instanceof DynamicRowGroupModel && !this.isCustomGroup(controlModel)) {
           iterateResult = mergeWith(iterateResult, iterateControlModels((controlModel as DynamicFormGroupModel).group), customizer);
@@ -113,7 +133,7 @@ export class FormBuilderService extends DynamicFormService {
 
         if (controlModel instanceof DynamicRowArrayModel) {
           for (const arrayItemModel of controlModel.groups) {
-            iterateResult = mergeWith(iterateResult, iterateControlModels(arrayItemModel.group), customizer);
+            iterateResult = mergeWith(iterateResult, iterateControlModels(arrayItemModel.group, arrayItemModel.index), customizer);
           }
           continue;
         }
@@ -121,7 +141,7 @@ export class FormBuilderService extends DynamicFormService {
         if (controlModel instanceof DynamicFormArrayModel) {
           iterateResult[controlModel.name] = [];
           for (const arrayItemModel of controlModel.groups) {
-            iterateResult[controlModel.name].push(iterateControlModels(arrayItemModel.group));
+            iterateResult[controlModel.name].push(iterateControlModels(arrayItemModel.group, arrayItemModel.index));
           }
           continue;
         }
@@ -135,12 +155,37 @@ export class FormBuilderService extends DynamicFormService {
           controlId = controlModel.name;
         }
 
-        const controlValue = isNotUndefined((controlModel as any).value) ? (controlModel as any).value : null;
-        if (controlId && iterateResult.hasOwnProperty(controlId) && isNotNull(iterateResult[controlId])) {
-          iterateResult[controlId].push(controlValue);
-        } else {
-          iterateResult[controlId] = isNotEmpty(controlValue) ? (Array.isArray(controlValue) ? controlValue : [controlValue]) : null;
+        if (controlModel instanceof DynamicGroupModel) {
+          const values = (controlModel as any).value;
+          values.forEach((groupValue, groupIndex) => {
+            const newGroupValue = Object.create({});
+            Object.keys(groupValue)
+              .forEach((key) => {
+                const normValue = normalizeValue(controlModel, groupValue[key], groupIndex);
+                if (iterateResult.hasOwnProperty(key)) {
+                  iterateResult[key].push(normValue);
+                } else {
+                  iterateResult[key] = [normValue];
+                }
+                // newGroupValue[key] = normalizeValue(controlModel, groupValue[key], groupIndex);
+              });
+            // controlArrayValue.push(newGroupValue);
+          })
+        } else if (isNotUndefined((controlModel as any).value) && isNotEmpty((controlModel as any).value)) {
+          const controlArrayValue = [];
+          // Normalize control value as an array of FormFieldMetadataValueObject
+          const values = Array.isArray((controlModel as any).value) ? (controlModel as any).value : [(controlModel as any).value];
+          values.forEach((controlValue) => {
+            controlArrayValue.push(normalizeValue(controlModel, controlValue, controlModelIndex))
+          });
+
+          if (controlId && iterateResult.hasOwnProperty(controlId) && isNotNull(iterateResult[controlId])) {
+            iterateResult[controlId] = iterateResult[controlId].concat(controlArrayValue);
+          } else {
+            iterateResult[controlId] = isNotEmpty(controlArrayValue) ? controlArrayValue : null;
+          }
         }
+
       }
 
       return iterateResult;
@@ -182,16 +227,29 @@ export class FormBuilderService extends DynamicFormService {
       || model.parent instanceof DynamicGroupModel);
   }
 
+  isComboboxGroup(model: DynamicFormControlModel) {
+    return model && model instanceof DynamicComboboxModel;
+  }
+
   isCustomGroup(model: DynamicFormControlModel) {
     return model &&
       (model instanceof DynamicConcatModel
         || model instanceof DynamicComboboxModel
-        || model instanceof DynamicListCheckboxGroupModel
+        || this.isListGroup(model));
+  }
+
+  isListGroup(model: DynamicFormControlModel) {
+    return model &&
+      (model instanceof DynamicListCheckboxGroupModel
         || model instanceof DynamicListRadioGroupModel);
   }
 
   isModelInAuthorityGroup(model: DynamicFormControlModel) {
-    return (model instanceof DynamicListCheckboxGroupModel || model instanceof DynamicTagModel);
+    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
+  }
+
+  isRelationGroup(model: DynamicFormControlModel) {
+    return model && model.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION;
   }
 
   getFormControlById(id: string, formGroup: FormGroup, groupModel: DynamicFormControlModel[], index = 0) {
diff --git a/src/app/shared/form/builder/models/form-field-metadata-value.model.ts b/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
index 7379d62de6..ebcdc9264c 100644
--- a/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
+++ b/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
@@ -2,7 +2,7 @@ import { isNotEmpty } from '../../../empty.util';
 
 export class FormFieldMetadataValueObject {
   metadata?: string;
-  value: string;
+  value: any;
   display: string;
   language: any;
   authority: string;
@@ -11,14 +11,14 @@ export class FormFieldMetadataValueObject {
   closed: boolean;
   label: string;
 
-  constructor(value: string,
+  constructor(value: any = null,
               language: any = null,
               authority: string = null,
               display: string = null,
+              place: number = 0,
               confidence: number = -1,
-              place: number = -1,
               metadata: string = null) {
-    this.value = value;
+    this.value = isNotNull(value) ? ((typeof value === 'string') ? value.trim() : value) : null;
     this.language = language;
     this.authority = authority;
     this.display = display || value;
@@ -39,4 +39,8 @@ export class FormFieldMetadataValueObject {
   hasAuthority(): boolean {
     return isNotEmpty(this.authority);
   }
+
+  hasValue(): boolean {
+    return isNotEmpty(this.value);
+  }
 }
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
index 57e4a4cacb..6ad244f298 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -4,20 +4,19 @@ import { FormFieldModel } from '../models/form-field.model';
 import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
 import { isNotEmpty } from '../../../empty.util';
 import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/date-picker/date-picker.component';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 export class DateFieldParser extends FieldParser {
 
-  public modelFactory(): any {
+  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
     const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel();
 
     inputDateModelConfig.toggleIcon = 'fa fa-calendar';
-
-    const dateModel = new DynamicDsDatePickerModel(inputDateModelConfig);
-
+    this.setValues(inputDateModelConfig as any, fieldValue);
     // Init Data and validity check
-    if (isNotEmpty(this.getInitFieldValue())) {
+    if (isNotEmpty(inputDateModelConfig.value)) {
       let malformedData = false;
-      const value = this.getInitFieldValue().toString();
+      const value = inputDateModelConfig.value.toString();
       if (value.length >= 4) {
         const valuesArray = value.split(DS_DATE_PICKER_SEPARATOR);
         if (valuesArray.length < 4) {
@@ -29,12 +28,8 @@ export class DateFieldParser extends FieldParser {
           }
         }
 
-        if (!malformedData) {
-          dateModel.valueUpdates.next(this.getInitFieldValue());
-        } else {
+        if (malformedData) {
           // TODO Set error message
-          dateModel.malformedDate = true;
-          // TODO
           // const errorMessage = 'The stored date is not compliant';
           // dateModel.validators = Object.assign({}, dateModel.validators, {malformedDate: null});
           // dateModel.errorMessages = Object.assign({}, dateModel.errorMessages, {malformedDate: errorMessage});
@@ -44,6 +39,7 @@ export class DateFieldParser extends FieldParser {
       }
 
     }
+    const dateModel = new DynamicDsDatePickerModel(inputDateModelConfig);
     return dateModel;
   }
 }
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 29a133171d..9845f1772d 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -118,9 +118,9 @@ export abstract class FieldParser {
       const values: FormFieldMetadataValueObject[] = [];
       fieldIds.forEach((id) => {
         if (this.initFormValues.hasOwnProperty(id)) {
-          const valueObj: FormFieldMetadataValueObject = Object.create({});
+          const valueObj: FormFieldMetadataValueObject = Object.assign(new FormFieldMetadataValueObject(), this.initFormValues[id][innerIndex]);
           valueObj.metadata = id;
-          valueObj.value = this.initFormValues[id][innerIndex];
+          // valueObj.value = this.initFormValues[id][innerIndex];
           values.push(valueObj);
         }
       });
@@ -243,16 +243,21 @@ export abstract class FieldParser {
 
       if (typeof fieldValue === 'object') {
         modelConfig.language = fieldValue.language;
-        if (hasValue(fieldValue.language)) {
-          // Instance of FormFieldLanguageValueObject
-          modelConfig.value = fieldValue.value;
-        } else if (hasValue(fieldValue.metadata)) {
-          // Is a combobox field's value
-          modelConfig.value = fieldValue.value;
-        } else {
-          // Instance of FormFieldMetadataValueObject
+        if (forceValueAsObj) {
           modelConfig.value = fieldValue;
+        } else {
+          modelConfig.value = fieldValue.value;
         }
+        // if (hasValue(fieldValue.language)) {
+        //   // Instance of FormFieldLanguageValueObject
+        //   modelConfig.value = fieldValue.value;
+        // } else if (hasValue(fieldValue.metadata)) {
+        //   // Is a combobox field's value
+        //   modelConfig.value = fieldValue.value;
+        // } else {
+        //   // Instance of FormFieldMetadataValueObject
+        //   modelConfig.value = fieldValue;
+        // }
       } else {
         if (forceValueAsObj) {
           // If value isn't an instance of FormFieldMetadataValueObject instantiate it
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index 3b1bfc935c..c5a4f50e0c 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -68,7 +68,6 @@ export class OneboxFieldParser extends FieldParser {
       if (isNotEmpty(fieldValue)) {
         selectModelConfig.value = fieldValue.metadata;
       }
-      selectModelConfig.disabled = true;
       inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
 
       const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + COMBOBOX_VALUE_SUFFIX, true, true);
diff --git a/src/app/shared/form/form.actions.ts b/src/app/shared/form/form.actions.ts
index b1d5f2b3e3..7023d6bba1 100644
--- a/src/app/shared/form/form.actions.ts
+++ b/src/app/shared/form/form.actions.ts
@@ -114,6 +114,29 @@ export class FormAddError implements Action {
   }
 }
 
+export class FormRemoveErrorAction implements Action {
+  type = FormActionTypes.FORM_REMOVE_ERROR;
+  payload: {
+    formId: string,
+    fieldId: string
+  };
+
+  constructor(formId: string, fieldId: string) {
+    this.payload = {formId, fieldId};
+  }
+}
+
+export class FormClearErrorsAction implements Action {
+  type = FormActionTypes.FORM_CLEAR_ERRORS;
+  payload: {
+    formId: string
+  };
+
+  constructor(formId: string) {
+    this.payload = {formId};
+  }
+}
+
 /* tslint:enable:max-classes-per-file */
 
 /**
@@ -125,3 +148,5 @@ export type FormAction = FormInitAction
   | FormRemoveAction
   | FormStatusChangeAction
   | FormAddError
+  | FormClearErrorsAction
+  | FormRemoveErrorAction
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index 99712bde9c..981aed083e 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -10,7 +10,13 @@ import {
 import { Store } from '@ngrx/store';
 
 import { AppState } from '../../app.reducer';
-import { FormChangeAction, FormInitAction, FormRemoveAction, FormStatusChangeAction } from './form.actions';
+import {
+  FormChangeAction,
+  FormInitAction,
+  FormRemoveAction,
+  FormRemoveErrorAction,
+  FormStatusChangeAction
+} from './form.actions';
 import { FormBuilderService } from './builder/form-builder.service';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
@@ -144,7 +150,7 @@ export class FormComponent implements OnDestroy, OnInit {
         .filter((formState: FormEntry) => !!formState && !isEmpty(formState.errors))
         .map((formState) => formState.errors)
         .distinctUntilChanged()
-        .delay(100) // this terrible delay is here to prevent the detection change error
+        // .delay(100) // this terrible delay is here to prevent the detection change error
         .subscribe((errors: FormError[]) => {
           const {formGroup, formModel} = this;
 
@@ -172,10 +178,10 @@ export class FormComponent implements OnDestroy, OnInit {
    * Method provided by Angular. Invoked when the instance is destroyed
    */
   ngOnDestroy() {
-    this.store.dispatch(new FormRemoveAction(this.formId));
     this.subs
       .filter((sub) => hasValue(sub))
       .forEach((sub) => sub.unsubscribe());
+    this.store.dispatch(new FormRemoveAction(this.formId));
   }
 
   /**
@@ -206,7 +212,6 @@ export class FormComponent implements OnDestroy, OnInit {
   }
 
   onChange(event) {
-    console.log(event, this.formGroup);
     const action: FormChangeAction = new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel));
 
     this.store.dispatch(action);
@@ -215,7 +220,10 @@ export class FormComponent implements OnDestroy, OnInit {
     this.change.emit(event);
     const control: FormControl = event.control;
 
-    control.setErrors(null);
+    // control.setErrors(null);
+    if (control.valid) {
+      this.store.dispatch(new FormRemoveErrorAction(this.formId, event.model.id));
+    }
   }
 
   /**
diff --git a/src/app/shared/form/form.reducers.ts b/src/app/shared/form/form.reducers.ts
index d06db331eb..c65f2405ec 100644
--- a/src/app/shared/form/form.reducers.ts
+++ b/src/app/shared/form/form.reducers.ts
@@ -1,9 +1,15 @@
 import {
-  FormAction, FormActionTypes, FormAddError, FormChangeAction, FormInitAction, FormRemoveAction,
+  FormAction,
+  FormActionTypes,
+  FormAddError,
+  FormChangeAction, FormClearErrorsAction,
+  FormInitAction,
+  FormRemoveAction,
+  FormRemoveErrorAction,
   FormStatusChangeAction
 } from './form.actions';
 import { hasValue } from '../empty.util';
-import { uniqWith, isEqual } from 'lodash';
+import { isEqual, uniqWith } from 'lodash';
 
 export interface FormError {
   message: string;
@@ -45,6 +51,14 @@ export function formReducer(state = initialState, action: FormAction): FormState
       return addFormErrors(state, action as FormAddError)
     }
 
+    case FormActionTypes.FORM_REMOVE_ERROR: {
+      return removeFormError(state, action as FormRemoveErrorAction)
+    }
+
+    case FormActionTypes.FORM_CLEAR_ERRORS: {
+      return clearsFormErrors(state, action as FormClearErrorsAction)
+    }
+
     default: {
       return state;
     }
@@ -60,7 +74,7 @@ function addFormErrors(state: FormState, action: FormAddError) {
     };
 
     return Object.assign({}, state, {
-      [ formId ]: {
+      [formId]: {
         data: state[formId].data,
         valid: state[formId].valid,
         errors: state[formId].errors ? uniqWith(state[formId].errors.concat(error), isEqual) : [].concat(error),
@@ -71,6 +85,31 @@ function addFormErrors(state: FormState, action: FormAddError) {
   }
 }
 
+function removeFormError(state: FormState, action: FormRemoveErrorAction) {
+  const formId = action.payload.formId;
+  const fieldId = action.payload.fieldId;
+  if (hasValue(state[formId])) {
+    const errors = state[formId].errors.filter((error) => error.fieldId !== fieldId);
+    const newState = Object.assign({}, state);
+    newState[formId] = Object.assign({}, state[formId], {errors});
+    return newState;
+  } else {
+    return state;
+  }
+}
+
+function clearsFormErrors(state: FormState, action: FormClearErrorsAction) {
+  const formId = action.payload.formId;
+  if (hasValue(state[formId])) {
+    const errors = [];
+    const newState = Object.assign({}, state);
+    newState[formId] = Object.assign({}, state[formId], {errors});
+    return newState;
+  } else {
+    return state;
+  }
+}
+
 /**
  * Init form state.
  *
@@ -82,22 +121,18 @@ function addFormErrors(state: FormState, action: FormAddError) {
  *    the new state, with the form initialized.
  */
 function initForm(state: FormState, action: FormInitAction): FormState {
-  if (!hasValue(state[ action.payload.formId ])) {
+  const formState = {
+    data: action.payload.formData,
+    valid: action.payload.valid,
+    errors: []
+  };
+  if (!hasValue(state[action.payload.formId])) {
     return Object.assign({}, state, {
-      [ action.payload.formId ]: {
-        data: action.payload.formData,
-        valid: action.payload.valid,
-        errors: []
-      }
+      [action.payload.formId]: formState
     });
   } else {
     const newState = Object.assign({}, state);
-    newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
-        data: action.payload.formData,
-        valid: action.payload.valid,
-        errors: []
-      }
-    );
+    newState[action.payload.formId] = Object.assign({}, newState[action.payload.formId], formState);
     return newState;
   }
 }
@@ -113,18 +148,18 @@ function initForm(state: FormState, action: FormInitAction): FormState {
  *    the new state, with the data changed.
  */
 function changeDataForm(state: FormState, action: FormChangeAction): FormState {
-  if (!hasValue(state[ action.payload.formId ])) {
+  if (!hasValue(state[action.payload.formId])) {
     return Object.assign({}, state, {
-      [ action.payload.formId ]: {
+      [action.payload.formId]: {
         data: action.payload.formData,
-        valid: state[ action.payload.formId ].valid
+        valid: state[action.payload.formId].valid
       }
     });
   } else {
     const newState = Object.assign({}, state);
-    newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
+    newState[action.payload.formId] = Object.assign({}, newState[action.payload.formId], {
         data: action.payload.formData,
-        valid: state[ action.payload.formId ].valid
+        valid: state[action.payload.formId].valid
       }
     );
     return newState;
@@ -142,17 +177,17 @@ function changeDataForm(state: FormState, action: FormChangeAction): FormState {
  *    the new state, with the status changed.
  */
 function changeStatusForm(state: FormState, action: FormStatusChangeAction): FormState {
-  if (!hasValue(state[ action.payload.formId ])) {
+  if (!hasValue(state[action.payload.formId])) {
     return Object.assign({}, state, {
-      [ action.payload.formId ]: {
-        data: state[ action.payload.formId ].data,
+      [action.payload.formId]: {
+        data: state[action.payload.formId].data,
         valid: action.payload.valid
       }
     });
   } else {
     const newState = Object.assign({}, state);
-    newState[ action.payload.formId ] = Object.assign({}, newState[ action.payload.formId ], {
-        data: state[ action.payload.formId ].data,
+    newState[action.payload.formId] = Object.assign({}, newState[action.payload.formId], {
+        data: state[action.payload.formId].data,
         valid: action.payload.valid
       }
     );
@@ -171,9 +206,9 @@ function changeStatusForm(state: FormState, action: FormStatusChangeAction): For
  *    the new state, with the form initialized.
  */
 function removeForm(state: FormState, action: FormRemoveAction): FormState {
-  if (hasValue(state[ action.payload.formId ])) {
+  if (hasValue(state[action.payload.formId])) {
     const newState = Object.assign({}, state);
-    delete newState[ action.payload.formId ];
+    delete newState[action.payload.formId];
     return newState;
   } else {
     return state;
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
index 2adef27179..f890d90012 100644
--- a/src/app/shared/form/form.service.ts
+++ b/src/app/shared/form/form.service.ts
@@ -84,7 +84,7 @@ export class FormService {
 
       error[errorKey] = message; // assign message
 
-      // if form control model has errorMessages object, create it
+      // if form control model has not errorMessages object, create it
       if (!model.errorMessages) {
         model.errorMessages = {};
       }
diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html
index 5eb45a0bfb..55e0c39078 100644
--- a/src/app/shared/number-picker/number-picker.component.html
+++ b/src/app/shared/number-picker/number-picker.component.html
@@ -1,7 +1,8 @@
-<div class="d-flex flex-column align-items-center justify-content-around">
+<div class="d-flex flex-column align-items-center justify-content-around mr-3">
     <button
-      type="button"
       class="btn btn-link"
+      type="button"
+      tabindex="-1"
       [disabled]="disabled"
       (click)="increment()">
       <span class="chevron"></span>
@@ -9,22 +10,23 @@
     </button>
     <input
       type="text"
-      class="form-control"
+      class="form-control d-inline-block text-center"
       maxlength="{{size}}"
       size="{{size}}"
       placeholder="{{placeholder}}"
       [name]="name"
       [(ngModel)]="value"
-      (change)="update($event)"
-      (focus)="onFocus()"
+      (change)="update($event); $event.stopPropagation();"
+      (focus)="onFocus($event); $event.stopPropagation();"
       [readonly]="disabled"
       [disabled]="disabled"
       [ngClass]="{'is-invalid': invalid}"
       aria-label="name"
     >
     <button
-      type="button"
       class="btn btn-link"
+      type="button"
+      tabindex="-1"
       [disabled]="disabled"
       (click)="decrement()">
       <span class="chevron bottom"></span>
diff --git a/src/app/shared/number-picker/number-picker.component.scss b/src/app/shared/number-picker/number-picker.component.scss
index 33ed45b295..4fa2f3ac21 100644
--- a/src/app/shared/number-picker/number-picker.component.scss
+++ b/src/app/shared/number-picker/number-picker.component.scss
@@ -1,17 +1,7 @@
-.ngb-tp {
-  display: flex;
-  align-items: center;
-}
-.ngb-tp-hour, .ngb-tp-minute, .ngb-tp-second, .ngb-tp-meridian {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-}
-.ngb-tp-spacer {
-  width: 1em;
-  text-align: center;
+:host {
+  outline: none;
 }
+
 .chevron::before {
   border-style: solid;
   border-width: 0.29em 0.29em 0 0;
@@ -33,12 +23,7 @@
   -ms-transform: rotate(135deg);
   transform: rotate(135deg);
 }
+
 input {
-  text-align: center;
-  display: inline-block;
   max-width: 80px !important;
 }
-
-//.error {
-//  border-color: red;
-//}
diff --git a/src/app/shared/number-picker/number-picker.component.ts b/src/app/shared/number-picker/number-picker.component.ts
index 67b5107b79..b4172b7182 100644
--- a/src/app/shared/number-picker/number-picker.component.ts
+++ b/src/app/shared/number-picker/number-picker.component.ts
@@ -11,31 +11,22 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f
 })
 
 export class NumberPickerComponent implements OnInit, ControlValueAccessor {
-  @Output()
-  selected = new EventEmitter<number>();
-  @Output()
-  remove = new EventEmitter<number>();
-  @Output()
-  change = new EventEmitter<any>();
 
-  @Input()
-  step: number;
-  @Input()
-  min: number;
-  @Input()
-  max: number;
-  @Input()
-  size: number;
-  @Input()
-  placeholder: string;
-  @Input()
-  name: string;
-  @Input()
-  disabled: boolean;
-  @Input()
-  invalid: boolean;
-  @Input()
-  value: number;
+  @Input() step: number;
+  @Input() min: number;
+  @Input() max: number;
+  @Input() size: number;
+  @Input() placeholder: string;
+  @Input() name: string;
+  @Input() disabled: boolean;
+  @Input() invalid: boolean;
+  @Input() value: number;
+
+  @Output() selected = new EventEmitter<number>();
+  @Output() remove = new EventEmitter<number>();
+  @Output() change = new EventEmitter<any>();
+  @Output() focus = new EventEmitter<any>();
+
   lastValue: number;
 
   constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {
@@ -109,19 +100,18 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
         this.value = null;
         this.emitChange();
       } else {
-        this.value = this.lastValue;
-        this.emitChange();
+        this.value = undefined;
       }
     } catch (e) {
-      this.value = this.lastValue;
-      this.emitChange();
+      this.value = undefined;
     }
   }
 
-  onFocus() {
+  onFocus(event) {
     if (this.value) {
       this.lastValue = this.value;
     }
+    this.focus.emit(event);
   }
 
   writeValue(value) {
@@ -135,10 +125,11 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
   }
 
   registerOnChange(fn) {
-    // this.change = fn;
+    return
   }
 
   registerOnTouched(fn) {
+    return
   }
 
   emitChange() {

From 98f79a7f675532523ebf13240e41732b0f7b50dd Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 11 Jun 2018 11:55:02 +0200
Subject: [PATCH 05/41] Fixed merge issue

---
 .../dynamic-group/dynamic-group.components.ts |  2 +-
 .../models/form-field-metadata-value.model.ts |  2 +-
 .../notifications/models/notification-type.ts |  3 +-
 src/app/shared/object.util.ts                 | 52 +++++++++++++++++++
 4 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/app/shared/object.util.ts

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index 6662f7e24b..7ad62ce479 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -81,7 +81,7 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
 
     this.formId = this.formService.getUniqueId(this.model.id);
     this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {});
-    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField, this.EnvConfig.submission.metadata.icons);
+    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField);
     this.subs.push(
       this.chips.chipsItems
         .subscribe((subItems: any[]) => {
diff --git a/src/app/shared/form/builder/models/form-field-metadata-value.model.ts b/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
index ebcdc9264c..542e5d029e 100644
--- a/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
+++ b/src/app/shared/form/builder/models/form-field-metadata-value.model.ts
@@ -1,4 +1,4 @@
-import { isNotEmpty } from '../../../empty.util';
+import { isNotEmpty, isNotNull } from '../../../empty.util';
 
 export class FormFieldMetadataValueObject {
   metadata?: string;
diff --git a/src/app/shared/notifications/models/notification-type.ts b/src/app/shared/notifications/models/notification-type.ts
index 8ef5d790b5..935129943e 100644
--- a/src/app/shared/notifications/models/notification-type.ts
+++ b/src/app/shared/notifications/models/notification-type.ts
@@ -2,6 +2,5 @@ export enum NotificationType {
   Success = 'alert-success',
   Error = 'alert-danger',
   Info = 'alert-info',
-  Warning = 'alert-warning',
-  // Bare = 'bare'
+  Warning = 'alert-warning'
 }
diff --git a/src/app/shared/object.util.ts b/src/app/shared/object.util.ts
new file mode 100644
index 0000000000..50680d6d32
--- /dev/null
+++ b/src/app/shared/object.util.ts
@@ -0,0 +1,52 @@
+import { isNotEmpty } from './empty.util';
+import { isEqual, isObject, transform } from 'lodash';
+
+/**
+ * Returns passed object without specified property
+ */
+export function deleteProperty(object, key): object {
+  const {[key]: deletedKey, ...otherKeys} = object;
+  return otherKeys;
+}
+
+/**
+ * Returns true if the passed value is null or undefined.
+ * hasNoValue();              // true
+ * hasNoValue(null);          // true
+ * hasNoValue(undefined);     // true
+ * hasNoValue('');            // false
+ * hasNoValue({});            // false
+ * hasNoValue([]);            // false
+ * hasNoValue(function() {}); // false
+ */
+export function isObjectEmpty(obj: any): boolean {
+  const objectType = typeof obj;
+  if (objectType === 'object') {
+    if (Object.keys(obj).length === 0) {
+      return true;
+    } else {
+      let result = true;
+      for (const key in obj) {
+        if (isNotEmpty(obj[key])) {
+          result = false;
+          break;
+        }
+      }
+      return result;
+    }
+  }
+}
+
+export function difference(object, base) {
+  const changes = (o, b) => {
+    return transform(o, (result, value, key) => {
+      if (!isEqual(value, b[key]) && isNotEmpty(value)) {
+        const resultValue = (isObject(value) && isObject(b[key])) ? changes(value, b[key]) : value;
+        if (!isObjectEmpty(resultValue)) {
+          result[key] = resultValue;
+        }
+      }
+    });
+  };
+  return changes(object, base);
+}

From 6b8330fee14bec6291dd0d18663e5fb0c02e1b18 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 13 Jun 2018 11:28:11 +0200
Subject: [PATCH 06/41] updated with latest changes

---
 .../ds-dynamic-form-control.component.html    |  1 +
 .../date-picker/date-picker.component.html    |  3 +
 .../date-picker/date-picker.component.ts      |  7 +-
 .../dynamic-group.component.html              |  6 +-
 .../dynamic-group/dynamic-group.components.ts | 65 ++++++-----------
 .../dynamic-group/dynamic-group.model.ts      | 33 ++++++++-
 .../form/builder/form-builder.service.ts      | 11 +--
 .../builder/parsers/group-field-parser.ts     |  4 +-
 .../shared/form/builder/parsers/row-parser.ts |  2 +-
 src/app/shared/form/form.component.html       |  1 +
 src/app/shared/form/form.component.ts         | 38 ++++++++--
 src/app/shared/form/form.service.ts           | 71 ++++++++++---------
 12 files changed, 150 insertions(+), 92 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
index 5614e23c4a..a044a78e8e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -288,6 +288,7 @@
           <ds-dynamic-group [model]="model"
                             [formId]="formId"
                             [group]="group"
+                            [showErrorMessages]="showErrorMessages"
                             (blur)="onBlur($event)"
                             (change)="onValueChange($event)"
                             (focus)="onFocus($event)"></ds-dynamic-group>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
index 96ee0dd38e..a5d6d63418 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -10,6 +10,7 @@
     [value]="year"
     [invalid]="showErrorMessages"
     [placeholder]='yearPlaceholder'
+    (blur)="onBlur($event)"
     (change)="onChange($event)"
     (focus)="onFocus($event)"
   ></ds-number-picker>
@@ -24,6 +25,7 @@
     [value]="month"
     [placeholder]="monthPlaceholder"
     [disabled]="!year || model.disabled"
+    (blur)="onBlur($event)"
     (change)="onChange($event)"
     (focus)="onFocus($event)"
   ></ds-number-picker>
@@ -38,6 +40,7 @@
     [value]="day"
     [placeholder]="dayPlaceholder"
     [disabled]="!month || model.disabled"
+    (blur)="onBlur($event)"
     (change)="onChange($event)"
     (focus)="onFocus($event)"
   ></ds-number-picker>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 6d50d4375b..bf3a5ed98e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { DynamicDsDatePickerModel } from './date-picker.model';
 import { hasValue, isNotEmpty } from '../../../../../empty.util';
 
@@ -23,6 +23,7 @@ export class DsDatePickerComponent implements OnInit {
 
   @Output() selected = new EventEmitter<number>();
   @Output() remove = new EventEmitter<number>();
+  @Output() blur = new EventEmitter<any>();
   @Output() change = new EventEmitter<any>();
   @Output() focus = new EventEmitter<any>();
 
@@ -76,6 +77,10 @@ export class DsDatePickerComponent implements OnInit {
 
   }
 
+  onBlur(event) {
+    this.blur.emit();
+  }
+
   onChange(event) {
     // update year-month-day
     switch (event.field) {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
index c628eaf8e5..d82ab9133d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.html
@@ -15,14 +15,16 @@
         (click)="expandForm()"></span>
 </a>
 
-<div class="pt-2" [ngClass]="{'border-top': !invalid, 'border border-danger': invalid}">
+<div class="pt-2" [ngClass]="{'border-top': !showErrorMessages, 'border border-danger': showErrorMessages}">
   <div *ngIf="!(formCollapsed | async)" class="pl-2 row"  @shrinkInOut>
     <ds-form #formRef="formComponent"
              class="col-sm-12 col-md-8 col-lg-9 col-xl-10 pl-0"
              [formId]="formId"
              [formModel]="formModel"
              [displaySubmit]="false"
-             (dfChange)="onChange($event)"></ds-form>
+             [emitChange]="false"
+             (dfBlur)="onBlur($event)"
+             (dfFocus)="onFocus($event)"></ds-form>
 
 
     <div *ngIf="!(formCollapsed | async)" class="col p-0 m-0 d-flex justify-content-center align-items-center">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index 7ad62ce479..2d5f33eac0 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -11,12 +11,7 @@ import {
 } from '@angular/core';
 
 import { Observable } from 'rxjs/Observable';
-import {
-  DynamicFormControlEvent,
-  DynamicFormControlModel,
-  DynamicFormGroupModel,
-  DynamicInputModel
-} from '@ng-dynamic-forms/core';
+import { DynamicFormControlModel, DynamicFormGroupModel, DynamicInputModel } from '@ng-dynamic-forms/core';
 import { isEqual } from 'lodash';
 
 import { DynamicGroupModel, PLACEHOLDER_PARENT_METADATA } from './dynamic-group.model';
@@ -25,7 +20,6 @@ import { SubmissionFormsModel } from '../../../../../../core/shared/config/confi
 import { FormService } from '../../../../form.service';
 import { FormComponent } from '../../../../form.component';
 import { Chips } from '../../../../../chips/models/chips.model';
-import { DynamicLookupModel } from '../lookup/dynamic-lookup.model';
 import { hasValue, isEmpty, isNotEmpty } from '../../../../../empty.util';
 import { shrinkInOut } from '../../../../../animations/shrink';
 import { ChipsItem } from '../../../../../chips/models/chips-item.model';
@@ -48,6 +42,7 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
   @Input() formId: string;
   @Input() group: FormGroup;
   @Input() model: DynamicGroupModel;
+  @Input() showErrorMessages = false;
 
   @Output() blur: EventEmitter<any> = new EventEmitter<any>();
   @Output() change: EventEmitter<any> = new EventEmitter<any>();
@@ -57,7 +52,6 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
   public formCollapsed = Observable.of(false);
   public formModel: DynamicFormControlModel[];
   public editMode = false;
-  public invalid = false;
 
   private selectedChipItem: ChipsItem;
   private subs: Subscription[] = [];
@@ -72,7 +66,7 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
 
   ngOnInit() {
     const config = {rows: this.model.formConfiguration} as SubmissionFormsModel;
-    if (isNotEmpty(this.model.value)) {
+    if (!this.model.isEmpty()) {
       this.formCollapsed = Observable.of(true);
     }
     this.model.valueUpdates.subscribe((value: any[]) => {
@@ -80,38 +74,22 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
     });
 
     this.formId = this.formService.getUniqueId(this.model.id);
-    this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {});
-    this.chips = new Chips(this.model.value, 'value', this.model.mandatoryField);
+    this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {}, this.model.submissionScope, this.model.readOnly);
+    const initChipsValue = this.model.isEmpty() ? [] : this.model.value;
+    this.chips = new Chips(initChipsValue, 'value', this.model.mandatoryField);
     this.subs.push(
       this.chips.chipsItems
         .subscribe((subItems: any[]) => {
           const items = this.chips.getChipsItems();
           // Does not emit change if model value is equal to the current value
           if (!isEqual(items, this.model.value)) {
-            if (isEmpty(items)) {
-              // If items is empty, last element has been removed
-              // so emit an empty value that allows to dispatch
-              // a remove JSON PATCH operation
-              const emptyItem = Object.create({});
-              Object.keys(this.model.value[0])
-                .forEach((key) => {
-                  emptyItem[key] = null;
-                });
-              items.push(emptyItem);
+            // if ((isNotEmpty(items) && !this.model.isEmpty()) || (isEmpty(items) && !this.model.isEmpty())) {
+            if (!(isEmpty(items) && this.model.isEmpty())) {
+              this.model.valueUpdates.next(items);
+              this.change.emit();
             }
-
-            this.model.valueUpdates.next(items);
-            this.change.emit();
           }
         }),
-      // Invalid state for year
-      this.group.get(this.model.id).statusChanges.subscribe((state) => {
-        if (state === 'INVALID') {
-          this.invalid = true;
-        } else {
-          this.invalid = false;
-        }
-      })
     )
   }
 
@@ -130,8 +108,8 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
     return res;
   }
 
-  onChange(event: DynamicFormControlEvent) {
-    return
+  onBlur(event) {
+    this.blur.emit();
   }
 
   onChipSelected(event) {
@@ -142,26 +120,23 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
       modelRow.group.forEach((model: DynamicInputModel) => {
         const value = (this.selectedChipItem.item[model.name] === PLACEHOLDER_PARENT_METADATA
           || this.selectedChipItem.item[model.name].value === PLACEHOLDER_PARENT_METADATA)
-            ? null
-            : this.selectedChipItem.item[model.name];
+          ? null
+          : this.selectedChipItem.item[model.name];
         if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
           model.valueUpdates.next(value.display);
         } else {
           model.valueUpdates.next(value);
         }
-        // if (model instanceof DynamicLookupModel) {
-        //   (model as DynamicLookupModel).valueUpdates.next(value);
-        // } else if (model instanceof DynamicInputModel) {
-        //   model.valueUpdates.next(value);
-        // } else {
-        //   (model as any).value = value;
-        // }
       });
     });
 
     this.editMode = true;
   }
 
+  onFocus(event) {
+    this.focus.emit(event);
+  }
+
   collapseForm() {
     this.formCollapsed = Observable.of(true);
     this.clear();
@@ -178,7 +153,9 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
       this.editMode = false;
     }
     this.resetForm();
-    // this.change.emit(event);
+    if (!this.model.isEmpty()) {
+      this.formCollapsed = Observable.of(true);
+    }
   }
 
   save() {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
index 4ec029661b..59e442b4e9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
@@ -1,6 +1,8 @@
 import { DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
 import { FormRowModel } from '../../../../../../core/shared/config/config-submission-forms.model';
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { isEmpty, isNull } from '../../../../../empty.util';
 
 export const DYNAMIC_FORM_CONTROL_TYPE_RELATION = 'RELATION';
 export const PLACEHOLDER_PARENT_METADATA = '#PLACEHOLDER_PARENT_METADATA_VALUE#';
@@ -14,6 +16,7 @@ export interface DynamicGroupModelConfig extends DsDynamicInputModelConfig {
   name: string,
   relationFields: string[],
   scopeUUID: string,
+  submissionScope: string;
   value?: any;
 }
 
@@ -25,7 +28,8 @@ export class DynamicGroupModel extends DsDynamicInputModel {
   @serializable() mandatoryField: string;
   @serializable() relationFields: string[];
   @serializable() scopeUUID: string;
-  @serializable() value: any[];
+  @serializable() submissionScope: string;
+  @serializable() _value: any[];
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_RELATION;
 
   constructor(config: DynamicGroupModelConfig, layout?: DynamicFormControlLayout) {
@@ -35,7 +39,32 @@ export class DynamicGroupModel extends DsDynamicInputModel {
     this.mandatoryField = config.mandatoryField;
     this.relationFields = config.relationFields;
     this.scopeUUID = config.scopeUUID;
+    this.submissionScope = config.submissionScope;
     const value = config.value || [];
-    this.valueUpdates.next(value)
+    this.valueUpdates.next(value);
+  }
+
+  get value() {
+    if (isEmpty(this._value)) {
+      // If items is empty, last element has been removed
+      // so emit an empty value that allows to dispatch
+      // a remove JSON PATCH operation
+      const emptyItem = Object.create({});
+      emptyItem[this.mandatoryField] = null;
+      this.relationFields
+        .forEach((field) => {
+          emptyItem[field] = null;
+        });
+      return [emptyItem];
+    }
+    return this._value
+  }
+
+  set value(value) {
+    this._value = value;
+  }
+
+  isEmpty() {
+    return (this.value.length === 1 && isNull(this.value[0][this.mandatoryField]));
   }
 }
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index 2b0cddaaa4..b33018ea0c 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -162,12 +162,13 @@ export class FormBuilderService extends DynamicFormService {
             Object.keys(groupValue)
               .forEach((key) => {
                 const normValue = normalizeValue(controlModel, groupValue[key], groupIndex);
-                if (iterateResult.hasOwnProperty(key)) {
-                  iterateResult[key].push(normValue);
-                } else {
-                  iterateResult[key] = [normValue];
+                if (normValue.hasValue()) {
+                  if (iterateResult.hasOwnProperty(key)) {
+                    iterateResult[key].push(normValue);
+                  } else {
+                    iterateResult[key] = [normValue];
+                  }
                 }
-                // newGroupValue[key] = normalizeValue(controlModel, groupValue[key], groupIndex);
               });
             // controlArrayValue.push(newGroupValue);
           })
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
index cd897bb265..6c9ce6606a 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -13,7 +13,8 @@ export class GroupFieldParser extends FieldParser {
   constructor(protected configData: FormFieldModel,
               protected initFormValues,
               protected readOnly: boolean,
-              protected authorityUuid: string) {
+              protected submissionScope: string,
+              protected authorityUuid: string,) {
     super(configData, initFormValues, readOnly);
   }
 
@@ -21,6 +22,7 @@ export class GroupFieldParser extends FieldParser {
     const modelConfiguration: DynamicGroupModelConfig = this.initModel();
 
     modelConfiguration.scopeUUID = this.authorityUuid;
+    modelConfiguration.submissionScope = this.submissionScope;
     if (this.configData && this.configData.rows && this.configData.rows.length > 0) {
       modelConfiguration.formConfiguration = this.configData.rows;
       modelConfiguration.relationFields = [];
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
index 833ccfb6bd..3f76c1c5c1 100644
--- a/src/app/shared/form/builder/parsers/row-parser.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -90,7 +90,7 @@ export class RowParser {
           break;
 
         case 'group':
-          fieldModel = new GroupFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse();
+          fieldModel = new GroupFieldParser(fieldData, this.initFormValues, this.readOnly, this.submissionScope, this.authorityOptions.uuid).parse();
           break;
 
         case 'twobox':
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index 0539a57000..5dfaa4bec1 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -6,6 +6,7 @@
       [formGroup]="formGroup"
       [formModel]="formModel"
       [formLayout]="formLayout"
+      (change)="$event.stopPropagation();"
       (dfBlur)="onBlur($event)"
       (dfChange)="onChange($event)"
       (dfFocus)="onFocus($event)">
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index 981aed083e..7a894ca3e5 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -8,6 +8,7 @@ import {
   DynamicFormGroupModel, DynamicFormLayout,
 } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
+import { findIndex } from 'lodash';
 
 import { AppState } from '../../app.reducer';
 import {
@@ -37,6 +38,7 @@ import { isEmpty } from 'lodash';
 })
 export class FormComponent implements OnDestroy, OnInit {
 
+  private formErrors: FormError[] = [];
   private formValid: boolean;
 
   /**
@@ -44,6 +46,11 @@ export class FormComponent implements OnDestroy, OnInit {
    */
   @Input() displaySubmit = true;
 
+  /**
+   * A boolean that indicate if to emit a form change event
+   */
+  @Input() emitChange = true;
+
   /**
    * The form unique ID
    */
@@ -154,7 +161,9 @@ export class FormComponent implements OnDestroy, OnInit {
         .subscribe((errors: FormError[]) => {
           const {formGroup, formModel} = this;
 
-          errors.forEach((error: FormError) => {
+          errors
+            .filter((error: FormError) => findIndex(this.formErrors, {fieldId: error.fieldId}) === -1)
+            .forEach((error: FormError) => {
             const {fieldId} = error;
             let field: AbstractControl;
             if (!!this.parentFormModel) {
@@ -166,9 +175,29 @@ export class FormComponent implements OnDestroy, OnInit {
             if (field) {
               const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
               this.formService.addErrorToField(field, model, error.message);
+              // this.formService.validateAllFormFields(formGroup);
+              this.changeDetectorRef.detectChanges();
             }
           });
 
+          this.formErrors
+            .filter((error: FormError) => findIndex(errors, {fieldId: error.fieldId}) === -1)
+            .forEach((error: FormError) => {
+              const {fieldId} = error;
+              let field: AbstractControl;
+              if (!!this.parentFormModel) {
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel);
+              } else {
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel);
+              }
+
+              if (field) {
+                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
+                this.formService.removeErrorFromField(field, model, error.message);
+              }
+            });
+
+          this.formErrors = errors;
           this.changeDetectorRef.detectChanges();
         })
     );
@@ -217,10 +246,11 @@ export class FormComponent implements OnDestroy, OnInit {
     this.store.dispatch(action);
     this.formGroup.markAsPristine();
 
-    this.change.emit(event);
-    const control: FormControl = event.control;
+    if (this.emitChange) {
+      this.change.emit(event);
+    }
 
-    // control.setErrors(null);
+    const control: FormControl = event.control;
     if (control.valid) {
       this.store.dispatch(new FormRemoveErrorAction(this.formId, event.model.id));
     }
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
index f890d90012..f13bae1532 100644
--- a/src/app/shared/form/form.service.ts
+++ b/src/app/shared/form/form.service.ts
@@ -7,9 +7,9 @@ import { AppState } from '../../app.reducer';
 import { formObjectFromIdSelector } from './selectors';
 import { FormBuilderService } from './builder/form-builder.service';
 import { DynamicFormControlModel, DynamicFormGroupModel } from '@ng-dynamic-forms/core';
-import { isNotEmpty, isNotUndefined } from '../empty.util';
+import { isEmpty, isNotEmpty, isNotUndefined } from '../empty.util';
 import { find, uniqueId } from 'lodash';
-import { FormChangeAction } from './form.actions';
+import { FormChangeAction, FormRemoveErrorAction } from './form.actions';
 
 @Injectable()
 export class FormService {
@@ -75,39 +75,46 @@ export class FormService {
   }
 
   public addErrorToField(field: AbstractControl, model: DynamicFormControlModel, message: string) {
-    const errorFound = !!(find(field.errors, (err) => err === message));
 
-    // search for the same error in the formControl.errors property
-    if (!errorFound) {
-      const errorKey = uniqueId('error-'); // create a single key for the error
-      const error = {}; // create the error object
+    const error = {}; // create the error object
 
-      error[errorKey] = message; // assign message
-
-      // if form control model has not errorMessages object, create it
-      if (!model.errorMessages) {
-        model.errorMessages = {};
-      }
-
-      // put the error in the form control model
-      model.errorMessages[errorKey] = message;
-
-      // Use correct error messages from the model
-      const lastArray = message.split('.');
-      if (lastArray && lastArray.length > 0) {
-        const last = lastArray[lastArray.length - 1];
-        const modelMsg = model.errorMessages[last];
-        if (modelMsg && modelMsg.length > 0) {
-          model.errorMessages[errorKey] = modelMsg;
-        }
-      }
-
-      // add the error in the form control
-      field.setErrors(error);
-
-      // formGroup.markAsDirty();
-      field.markAsTouched();
+    // if form control model has not errorMessages object, create it
+    if (!model.errorMessages) {
+      model.errorMessages = {};
     }
+
+    // Use correct error messages from the model
+    const lastArray = message.split('.');
+    if (lastArray && lastArray.length > 0) {
+      // check if error code is already present in the set of model's validators
+      const last = lastArray[lastArray.length - 1];
+      const modelMsg = model.errorMessages[last];
+      if (isEmpty(modelMsg)) {
+        const errorKey = uniqueId('error-'); // create a single key for the error
+        error[errorKey] = true;
+        // put the error message in the form control model
+        model.errorMessages[errorKey] = message;
+      } else {
+        error[last] = modelMsg;
+      }
+    }
+
+    // add the error in the form control
+    field.setErrors(error);
+    field.markAsTouched();
+  }
+
+  public removeErrorFromField(field: AbstractControl, model: DynamicFormControlModel, message) {
+    const error = {};
+
+    // Use correct error messages from the model
+    const lastArray = message.split('.');
+    if (lastArray && lastArray.length > 0) {
+      const last = lastArray[lastArray.length - 1];
+      error[last] = null;
+    }
+    field.setErrors(error);
+    field.markAsUntouched();
   }
 
   public resetForm(formGroup: FormGroup, groupModel: DynamicFormControlModel[], formId: string) {

From d1d809910f7c930b632e02bb99ebb560d918c2f8 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 13 Jun 2018 18:25:09 +0200
Subject: [PATCH 07/41] Added unit test

---
 .../date-picker/date-picker.component.spec.ts |  98 +++++++++++
 .../models/ds-dynamic-input.model.ts          |   4 +-
 .../dynamic-group.component.spec.ts           | 159 ++++++++++++++++++
 .../list/dynamic-list-checkbox-group.model.ts |   2 +-
 .../list/dynamic-list.component.spec.ts       | 126 ++++++++++++++
 .../lookup/dynamic-lookup.component.spec.ts   | 124 ++++++++++++++
 ...amic-scrollable-dropdown.component.spec.ts | 121 +++++++++++++
 .../models/tag/dynamic-tag.component.spec.ts  | 117 +++++++++++++
 .../models/tag/dynamic-tag.model.spec.ts      | 143 ----------------
 .../dynamic-typeahead.component.spec.ts       | 118 +++++++++++++
 .../shared/testing/authority-service-stub.ts  |  12 ++
 11 files changed, 878 insertions(+), 146 deletions(-)
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
 delete mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
 create mode 100644 src/app/shared/testing/authority-service-stub.ts

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
new file mode 100644
index 0000000000..f7d5fc1501
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -0,0 +1,98 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import 'rxjs/add/observable/of';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { SortablejsModule } from 'angular-sortablejs';
+import { DsDatePickerComponent } from './date-picker.component';
+import { FormControl, FormGroup } from '@angular/forms';
+import { DynamicDsDatePickerModel } from './date-picker.model';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Date Picker component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        NgbModule.forRoot()
+      ],
+      declarations: [
+        DsDatePickerComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        DsDatePickerComponent,
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+           <ds-date-picker
+            [bindId]='bindId'
+            [group]='group'
+            [model]='model'
+            [showErrorMessages]='showErrorMessages'
+            (blur)='onBlur($event)'
+            (change)='onValueChange($event)'
+            (focus)='onFocus($event)'></ds-date-picker>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDatePickerComponent', inject([DsDatePickerComponent], (app: DsDatePickerComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group = new FormGroup({
+    date: new FormControl(),
+  });
+
+  inputDateModelConfig = {
+    disabled: false,
+    errorMessages: { required: 'You must enter at least the year.' },
+    id: 'date',
+    label: 'Date',
+    name: 'date',
+    placeholder: 'Date',
+    readOnly: false,
+    required: true,
+    toggleIcon: 'fa fa-calendar'
+  };
+
+  model = new DynamicDsDatePickerModel(this.inputDateModelConfig);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
index d8869f2829..f739c17cf3 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts
@@ -12,8 +12,8 @@ import { hasValue } from '../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
 
 export interface DsDynamicInputModelConfig extends DynamicInputModelConfig {
-  authorityOptions: AuthorityOptions;
-  languageCodes: LanguageCode[];
+  authorityOptions?: AuthorityOptions;
+  languageCodes?: LanguageCode[];
   language?: string;
   value?: any;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
new file mode 100644
index 0000000000..51b0838fd5
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -0,0 +1,159 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { TranslateModule } from '@ngx-translate/core';
+import 'rxjs/add/observable/of';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { DsDynamicGroupComponent } from './dynamic-group.components';
+import { DynamicGroupModel } from './dynamic-group.model';
+import { FormRowModel } from '../../../../../../core/shared/config/config-submission-forms.model';
+import { FormFieldModel } from '../../../models/form-field.model';
+import { FormBuilderService } from '../../../form-builder.service';
+import { FormService } from '../../../../form.service';
+import { GlobalConfig } from '../../../../../../../config/global-config.interface';
+import { GLOBAL_CONFIG } from '../../../../../../../config';
+import { FormComponent } from '../../../../form.component';
+import { DynamicFormValidationService } from '@ng-dynamic-forms/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../../../../../app.reducer';
+import { Observable } from 'rxjs/Observable';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Dynamic Group component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  const mockStore: Store<AppState> = jasmine.createSpyObj('store', {
+    dispatch: {},
+    select: Observable.of(true)
+  });
+
+  // async beforeEach
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule.forRoot(),
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        FormComponent,
+        DsDynamicGroupComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        DsDynamicGroupComponent,
+        DynamicFormValidationService,
+        FormBuilderService,
+        FormComponent,
+        FormService,
+        {provide: GLOBAL_CONFIG, useValue: {} as GlobalConfig},
+        {provide: Store, useValue: mockStore},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+           <ds-date-picker
+            [bindId]='bindId'
+            [group]='group'
+            [model]='model'
+            [showErrorMessages]='showErrorMessages'
+            (blur)='onBlur($event)'
+            (change)='onValueChange($event)'
+            (focus)='onFocus($event)'></ds-date-picker>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDynamicGroupComponent', inject([DsDynamicGroupComponent], (app: DsDynamicGroupComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group = new FormGroup({
+    date: new FormControl(),
+  });
+
+  groupModelConfig = {
+    disabled: false,
+    errorMessages: {required: 'You must specify at least one author.'},
+    formConfiguration: [{
+      fields: [{
+        hints: 'Enter the name of the author.',
+        input: {type: 'onebox'},
+        label: 'Authors',
+        languageCodes: [],
+        mandatory: 'true',
+        mandatoryMessage: 'Required field!',
+        repeatable: false,
+        selectableMetadata: [{
+          authority: 'RPAuthority',
+          closed: false,
+          metadata: 'dc.contributor.author'
+        }],
+      } as FormFieldModel]
+    } as FormRowModel, {
+      fields: [{
+        hints: 'Enter the affiliation of the author.',
+        input: {type: 'onebox'},
+        label: 'Affiliation',
+        languageCodes: [],
+        mandatory: 'false',
+        repeatable: false,
+        selectableMetadata: [{
+          authority: 'OUAuthority',
+          closed: false,
+          metadata: 'local.contributor.affiliation'
+        }]
+      } as FormFieldModel]
+    } as FormRowModel],
+    id: 'date',
+    label: 'Date',
+    mandatoryField: 'dc.contributor.author',
+    name: 'date',
+    placeholder: 'Date',
+    readOnly: false,
+    relationFields: ['local.contributor.affiliation'],
+    required: true,
+    scopeUUID: '43fe1f8c-09a6-4fcf-9c78-5d4fed8f2c8f',
+    submissionScope: undefined,
+    validators: {required: null}
+  };
+
+  model = new DynamicGroupModel(this.groupModelConfig);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
index 775da3bd33..1537a02cd1 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
@@ -11,7 +11,7 @@ import { hasValue } from '../../../../../empty.util';
 
 export interface DynamicListCheckboxGroupModelConfig extends DynamicFormGroupModelConfig {
   authorityOptions: AuthorityOptions;
-  groupLength: number;
+  groupLength?: number;
   repeatable: boolean;
   value?: any;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
new file mode 100644
index 0000000000..45bbbaf564
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
@@ -0,0 +1,126 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { DsDynamicListComponent } from './dynamic-list.component';
+import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { FormBuilderService } from '../../../form-builder.service';
+import { DynamicFormControlLayout, DynamicFormsCoreModule, DynamicFormValidationService } from '@ng-dynamic-forms/core';
+import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
+import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Dynamic List component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+    const authorityServiceStub = new AuthorityServiceStub();
+    const formBuilderServiceStub = new FormBuilderServiceStub();
+
+    TestBed.configureTestingModule({
+      imports: [
+        DynamicFormsCoreModule,
+        DynamicFormsNGBootstrapUIModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule.forRoot()
+      ],
+      declarations: [
+        DsDynamicListComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        AuthorityService,
+        ChangeDetectorRef,
+        DsDynamicListComponent,
+        DynamicFormValidationService,
+        FormBuilderService,
+        {provide: AuthorityService, useValue: authorityServiceStub},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-dynamic-list
+        [bindId]="bindId"
+        [group]="group"
+        [model]="model"
+        [showErrorMessages]="showErrorMessages"
+        (blur)="onBlur($event)"
+        (change)="onValueChange($event)"
+        (focus)="onFocus($event)"></ds-dynamic-list>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDynamicListComponent', inject([DsDynamicListComponent], (app: DsDynamicListComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group: FormGroup = new FormGroup({
+    list: new FormGroup({}),
+  });
+
+  inputListModelConfig = {
+    authorityOptions: {
+      closed: false,
+      metadata: 'list',
+      name: 'type_programme',
+      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+    } as AuthorityOptions,
+    disabled: false,
+    errorMessages: {required: 'You must enter at least the year.'},
+    id: 'list',
+    label: 'Programme',
+    name: 'list',
+    placeholder: 'Programme',
+    readOnly: false,
+    required: true,
+    repeatable: true
+  };
+
+  layout: DynamicFormControlLayout = {
+    element: {
+      group: ''
+    }
+  };
+
+  model = new DynamicListCheckboxGroupModel(this.inputListModelConfig, this.layout);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
new file mode 100644
index 0000000000..8a92106387
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
@@ -0,0 +1,124 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
+import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
+import { DsDynamicLookupComponent } from './dynamic-lookup.component';
+import { DynamicLookupModel } from './dynamic-lookup.model';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { TranslateModule } from '@ngx-translate/core';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Dynamic Lookup component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+    const authorityServiceStub = new AuthorityServiceStub();
+    const formBuilderServiceStub = new FormBuilderServiceStub();
+
+    TestBed.configureTestingModule({
+      imports: [
+        DynamicFormsCoreModule,
+        DynamicFormsNGBootstrapUIModule,
+        FormsModule,
+        InfiniteScrollModule,
+        ReactiveFormsModule,
+        NgbModule.forRoot(),
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        DsDynamicLookupComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        DsDynamicLookupComponent,
+        {provide: AuthorityService, useValue: authorityServiceStub},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-dynamic-lookup
+        [bindId]="bindId"
+        [group]="group"
+        [model]="model"
+        [showErrorMessages]="showErrorMessages"
+        (blur)="onBlur($event)"
+        (change)="onValueChange($event)"
+        (focus)="onFocus($event)"></ds-dynamic-lookup>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDynamicLookupComponent', inject([DsDynamicLookupComponent], (app: DsDynamicLookupComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group: FormGroup = new FormGroup({
+    lookup: new FormControl(),
+  });
+
+  inputLookupModelConfig = {
+    authorityOptions: {
+      closed: false,
+      metadata: 'lookup',
+      name: 'RPAuthority',
+      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+    } as AuthorityOptions,
+    disabled: false,
+    errorMessages: {required: 'Required field.'},
+    id: 'lookup',
+    label: 'Author',
+    maxOptions: 10,
+    name: 'lookup',
+    placeholder: 'Author',
+    readOnly: false,
+    required: true,
+    repeatable: true,
+    separator: ',',
+    validators: {required: null},
+    value: undefined
+  };
+
+  model = new DynamicLookupModel(this.inputLookupModelConfig);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
new file mode 100644
index 0000000000..70152c2cb3
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -0,0 +1,121 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
+import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { TranslateModule } from '@ngx-translate/core';
+import { DsDynamicScrollableDropdownComponent } from './dynamic-scrollable-dropdown.component';
+import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Dynamic Dynamic Scrollable Dropdown component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+    const authorityServiceStub = new AuthorityServiceStub();
+    const formBuilderServiceStub = new FormBuilderServiceStub();
+
+    TestBed.configureTestingModule({
+      imports: [
+        DynamicFormsCoreModule,
+        DynamicFormsNGBootstrapUIModule,
+        FormsModule,
+        InfiniteScrollModule,
+        ReactiveFormsModule,
+        NgbModule.forRoot(),
+        TranslateModule.forRoot()
+      ],
+      declarations: [
+        DsDynamicScrollableDropdownComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        DsDynamicScrollableDropdownComponent,
+        {provide: AuthorityService, useValue: authorityServiceStub},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-dynamic-scrollable-dropdown [bindId]="bindId"
+                                      [group]="group"
+                                      [model]="model"
+                                      [showErrorMessages]="showErrorMessages"
+                                      (blur)="onBlur($event)"
+                                      (change)="onValueChange($event)"
+                                      (focus)="onFocus($event)"></ds-dynamic-scrollable-dropdown>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDynamicScrollableDropdownComponent', inject([DsDynamicScrollableDropdownComponent], (app: DsDynamicScrollableDropdownComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group: FormGroup = new FormGroup({
+    lookup: new FormControl(),
+  });
+
+  inputDropdownModelConfig = {
+    authorityOptions: {
+      closed: false,
+      metadata: 'lookup',
+      name: 'common_iso_languages',
+      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+    } as AuthorityOptions,
+    disabled: false,
+    errorMessages: {required: 'Required field.'},
+    id: 'dropdown',
+    label: 'Language',
+    maxOptions: 10,
+    name: 'dropdown',
+    placeholder: 'Language',
+    readOnly: false,
+    required: false,
+    repeatable: false,
+    value: undefined
+  };
+
+  model = new DynamicScrollableDropdownModel(this.inputDropdownModelConfig);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
new file mode 100644
index 0000000000..3c599caf8d
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
@@ -0,0 +1,117 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
+import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
+import { DsDynamicTagComponent } from './dynamic-tag.component';
+import { DynamicTagModel } from './dynamic-tag.model';
+import { GlobalConfig } from '../../../../../../../config/global-config.interface';
+import { GLOBAL_CONFIG } from '../../../../../../../config';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Dynamic Dynamic Tag component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+    const authorityServiceStub = new AuthorityServiceStub();
+    const formBuilderServiceStub = new FormBuilderServiceStub();
+
+    TestBed.configureTestingModule({
+      imports: [
+        DynamicFormsCoreModule,
+        DynamicFormsNGBootstrapUIModule,
+        FormsModule,
+        NgbModule.forRoot(),
+        ReactiveFormsModule,
+      ],
+      declarations: [
+        DsDynamicTagComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        DsDynamicTagComponent,
+        {provide: AuthorityService, useValue: authorityServiceStub},
+        {provide: GLOBAL_CONFIG, useValue: {} as GlobalConfig},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-dynamic-tag [bindId]="bindId"
+                      [group]="group"
+                      [model]="model"
+                      [showErrorMessages]="showErrorMessages"
+                      (blur)="onBlur($event)"
+                      (change)="onValueChange($event)"
+                      (focus)="onFocus($event)"></ds-dynamic-tag>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDynamicTagComponent', inject([DsDynamicTagComponent], (app: DsDynamicTagComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group: FormGroup = new FormGroup({
+    lookup: new FormControl(),
+  });
+
+  inputTagModelConfig = {
+    authorityOptions: {
+      closed: false,
+      metadata: 'tag',
+      name: 'common_iso_languages',
+      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+    } as AuthorityOptions,
+    disabled: false,
+    id: 'tag',
+    label: 'Keywords',
+    minChars: 3,
+    name: 'tag',
+    placeholder: 'Keywords',
+    readOnly: false,
+    required: false,
+    repeatable: false
+  };
+
+  model = new DynamicTagModel(this.inputTagModelConfig);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts
deleted file mode 100644
index 08f26a99de..0000000000
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.spec.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-// import { AUTOCOMPLETE_OFF, DYNAMIC_FORM_CONTROL_INPUT_TYPE_TEXT } from '@ng-dynamic-forms/core';
-// import { Observable } from 'rxjs/Observable';
-//
-// import {
-//   DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD, DynamicTypeaheadModel,
-//   DynamicTypeaheadResponseModel
-// } from './dynamic-tag.model';
-// import { PageInfo } from '../../../../../../core/shared/page-info.model';
-//
-// describe('DynamicTypeaheadModel test suite', () => {
-//
-//   let model: any;
-//   const search = (text: string): Observable<DynamicTypeaheadResponseModel> =>
-//     Observable.of({
-//       list: ['One', 'Two', 'Three'],
-//       pageInfo: new PageInfo()
-//     });
-//   const config = {
-//     id: 'input',
-//     minChars: 3,
-//     search: search
-//   };
-//
-//   beforeEach(() => model = new DynamicTypeaheadModel(config));
-//
-//   it('tests if correct default type property is set', () => {
-//
-//     expect(model.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD);
-//   });
-//
-//   it('tests if correct default input type property is set', () => {
-//
-//     expect(model.inputType).toEqual(DYNAMIC_FORM_CONTROL_INPUT_TYPE_TEXT);
-//   });
-//
-//   it('tests if correct default autoComplete property is set', () => {
-//
-//     expect(model.autoComplete).toEqual(AUTOCOMPLETE_OFF);
-//   });
-//
-//   it('tests if correct default autoFocus property is set', () => {
-//
-//     expect(model.autoFocus).toBe(false);
-//   });
-//
-//   it('tests if correct default cls properties aree set', () => {
-//
-//     expect(model.cls).toBeDefined();
-//     expect(model.cls.element.container).toEqual('');
-//     expect(model.cls.element.control).toEqual('');
-//     expect(model.cls.element.errors).toEqual('');
-//     expect(model.cls.element.label).toEqual('');
-//     expect(model.cls.grid.container).toEqual('');
-//     expect(model.cls.grid.control).toEqual('');
-//     expect(model.cls.grid.errors).toEqual('');
-//     expect(model.cls.grid.label).toEqual('');
-//   });
-//
-//   it('tests if correct default hint property is set', () => {
-//
-//     expect(model.hint).toBeNull();
-//   });
-//
-//   it('tests if correct default label property is set', () => {
-//
-//     expect(model.label).toBeNull();
-//   });
-//
-//   it('tests if correct default max property is set', () => {
-//
-//     expect(model.max).toBeNull();
-//   });
-//
-//   it('tests if correct default maxLength property is set', () => {
-//
-//     expect(model.maxLength).toBeNull();
-//   });
-//
-//   it('tests if correct default minLength property is set', () => {
-//
-//     expect(model.minLength).toBeNull();
-//   });
-//
-//   it('tests if correct minChars property is set', () => {
-//
-//     expect(model.minChars).toEqual(3);
-//   });
-//
-//   it('tests if correct default min property is set', () => {
-//
-//     expect(model.min).toBeNull();
-//   });
-//
-//   it('tests if correct default placeholder property is set', () => {
-//
-//     expect(model.placeholder).toEqual('');
-//   });
-//
-//   it('tests if correct default readonly property is set', () => {
-//
-//     expect(model.readOnly).toBe(false);
-//   });
-//
-//   it('tests if correct default required property is set', () => {
-//
-//     expect(model.required).toBe(false);
-//   });
-//
-//   it('tests if correct default spellcheck property is set', () => {
-//
-//     expect(model.spellCheck).toBe(false);
-//   });
-//
-//   it('tests if correct default step property is set', () => {
-//
-//     expect(model.step).toBeNull();
-//   });
-//
-//   it('tests if correct default prefix property is set', () => {
-//
-//     expect(model.prefix).toBeNull();
-//   });
-//
-//   it('tests if correct default suffix property is set', () => {
-//
-//     expect(model.suffix).toBeNull();
-//   });
-//
-//   it('tests if correct search function is set', () => {
-//
-//     expect(model.search).toBe(search);
-//   });
-//
-//   it('should serialize correctly', () => {
-//
-//     const json = JSON.parse(JSON.stringify(model));
-//
-//     expect(json.id).toEqual(model.id);
-//     expect(json.disabled).toEqual(model.disabled);
-//     expect(json.value).toBe(model.value);
-//     expect(json.type).toEqual(DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD);
-//   });
-// });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
new file mode 100644
index 0000000000..4feaea012a
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
@@ -0,0 +1,118 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
+import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { AuthorityService } from '../../../../../../core/integration/authority.service';
+import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
+import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
+import { GlobalConfig } from '../../../../../../../config/global-config.interface';
+import { GLOBAL_CONFIG } from '../../../../../../../config';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { DsDynamicTypeaheadComponent } from './dynamic-typeahead.component';
+import { DynamicTypeaheadModel } from './dynamic-typeahead.model';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('Dynamic Dynamic Typeahead component', () => {
+
+  let testComp: TestComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+    const authorityServiceStub = new AuthorityServiceStub();
+    const formBuilderServiceStub = new FormBuilderServiceStub();
+
+    TestBed.configureTestingModule({
+      imports: [
+        DynamicFormsCoreModule,
+        DynamicFormsNGBootstrapUIModule,
+        FormsModule,
+        NgbModule.forRoot(),
+        ReactiveFormsModule,
+      ],
+      declarations: [
+        DsDynamicTypeaheadComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        DsDynamicTypeaheadComponent,
+        {provide: AuthorityService, useValue: authorityServiceStub},
+        {provide: GLOBAL_CONFIG, useValue: {} as GlobalConfig},
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-dynamic-typeahead [bindId]="bindId"
+                            [group]="group"
+                            [model]="model"
+                            [showErrorMessages]="showErrorMessages"
+                            (blur)="onBlur($event)"
+                            (change)="onValueChange($event)"
+                            (focus)="onFocus($event)"></ds-dynamic-typeahead>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create DsDynamicTypeaheadComponent', inject([DsDynamicTypeaheadComponent], (app: DsDynamicTypeaheadComponent) => {
+
+    expect(app).toBeDefined();
+  }));
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  group: FormGroup = new FormGroup({
+    typeahead: new FormControl(),
+  });
+
+  inputTypeaheadModelConfig = {
+    authorityOptions: {
+      closed: false,
+      metadata: 'typeahead',
+      name: 'EVENTAuthority',
+      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+    } as AuthorityOptions,
+    disabled: false,
+    id: 'typeahead',
+    label: 'Conference',
+    minChars: 3,
+    name: 'typeahead',
+    placeholder: 'Conference',
+    readOnly: false,
+    required: false,
+    repeatable: false,
+    value: undefined
+  }
+
+  model = new DynamicTypeaheadModel(this.inputTypeaheadModelConfig);
+
+  showErrorMessages = false;
+
+}
diff --git a/src/app/shared/testing/authority-service-stub.ts b/src/app/shared/testing/authority-service-stub.ts
new file mode 100644
index 0000000000..df1b98c787
--- /dev/null
+++ b/src/app/shared/testing/authority-service-stub.ts
@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs/Observable';
+import { IntegrationSearchOptions } from '../../core/integration/models/integration-options.model';
+import { IntegrationData } from '../../core/integration/integration-data';
+import { PageInfo } from '../../core/shared/page-info.model';
+
+export class AuthorityServiceStub {
+
+  getEntriesByName(options: IntegrationSearchOptions) {
+    const payload = [{id: 1, display: 'one', value: 1} as any, {id: 2, display: 'two', value: 2} as any];
+    return Observable.of(new IntegrationData(new PageInfo(), payload));
+  }
+}

From b85617123ca4a0bbeeb78c72c1e3822850e7f261 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 13 Jun 2018 18:34:48 +0200
Subject: [PATCH 08/41] fixed dynamic-list.component.spec.ts

---
 .../models/list/dynamic-list.component.spec.ts                  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
index 45bbbaf564..c47060aa88 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
@@ -13,7 +13,6 @@ import { DynamicFormControlLayout, DynamicFormsCoreModule, DynamicFormValidation
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
-import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -34,7 +33,6 @@ describe('Dynamic List component', () => {
   // async beforeEach
   beforeEach(async(() => {
     const authorityServiceStub = new AuthorityServiceStub();
-    const formBuilderServiceStub = new FormBuilderServiceStub();
 
     TestBed.configureTestingModule({
       imports: [

From b371bdff44c21854f3ae9310ac25f6e0e770a710 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 13 Jun 2018 18:41:56 +0200
Subject: [PATCH 09/41] Fixed tests

---
 .../models/lookup/dynamic-lookup.component.spec.ts              | 2 --
 .../dynamic-scrollable-dropdown.component.spec.ts               | 2 --
 .../ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts | 2 --
 .../models/typeahead/dynamic-typeahead.component.spec.ts        | 2 --
 4 files changed, 8 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
index 8a92106387..b5e76f7b15 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
@@ -10,7 +10,6 @@ import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
-import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
 import { DsDynamicLookupComponent } from './dynamic-lookup.component';
 import { DynamicLookupModel } from './dynamic-lookup.model';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@@ -35,7 +34,6 @@ describe('Dynamic Lookup component', () => {
   // async beforeEach
   beforeEach(async(() => {
     const authorityServiceStub = new AuthorityServiceStub();
-    const formBuilderServiceStub = new FormBuilderServiceStub();
 
     TestBed.configureTestingModule({
       imports: [
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
index 70152c2cb3..0d79d71e8b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -10,7 +10,6 @@ import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
-import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { TranslateModule } from '@ngx-translate/core';
 import { DsDynamicScrollableDropdownComponent } from './dynamic-scrollable-dropdown.component';
@@ -35,7 +34,6 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
   // async beforeEach
   beforeEach(async(() => {
     const authorityServiceStub = new AuthorityServiceStub();
-    const formBuilderServiceStub = new FormBuilderServiceStub();
 
     TestBed.configureTestingModule({
       imports: [
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
index 3c599caf8d..f08b317833 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
@@ -8,7 +8,6 @@ import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
-import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
 import { DsDynamicTagComponent } from './dynamic-tag.component';
 import { DynamicTagModel } from './dynamic-tag.model';
 import { GlobalConfig } from '../../../../../../../config/global-config.interface';
@@ -34,7 +33,6 @@ describe('Dynamic Dynamic Tag component', () => {
   // async beforeEach
   beforeEach(async(() => {
     const authorityServiceStub = new AuthorityServiceStub();
-    const formBuilderServiceStub = new FormBuilderServiceStub();
 
     TestBed.configureTestingModule({
       imports: [
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
index 4feaea012a..f6332c3fcb 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
@@ -8,7 +8,6 @@ import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
-import { FormBuilderServiceStub } from '../../../../../testing/form-builder-service-stub';
 import { GlobalConfig } from '../../../../../../../config/global-config.interface';
 import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -34,7 +33,6 @@ describe('Dynamic Dynamic Typeahead component', () => {
   // async beforeEach
   beforeEach(async(() => {
     const authorityServiceStub = new AuthorityServiceStub();
-    const formBuilderServiceStub = new FormBuilderServiceStub();
 
     TestBed.configureTestingModule({
       imports: [

From 4a2e2b754b7d7864e64a57794b37b5f519cea850 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 18 Jun 2018 12:54:12 +0200
Subject: [PATCH 10/41] Added more tests

---
 .../ds-dynamic-form-control.component.spec.ts | 277 ++++++++++++++++++
 .../ds-dynamic-form-control.component.ts      |  11 +-
 .../models/date-picker/date-picker.model.ts   |   2 +-
 .../models/ds-dynamic-combobox.model.ts       |   4 +-
 .../list/dynamic-list-radio-group.model.ts    |   2 +-
 .../models/lookup/dynamic-lookup.model.ts     |   6 +-
 .../dynamic-scrollable-dropdown.model.ts      |   6 +-
 .../models/tag/dynamic-tag.model.ts           |   6 +-
 .../typeahead/dynamic-typeahead.model.ts      |   6 +-
 .../builder/parsers/dropdown-field-parser.ts  |   1 -
 .../builder/parsers/lookup-field-parser.ts    |   4 -
 .../builder/parsers/onebox-field-parser.ts    |   1 -
 .../form/builder/parsers/tag-field-parser.ts  |   1 -
 13 files changed, 298 insertions(+), 29 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
index e69de29bb2..16dcce1cf9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
@@ -0,0 +1,277 @@
+import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TextMaskModule } from 'angular2-text-mask';
+import {
+  DynamicCheckboxGroupModel,
+  DynamicCheckboxModel,
+  DynamicColorPickerModel,
+  DynamicDatePickerModel,
+  DynamicEditorModel,
+  DynamicFileUploadModel,
+  DynamicFormArrayModel,
+  DynamicFormControlModel,
+  DynamicFormGroupModel,
+  DynamicFormsCoreModule,
+  DynamicFormService,
+  DynamicInputModel,
+  DynamicRadioGroupModel,
+  DynamicRatingModel,
+  DynamicSelectModel,
+  DynamicSliderModel,
+  DynamicSwitchModel,
+  DynamicTextAreaModel,
+  DynamicTimePickerModel
+} from '@ng-dynamic-forms/core';
+import { DsDynamicFormControlComponent, NGBootstrapFormControlType } from './ds-dynamic-form-control.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../../shared.module';
+import { DynamicDsDatePickerModel } from './models/date-picker/date-picker.model';
+import { DynamicGroupModel } from './models/dynamic-group/dynamic-group.model';
+import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
+import { AuthorityOptions } from '../../../../core/integration/models/authority-options.model';
+import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-group.model';
+import { DynamicLookupModel } from './models/lookup/dynamic-lookup.model';
+import { DynamicScrollableDropdownModel } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { DynamicTagModel } from './models/tag/dynamic-tag.model';
+import { DynamicTypeaheadModel } from './models/typeahead/dynamic-typeahead.model';
+import { DynamicComboboxModel } from './models/ds-dynamic-combobox.model';
+
+describe('DsDynamicFormControlComponent test suite', () => {
+
+  const authorityOptions: AuthorityOptions = {
+    closed: false,
+    metadata: 'list',
+    name: 'type_programme',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  };
+  const formModel = [
+    new DynamicCheckboxModel({id: 'checkbox'}),
+    new DynamicCheckboxGroupModel({id: 'checkboxGroup', group: []}),
+    new DynamicColorPickerModel({id: 'colorpicker'}),
+    new DynamicDatePickerModel({id: 'datepicker'}),
+    new DynamicEditorModel({id: 'editor'}),
+    new DynamicFileUploadModel({id: 'upload', url: ''}),
+    new DynamicFormArrayModel({id: 'formArray', groupFactory: () => []}),
+    new DynamicFormGroupModel({id: 'formGroup', group: []}),
+    new DynamicInputModel({id: 'input', maxLength: 51}),
+    new DynamicRadioGroupModel({id: 'radioGroup'}),
+    new DynamicRatingModel({id: 'rating'}),
+    new DynamicSelectModel({id: 'select', options: [{value: 'One'}, {value: 'Two'}], value: 'One'}),
+    new DynamicSliderModel({id: 'slider'}),
+    new DynamicSwitchModel({id: 'switch'}),
+    new DynamicTextAreaModel({id: 'textarea'}),
+    new DynamicTimePickerModel({id: 'timepicker'}),
+    new DynamicTypeaheadModel({id: 'typeahead'}),
+    new DynamicScrollableDropdownModel({id: 'scrollableDropdown', authorityOptions: authorityOptions}),
+    new DynamicTagModel({id: 'tag'}),
+    new DynamicListCheckboxGroupModel({id: 'checkboxList', authorityOptions: authorityOptions, repeatable: true}),
+    new DynamicListRadioGroupModel({id: 'radioList', authorityOptions: authorityOptions, repeatable: false}),
+    new DynamicGroupModel({
+      id: 'relationGroup',
+      formConfiguration: [],
+      mandatoryField: '',
+      name: 'relationGroup',
+      relationFields: [],
+      scopeUUID: '',
+      submissionScope: ''
+    }),
+    new DynamicDsDatePickerModel({id: 'datepicker'}),
+    new DynamicLookupModel({id: 'lookup', separator: ','}),
+    new DynamicComboboxModel({id: 'combobox', readOnly: false})
+  ];
+  const testModel = formModel[8];
+  let formGroup: FormGroup;
+  let fixture: ComponentFixture<DsDynamicFormControlComponent>;
+  let component: DsDynamicFormControlComponent;
+  let debugElement: DebugElement;
+  let testElement: DebugElement;
+
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule.forRoot(),
+        DynamicFormsCoreModule.forRoot(),
+        SharedModule,
+        TranslateModule.forRoot(),
+        TextMaskModule,
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents().then(() => {
+
+      fixture = TestBed.createComponent(DsDynamicFormControlComponent);
+
+      component = fixture.componentInstance;
+      debugElement = fixture.debugElement;
+    });
+  }));
+
+  beforeEach(inject([DynamicFormService], (service: DynamicFormService) => {
+
+    formGroup = service.createFormGroup(formModel);
+
+    component.group = formGroup;
+    component.model = testModel;
+
+    component.ngOnChanges({
+
+      group: new SimpleChange(null, component.group, true),
+      model: new SimpleChange(null, component.model, true)
+    });
+
+    fixture.detectChanges();
+
+    testElement = debugElement.query(By.css(`input[id='${testModel.id}']`));
+  }));
+
+  it('should initialize correctly', () => {
+
+    expect(component.context).toBeNull();
+    expect(component.control instanceof FormControl).toBe(true);
+    expect(component.group instanceof FormGroup).toBe(true);
+    expect(component.model instanceof DynamicFormControlModel).toBe(true);
+    expect(component.hasErrorMessaging).toBe(false);
+    expect(component.asBootstrapFormGroup).toBe(true);
+
+    expect(component.onControlValueChanges).toBeDefined();
+    expect(component.onModelDisabledUpdates).toBeDefined();
+    expect(component.onModelValueUpdates).toBeDefined();
+
+    expect(component.blur).toBeDefined();
+    expect(component.change).toBeDefined();
+    expect(component.focus).toBeDefined();
+
+    expect(component.onValueChange).toBeDefined();
+    expect(component.onBlur).toBeDefined();
+    expect(component.onFocus).toBeDefined();
+
+    expect(component.isValid).toBe(true);
+    expect(component.isInvalid).toBe(false);
+    expect(component.showErrorMessages).toBe(false);
+
+    expect(component.type).toBe(NGBootstrapFormControlType.Input);
+  });
+
+  it('should have an input element', () => {
+
+    expect(testElement instanceof DebugElement).toBe(true);
+  });
+
+  it('should listen to native blur events', () => {
+
+    spyOn(component, 'onBlur');
+
+    testElement.triggerEventHandler('blur', null);
+
+    expect(component.onBlur).toHaveBeenCalled();
+  });
+
+  it('should listen to native focus events', () => {
+
+    spyOn(component, 'onFocus');
+
+    testElement.triggerEventHandler('focus', null);
+
+    expect(component.onFocus).toHaveBeenCalled();
+  });
+
+  it('should listen to native change event', () => {
+
+    spyOn(component, 'onValueChange');
+
+    testElement.triggerEventHandler('change', null);
+
+    expect(component.onValueChange).toHaveBeenCalled();
+  });
+
+  it('should update model value when control value changes', () => {
+
+    spyOn(component, 'onControlValueChanges');
+
+    component.control.setValue('test');
+
+    expect(component.onControlValueChanges).toHaveBeenCalled();
+  });
+
+  it('should update control value when model value changes', () => {
+
+    spyOn(component, 'onModelValueUpdates');
+
+    (testModel as DynamicInputModel).valueUpdates.next('test');
+
+    expect(component.onModelValueUpdates).toHaveBeenCalled();
+  });
+
+  it('should update control activation when model disabled property changes', () => {
+
+    spyOn(component, 'onModelDisabledUpdates');
+
+    testModel.disabledUpdates.next(true);
+
+    expect(component.onModelDisabledUpdates).toHaveBeenCalled();
+  });
+
+  it('should determine correct form control type', () => {
+
+    const testFn = DsDynamicFormControlComponent.getFormControlType;
+
+    expect(testFn(formModel[0])).toEqual(NGBootstrapFormControlType.Checkbox);
+
+    expect(testFn(formModel[1])).toEqual(NGBootstrapFormControlType.CheckboxGroup);
+
+    expect(testFn(formModel[2])).toBeNull();
+
+    expect(testFn(formModel[3])).toEqual(NGBootstrapFormControlType.DatePicker);
+
+    (formModel[3] as DynamicDatePickerModel).inline = true;
+    expect(testFn(formModel[3])).toEqual(NGBootstrapFormControlType.Calendar);
+
+    expect(testFn(formModel[4])).toBeNull();
+
+    expect(testFn(formModel[5])).toBeNull();
+
+    expect(testFn(formModel[6])).toEqual(NGBootstrapFormControlType.Array);
+
+    expect(testFn(formModel[7])).toEqual(NGBootstrapFormControlType.Group);
+
+    expect(testFn(formModel[8])).toEqual(NGBootstrapFormControlType.Input);
+
+    expect(testFn(formModel[9])).toEqual(NGBootstrapFormControlType.RadioGroup);
+
+    expect(testFn(formModel[10])).toBeNull();
+
+    expect(testFn(formModel[11])).toEqual(NGBootstrapFormControlType.Select);
+
+    expect(testFn(formModel[12])).toBeNull();
+
+    expect(testFn(formModel[13])).toBeNull();
+
+    expect(testFn(formModel[14])).toEqual(NGBootstrapFormControlType.TextArea);
+
+    expect(testFn(formModel[15])).toEqual(NGBootstrapFormControlType.TimePicker);
+
+    expect(testFn(formModel[16])).toEqual(NGBootstrapFormControlType.TypeAhead);
+
+    expect(testFn(formModel[17])).toEqual(NGBootstrapFormControlType.ScrollableDropdown);
+
+    expect(testFn(formModel[18])).toEqual(NGBootstrapFormControlType.Tag);
+
+    expect(testFn(formModel[19])).toEqual(NGBootstrapFormControlType.List);
+
+    expect(testFn(formModel[20])).toEqual(NGBootstrapFormControlType.List);
+
+    expect(testFn(formModel[21])).toEqual(NGBootstrapFormControlType.Relation);
+
+    expect(testFn(formModel[22])).toEqual(NGBootstrapFormControlType.Date);
+
+    expect(testFn(formModel[23])).toEqual(NGBootstrapFormControlType.Lookup);
+
+    expect(testFn(formModel[24])).toEqual(NGBootstrapFormControlType.Group);
+  });
+});
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
index a38c35eb9c..5bd8402702 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -55,10 +55,10 @@ export const enum NGBootstrapFormControlType {
   TimePicker = 11, // 'TIMEPICKER'
   TypeAhead = 12, // 'TYPEAHEAD'
   ScrollableDropdown = 13, // 'SCROLLABLE_DROPDOWN'
-  TypeTag = 14, // 'TYPETAG'
+  Tag = 14, // 'TAG'
   List = 15, // 'TYPELIST'
-  Relation = 16, // Dynamic Group
-  DsDatePicker = 17, // Ds Date Picker
+  Relation = 16, // 'RELATION'
+  Date = 17, // 'DATE'
   Lookup = 18, // LOOKUP
 }
 
@@ -109,7 +109,6 @@ export class DsDynamicFormControlComponent extends DynamicFormControlComponent i
         return datepickerModel.inline ? NGBootstrapFormControlType.Calendar : NGBootstrapFormControlType.DatePicker;
 
       case DYNAMIC_FORM_CONTROL_TYPE_GROUP:
-        // return (model instanceof DynamicGroupModel) ? NGBootstrapFormControlType.DynamicGroup : NGBootstrapFormControlType.Group;
         return NGBootstrapFormControlType.Group;
 
       case DYNAMIC_FORM_CONTROL_TYPE_INPUT:
@@ -134,13 +133,13 @@ export class DsDynamicFormControlComponent extends DynamicFormControlComponent i
         return NGBootstrapFormControlType.ScrollableDropdown;
 
       case DYNAMIC_FORM_CONTROL_TYPE_TAG:
-        return NGBootstrapFormControlType.TypeTag;
+        return NGBootstrapFormControlType.Tag;
 
       case DYNAMIC_FORM_CONTROL_TYPE_RELATION:
         return NGBootstrapFormControlType.Relation;
 
       case DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER:
-        return NGBootstrapFormControlType.DsDatePicker;
+        return NGBootstrapFormControlType.Date;
 
       case DYNAMIC_FORM_CONTROL_TYPE_LOOKUP:
         return NGBootstrapFormControlType.Lookup;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
index 5713d813b7..a75a1d2f1a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts
@@ -2,7 +2,7 @@ import { DynamicDateControlModel, DynamicFormControlLayout, serializable } from
 import { DynamicDateControlModelConfig } from '@ng-dynamic-forms/core/src/model/dynamic-date-control.model';
 import { Subject } from 'rxjs/Subject';
 
-export const DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER = 'DSDATEPICKER';
+export const DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER = 'DATE';
 
 /**
  * Dynamic Date Picker Model class
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
index b8306bd491..2f260ff50d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
@@ -9,8 +9,8 @@ export const COMBOBOX_METADATA_SUFFIX = '_COMBO_METADATA';
 export const COMBOBOX_VALUE_SUFFIX = '_COMBO_VALUE';
 
 export interface DsDynamicComboboxModelConfig extends DynamicFormGroupModelConfig {
-  languageCodes: LanguageCode[];
-  language: string;
+  languageCodes?: LanguageCode[];
+  language?: string;
   readOnly: boolean;
 }
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
index a6bba88fc6..984e3b3880 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
@@ -9,7 +9,7 @@ import { hasValue } from '../../../../../empty.util';
 
 export interface DynamicListModelConfig extends DynamicRadioGroupModelConfig<any> {
   authorityOptions: AuthorityOptions;
-  groupLength: number;
+  groupLength?: number;
   repeatable: boolean;
   value?: any;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
index 21b11d0bf8..1d9f7ed9e9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
@@ -6,8 +6,8 @@ import { AuthorityOptions } from '../../../../../../core/integration/models/auth
 export const DYNAMIC_FORM_CONTROL_TYPE_LOOKUP = 'LOOKUP';
 
 export interface DynamicLookupModelConfig extends DsDynamicInputModelConfig {
-  maxOptions: number;
-  value: any;
+  maxOptions?: number;
+  value?: any;
   separator: string;
 }
 
@@ -26,7 +26,7 @@ export class DynamicLookupModel extends DsDynamicInputModel {
     super(config, layout);
 
     this.autoComplete = AUTOCOMPLETE_OFF;
-    this.maxOptions = config.maxOptions;
+    this.maxOptions = config.maxOptions || 10;
     this.separator = config.separator; // Defined only for lookup-name
 
     this.valueUpdates.next(config.value);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
index 69cdb475e2..8ab497ec6e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
@@ -6,8 +6,8 @@ export const DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN = 'SCROLLABLE_DROPDOW
 
 export interface DynamicScrollableDropdownModelConfig extends DsDynamicInputModelConfig {
   authorityOptions: AuthorityOptions;
-  maxOptions: number;
-  value: any;
+  maxOptions?: number;
+  value?: any;
 }
 
 export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
@@ -21,7 +21,7 @@ export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
 
     this.autoComplete = AUTOCOMPLETE_OFF;
     this.authorityOptions = config.authorityOptions;
-    this.maxOptions = config.maxOptions;
+    this.maxOptions = config.maxOptions || 10;
   }
 
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
index 73018122f3..d17cccd338 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.model.ts
@@ -2,10 +2,10 @@ import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dy
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
 import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
 
-export const DYNAMIC_FORM_CONTROL_TYPE_TAG = 'TYPETAG';
+export const DYNAMIC_FORM_CONTROL_TYPE_TAG = 'TAG';
 
 export interface DynamicTagModelConfig extends DsDynamicInputModelConfig {
-  minChars: number;
+  minChars?: number;
   value?: any;
 }
 
@@ -20,7 +20,7 @@ export class DynamicTagModel extends DsDynamicInputModel {
     super(config, layout);
 
     this.autoComplete = AUTOCOMPLETE_OFF;
-    this.minChars = config.minChars;
+    this.minChars = config.minChars || 3;
     const value = config.value || [];
     this.valueUpdates.next(value)
   }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
index 054127825d..fd68cf43ad 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
@@ -5,8 +5,8 @@ import { AuthorityOptions } from '../../../../../../core/integration/models/auth
 export const DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD = 'TYPEAHEAD';
 
 export interface DsDynamicTypeaheadModelConfig extends DsDynamicInputModelConfig {
-  minChars: number;
-  value: any;
+  minChars?: number;
+  value?: any;
 }
 
 export class DynamicTypeaheadModel extends DsDynamicInputModel {
@@ -19,7 +19,7 @@ export class DynamicTypeaheadModel extends DsDynamicInputModel {
     super(config, layout);
 
     this.autoComplete = AUTOCOMPLETE_OFF;
-    this.minChars = config.minChars;
+    this.minChars = config.minChars || 3;
   }
 
 }
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
index 431e126641..45d14bea69 100644
--- a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
@@ -23,7 +23,6 @@ export class DropdownFieldParser extends FieldParser {
 
     if (isNotEmpty(this.configData.selectableMetadata[0].authority)) {
       this.setAuthorityOptions(dropdownModelConfig, this.authorityUuid);
-      dropdownModelConfig.maxOptions = 10;
       if (isNotEmpty(fieldValue)) {
         dropdownModelConfig.value = fieldValue;
       }
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
index 9cec80c5ad..9a9637997d 100644
--- a/src/app/shared/form/builder/parsers/lookup-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
@@ -1,8 +1,5 @@
 import { FieldParser } from './field-parser';
 import { FormFieldModel } from '../models/form-field.model';
-import { AuthorityValueModel } from '../../../../core/integration/models/authority-value.model';
-import { isNotEmpty } from '../../../empty.util';
-import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import { DynamicLookupModel, DynamicLookupModelConfig } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
 
 export class LookupFieldParser extends FieldParser {
@@ -19,7 +16,6 @@ export class LookupFieldParser extends FieldParser {
       const lookupModelConfig: DynamicLookupModelConfig = this.initModel();
 
       this.setAuthorityOptions(lookupModelConfig, this.authorityUuid);
-      lookupModelConfig.maxOptions = 10;
 
       this.setValues(lookupModelConfig, fieldValue, true);
 
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index c5a4f50e0c..6c7b16cf10 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -81,7 +81,6 @@ export class OneboxFieldParser extends FieldParser {
       const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel();
       this.setAuthorityOptions(typeaheadModelConfig, this.authorityUuid);
       this.setValues(typeaheadModelConfig, fieldValue, true);
-      typeaheadModelConfig.minChars = 3;
       const typeaheadModel = new DynamicTypeaheadModel(typeaheadModelConfig);
       return typeaheadModel;
     } else {
diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.ts b/src/app/shared/form/builder/parsers/tag-field-parser.ts
index fc153337e6..9520589f51 100644
--- a/src/app/shared/form/builder/parsers/tag-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/tag-field-parser.ts
@@ -20,7 +20,6 @@ export class TagFieldParser extends FieldParser {
       this.setAuthorityOptions(tagModelConfig, this.authorityUuid);
     }
 
-    tagModelConfig.minChars = 3;
     this.setValues(tagModelConfig, fieldValue, null, true);
 
     const tagModel = new DynamicTagModel(tagModelConfig);

From 3fdb074d05e9c3bff420712880df02f66a66a901 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 19 Jun 2018 15:10:56 +0200
Subject: [PATCH 11/41] Added more tests

---
 .../ds-dynamic-form-control.component.spec.ts |   4 +-
 ....model.ts => ds-dynamic-qualdrop.model.ts} |  12 +-
 .../typeahead/dynamic-typeahead.model.ts      |   1 -
 .../form/builder/form-builder.service.spec.ts | 760 ++++++++++++++++++
 .../form/builder/form-builder.service.ts      |  24 +-
 .../builder/parsers/concat-field-parser.ts    |  14 +-
 .../builder/parsers/onebox-field-parser.ts    |  22 +-
 7 files changed, 801 insertions(+), 36 deletions(-)
 rename src/app/shared/form/builder/ds-dynamic-form-ui/models/{ds-dynamic-combobox.model.ts => ds-dynamic-qualdrop.model.ts} (82%)
 create mode 100644 src/app/shared/form/builder/form-builder.service.spec.ts

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
index 16dcce1cf9..3e24916899 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
@@ -37,7 +37,7 @@ import { DynamicLookupModel } from './models/lookup/dynamic-lookup.model';
 import { DynamicScrollableDropdownModel } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { DynamicTagModel } from './models/tag/dynamic-tag.model';
 import { DynamicTypeaheadModel } from './models/typeahead/dynamic-typeahead.model';
-import { DynamicComboboxModel } from './models/ds-dynamic-combobox.model';
+import { DynamicQualdropModel } from './models/ds-dynamic-qualdrop.model';
 
 describe('DsDynamicFormControlComponent test suite', () => {
 
@@ -80,7 +80,7 @@ describe('DsDynamicFormControlComponent test suite', () => {
     }),
     new DynamicDsDatePickerModel({id: 'datepicker'}),
     new DynamicLookupModel({id: 'lookup', separator: ','}),
-    new DynamicComboboxModel({id: 'combobox', readOnly: false})
+    new DynamicQualdropModel({id: 'combobox', readOnly: false})
   ];
   const testModel = formModel[8];
   let formGroup: FormGroup;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts
similarity index 82%
rename from src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
rename to src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts
index 2f260ff50d..fa91c0ad6b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-combobox.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts
@@ -4,24 +4,24 @@ import { Subject } from 'rxjs/Subject';
 import { DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core/src/model/form-group/dynamic-form-group.model';
 import { LanguageCode } from '../../models/form-field-language-value.model';
 
-export const COMBOBOX_GROUP_SUFFIX = '_COMBO_GROUP';
-export const COMBOBOX_METADATA_SUFFIX = '_COMBO_METADATA';
-export const COMBOBOX_VALUE_SUFFIX = '_COMBO_VALUE';
+export const QUALDROP_GROUP_SUFFIX = '_QUALDROP_GROUP';
+export const QUALDROP_METADATA_SUFFIX = '_QUALDROP_METADATA';
+export const QUALDROP_VALUE_SUFFIX = '_QUALDROP_VALUE';
 
-export interface DsDynamicComboboxModelConfig extends DynamicFormGroupModelConfig {
+export interface DsDynamicQualdropModelConfig extends DynamicFormGroupModelConfig {
   languageCodes?: LanguageCode[];
   language?: string;
   readOnly: boolean;
 }
 
-export class DynamicComboboxModel extends DynamicFormGroupModel {
+export class DynamicQualdropModel extends DynamicFormGroupModel {
   @serializable() private _language: string;
   @serializable() private _languageCodes: LanguageCode[];
   @serializable() languageUpdates: Subject<string>;
   @serializable() hasLanguages = false;
   @serializable() readOnly: boolean;
 
-  constructor(config: DsDynamicComboboxModelConfig, layout?: DynamicFormControlLayout) {
+  constructor(config: DsDynamicQualdropModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
 
     this.readOnly = config.readOnly;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
index fd68cf43ad..866055ed04 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model.ts
@@ -1,6 +1,5 @@
 import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
-import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
 
 export const DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD = 'TYPEAHEAD';
 
diff --git a/src/app/shared/form/builder/form-builder.service.spec.ts b/src/app/shared/form/builder/form-builder.service.spec.ts
new file mode 100644
index 0000000000..c31d5c39aa
--- /dev/null
+++ b/src/app/shared/form/builder/form-builder.service.spec.ts
@@ -0,0 +1,760 @@
+import { inject, TestBed } from '@angular/core/testing';
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  NG_ASYNC_VALIDATORS,
+  NG_VALIDATORS,
+  ReactiveFormsModule
+} from '@angular/forms';
+import {
+  DynamicCheckboxGroupModel,
+  DynamicCheckboxModel,
+  DynamicColorPickerModel,
+  DynamicDatePickerModel,
+  DynamicEditorModel,
+  DynamicFileUploadModel,
+  DynamicFormArrayModel,
+  DynamicFormControlModel,
+  DynamicFormControlValue,
+  DynamicFormGroupModel,
+  DynamicFormService,
+  DynamicFormValidationService,
+  DynamicFormValueControlModel,
+  DynamicInputModel,
+  DynamicRadioGroupModel,
+  DynamicRatingModel,
+  DynamicSelectModel,
+  DynamicSliderModel,
+  DynamicSwitchModel,
+  DynamicTextAreaModel,
+  DynamicTimePickerModel
+} from '@ng-dynamic-forms/core';
+import { DynamicTagModel } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
+import { DynamicListCheckboxGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
+import { DynamicQualdropModel } from './ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
+import { DynamicScrollableDropdownModel } from './ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { DynamicGroupModel } from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import { DynamicLookupModel } from './ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+import { DynamicDsDatePickerModel } from './ds-dynamic-form-ui/models/date-picker/date-picker.model';
+import { DynamicTypeaheadModel } from './ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model';
+import { DynamicListRadioGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
+import { AuthorityOptions } from '../../../core/integration/models/authority-options.model';
+import { FormFieldModel } from './models/form-field.model';
+import { FormRowModel, SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
+import { FormBuilderService } from './form-builder.service';
+import { DynamicRowGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
+import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
+import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+
+describe('FormBuilderService test suite', () => {
+
+  let testModel: DynamicFormControlModel[];
+  let testFormConfiguration: SubmissionFormsModel;
+  let service: FormBuilderService;
+
+  function testValidator() {
+    return {testValidator: {valid: true}};
+  }
+
+  function testAsyncValidator() {
+    return new Promise<boolean>((resolve) => setTimeout(() => resolve(true), 0));
+  }
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
+      providers: [
+        FormBuilderService,
+        DynamicFormService,
+        DynamicFormValidationService,
+        {provide: NG_VALIDATORS, useValue: testValidator, multi: true},
+        {provide: NG_ASYNC_VALIDATORS, useValue: testAsyncValidator, multi: true}
+      ]
+    });
+
+    const authorityOptions: AuthorityOptions = {
+      closed: false,
+      metadata: 'list',
+      name: 'type_programme',
+      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+    };
+
+    testModel = [
+
+      new DynamicSelectModel<string>(
+        {
+          id: 'testSelect',
+          options: [
+            {
+              label: 'Option 1',
+              value: 'option-1'
+            },
+            {
+              label: 'Option 2',
+              value: 'option-2'
+            }
+          ],
+          value: 'option-3'
+        }
+      ),
+
+      new DynamicInputModel(
+        {
+          id: 'testInput',
+          mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+        }
+      ),
+
+      new DynamicCheckboxGroupModel(
+        {
+          id: 'testCheckboxGroup',
+          group: [
+            new DynamicCheckboxModel(
+              {
+                id: 'testCheckboxGroup1',
+                value: true
+              }
+            ),
+            new DynamicCheckboxModel(
+              {
+                id: 'testCheckboxGroup2',
+                value: true
+              }
+            )
+          ]
+        }
+      ),
+
+      new DynamicRadioGroupModel<string>(
+        {
+          id: 'testRadioGroup',
+          options: [
+            {
+              label: 'Option 1',
+              value: 'option-1'
+            },
+            {
+              label: 'Option 2',
+              value: 'option-2'
+            }
+          ],
+          value: 'option-3'
+        }
+      ),
+
+      new DynamicTextAreaModel({id: 'testTextArea'}),
+
+      new DynamicCheckboxModel({id: 'testCheckbox'}),
+
+      new DynamicFormArrayModel(
+        {
+          id: 'testFormArray',
+          initialCount: 5,
+          groupFactory: () => {
+            return [
+              new DynamicInputModel({id: 'testFormArrayGroupInput'}),
+              new DynamicFormArrayModel({
+                id: 'testNestedFormArray', groupFactory: () => [
+                  new DynamicInputModel({id: 'testNestedFormArrayGroupInput'})
+                ]
+              })
+            ];
+          }
+        }
+      ),
+
+      new DynamicFormGroupModel(
+        {
+          id: 'testFormGroup',
+          group: [
+            new DynamicInputModel({id: 'nestedTestInput'}),
+            new DynamicTextAreaModel({id: 'nestedTestTextArea'})
+          ]
+        }
+      ),
+
+      new DynamicSliderModel({id: 'testSlider'}),
+
+      new DynamicSwitchModel({id: 'testSwitch'}),
+
+      new DynamicDatePickerModel({id: 'testDatepicker', value: new Date()}),
+
+      new DynamicFileUploadModel({id: 'testFileUpload'}),
+
+      new DynamicEditorModel({id: 'testEditor'}),
+
+      new DynamicTimePickerModel({id: 'testTimePicker'}),
+
+      new DynamicRatingModel({id: 'testRating'}),
+
+      new DynamicColorPickerModel({id: 'testColorPicker'}),
+
+      new DynamicTypeaheadModel({id: 'testTypeahead'}),
+
+      new DynamicScrollableDropdownModel({id: 'testScrollableDropdown', authorityOptions: authorityOptions}),
+
+      new DynamicTagModel({id: 'testTag'}),
+
+      new DynamicListCheckboxGroupModel({id: 'testCheckboxList', authorityOptions: authorityOptions, repeatable: true}),
+
+      new DynamicListRadioGroupModel({id: 'testRadioList', authorityOptions: authorityOptions, repeatable: false}),
+
+      new DynamicGroupModel({
+        id: 'testRelationGroup',
+        formConfiguration: [{
+          fields: [{
+            hints: 'Enter the name of the author.',
+            input: {type: 'onebox'},
+            label: 'Authors',
+            languageCodes: [],
+            mandatory: 'true',
+            mandatoryMessage: 'Required field!',
+            repeatable: false,
+            selectableMetadata: [{
+              authority: 'RPAuthority',
+              closed: false,
+              metadata: 'dc.contributor.author'
+            }],
+          } as FormFieldModel]
+        } as FormRowModel, {
+          fields: [{
+            hints: 'Enter the affiliation of the author.',
+            input: {type: 'onebox'},
+            label: 'Affiliation',
+            languageCodes: [],
+            mandatory: 'false',
+            repeatable: false,
+            selectableMetadata: [{
+              authority: 'OUAuthority',
+              closed: false,
+              metadata: 'local.contributor.affiliation'
+            }]
+          } as FormFieldModel]
+        } as FormRowModel],
+        mandatoryField: '',
+        name: 'testRelationGroup',
+        relationFields: [],
+        scopeUUID: '',
+        submissionScope: ''
+      }),
+
+      new DynamicDsDatePickerModel({id: 'testDate'}),
+
+      new DynamicLookupModel({id: 'testLookup', separator: ','}),
+
+      new DynamicQualdropModel({id: 'testCombobox', readOnly: false})
+    ];
+
+    testFormConfiguration = {
+      name: 'testFormConfiguration',
+      rows: [
+        {
+          fields: [
+            {
+              input: {type: 'lookup'},
+              label: 'Journal',
+              mandatory: 'false',
+              repeatable: false,
+              hints: 'Enter the name of the journal where the item has been\n\t\t\t\t\tpublished, if any.',
+              selectableMetadata: [
+                {
+                  metadata: 'journal',
+                  authority: 'JOURNALAuthority',
+                  closed: false
+                }
+              ],
+              languageCodes: []
+            } as FormFieldModel,
+            {
+              input: {type: 'onebox'},
+              label: 'Issue',
+              mandatory: 'false',
+              repeatable: false,
+              hints: ' Enter issue number.',
+              selectableMetadata: [
+                {
+                  metadata: 'issue'
+                }
+              ],
+              languageCodes: []
+            } as FormFieldModel,
+            {
+              input: {type: 'name'},
+              label: 'Name',
+              mandatory: 'false',
+              repeatable: false,
+              hints: 'Enter full name.',
+              selectableMetadata: [
+                {
+                  metadata: 'name'
+                }
+              ],
+              languageCodes: []
+            } as FormFieldModel
+          ]
+        } as FormRowModel,
+        {
+          fields: [
+            {
+              hints: 'If the item has any identification numbers or codes associated with↵	it, please enter the types and the actual numbers or codes.',
+              input: {type: 'onebox'},
+              label: 'Identifiers',
+              languageCodes: [],
+              mandatory: 'false',
+              repeatable: false,
+              selectableMetadata: [
+                {metadata: 'dc.identifier.issn', label: 'ISSN'},
+                {metadata: 'dc.identifier.other', label: 'Other'},
+                {metadata: 'dc.identifier.ismn', label: 'ISMN'},
+                {metadata: 'dc.identifier.govdoc', label: 'Gov\'t Doc #'},
+                {metadata: 'dc.identifier.uri', label: 'URI'},
+                {metadata: 'dc.identifier.isbn', label: 'ISBN'},
+                {metadata: 'dc.identifier.doi', label: 'DOI'},
+                {metadata: 'dc.identifier.pmid', label: 'PubMed ID'},
+                {metadata: 'dc.identifier.arxiv', label: 'arXiv'}
+              ]
+            }, {
+              input: {type: 'onebox'},
+              label: 'Publisher',
+              mandatory: 'false',
+              repeatable: false,
+              hints: 'Enter the name of the publisher of the previously issued instance of this item.',
+              selectableMetadata: [
+                {
+                  metadata: 'publisher'
+                }
+              ],
+              languageCodes: []
+            }
+          ]
+        } as FormRowModel,
+        {
+          fields: [
+            {
+              input: {type: 'onebox'},
+              label: 'Conference',
+              mandatory: 'false',
+              repeatable: false,
+              hints: 'Enter the name of the events, if any.',
+              selectableMetadata: [
+                {
+                  metadata: 'conference',
+                  authority: 'EVENTAuthority',
+                  closed: false
+                }
+              ],
+              languageCodes: []
+            }
+          ]
+        } as FormRowModel
+      ],
+      self: 'testFormConfiguration.url',
+      type: 'submissionform',
+      _links: {
+        self: 'testFormConfiguration.url'
+      }
+    }
+  });
+
+  beforeEach(inject([FormBuilderService], (formService: FormBuilderService) => service = formService));
+
+  it('should find a dynamic form control model by id', () => {
+
+    expect(service.findById('testCheckbox', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testCheckboxGroup', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testDatepicker', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testFormArray', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testInput', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testRadioGroup', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testSelect', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testSlider', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testSwitch', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testTextArea', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testFileUpload', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testEditor', testModel) instanceof DynamicEditorModel).toBe(true);
+    expect(service.findById('testTimePicker', testModel) instanceof DynamicTimePickerModel).toBe(true);
+    expect(service.findById('testRating', testModel) instanceof DynamicRatingModel).toBe(true);
+    expect(service.findById('testColorPicker', testModel) instanceof DynamicColorPickerModel).toBe(true);
+  });
+
+  it('should find a nested dynamic form control model by id', () => {
+
+    expect(service.findById('testCheckboxGroup1', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testCheckboxGroup2', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('nestedTestInput', testModel) instanceof DynamicFormControlModel).toBe(true);
+  });
+
+  it('should create an array of form models', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+
+    expect(formModel[0] instanceof DynamicRowGroupModel).toBe(true);
+    expect((formModel[0] as DynamicRowGroupModel).group.length).toBe(3);
+    expect((formModel[0] as DynamicRowGroupModel).get(0) instanceof DynamicLookupModel).toBe(true);
+    expect((formModel[0] as DynamicRowGroupModel).get(1) instanceof DsDynamicInputModel).toBe(true);
+    expect((formModel[0] as DynamicRowGroupModel).get(2) instanceof DynamicConcatModel).toBe(true);
+
+    expect(formModel[1] instanceof DynamicRowGroupModel).toBe(true);
+    expect((formModel[1] as DynamicRowGroupModel).group.length).toBe(2);
+    expect((formModel[1] as DynamicRowGroupModel).get(0) instanceof DynamicQualdropModel).toBe(true);
+    expect(((formModel[1] as DynamicRowGroupModel).get(0) as DynamicQualdropModel).get(0) instanceof DynamicSelectModel).toBe(true);
+    expect(((formModel[1] as DynamicRowGroupModel).get(0) as DynamicQualdropModel).get(1) instanceof DsDynamicInputModel).toBe(true);
+    expect((formModel[1] as DynamicRowGroupModel).get(1) instanceof DsDynamicInputModel).toBe(true);
+
+    expect(formModel[2] instanceof DynamicRowGroupModel).toBe(true);
+    expect((formModel[2] as DynamicRowGroupModel).group.length).toBe(1);
+    expect((formModel[2] as DynamicRowGroupModel).get(0) instanceof DynamicTypeaheadModel).toBe(true);
+  });
+
+  it('should return form\'s fields value from form model', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    let value = {} as any;
+
+    expect(service.getValueFromModel(formModel)).toEqual(value);
+
+    ((formModel[0] as DynamicRowGroupModel).get(1) as DsDynamicInputModel).valueUpdates.next('test');
+
+    value = {
+      issue: [new FormFieldMetadataValueObject('test')]
+    };
+    expect(service.getValueFromModel(formModel)).toEqual(value);
+
+    ((formModel[2] as DynamicRowGroupModel).get(0) as DynamicTypeaheadModel).valueUpdates.next('test one');
+    value = {
+      issue: [new FormFieldMetadataValueObject('test')],
+      conference: [new FormFieldMetadataValueObject('test one')]
+    };
+    expect(service.getValueFromModel(formModel)).toEqual(value);
+  });
+
+  it('should clear all form\'s fields value', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    const value = {} as any;
+
+    ((formModel[0] as DynamicRowGroupModel).get(1) as DsDynamicInputModel).valueUpdates.next('test');
+    ((formModel[2] as DynamicRowGroupModel).get(0) as DynamicTypeaheadModel).valueUpdates.next('test one');
+
+    service.clearAllModelsValue(formModel);
+    expect(((formModel[0] as DynamicRowGroupModel).get(1) as DynamicTypeaheadModel).value).toEqual(undefined)
+    expect(((formModel[2] as DynamicRowGroupModel).get(0) as DynamicTypeaheadModel).value).toEqual(undefined)
+  });
+
+  it('should return true when model has a custom group model as parent', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    let model = service.findById('dc_identifier_QUALDROP_VALUE', formModel);
+    let modelParent = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
+    model.parent = modelParent;
+
+    expect(service.isModelInCustomGroup(model)).toBe(true);
+
+    model = service.findById('name_CONCAT_FIRST_INPUT', formModel);
+    modelParent = service.findById('name_CONCAT_GROUP', formModel);
+    model.parent = modelParent;
+
+    expect(service.isModelInCustomGroup(model)).toBe(true);
+  });
+
+  it('should return true when model value is an array', () => {
+    let model = service.findById('testCheckboxList', testModel) as DynamicFormArrayModel;
+
+    expect(service.hasArrayGroupValue(model)).toBe(true);
+
+    model = service.findById('testRadioList', testModel) as DynamicFormArrayModel;
+
+    expect(service.hasArrayGroupValue(model)).toBe(true);
+
+    model = service.findById('testTag', testModel) as DynamicFormArrayModel;
+
+    expect(service.hasArrayGroupValue(model)).toBe(true);
+  });
+
+  it('should return true when model value is a map', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    const model = service.findById('dc_identifier_QUALDROP_VALUE', formModel);
+    const modelParent = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
+    model.parent = modelParent;
+
+    expect(service.hasMappedGroupValue(model)).toBe(true);
+  });
+
+  it('should return true when model is a Qualdrop Group', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    const model = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
+
+    expect(service.isQualdropGroup(model)).toBe(true);
+  });
+
+  it('should return true when model is a Custom Group', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    let model = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
+
+    expect(service.isCustomGroup(model)).toBe(true);
+
+    model = service.findById('name_CONCAT_GROUP', formModel);
+
+    expect(service.isCustomGroup(model)).toBe(true);
+  });
+
+  it('should return true when model is a List Group', () => {
+    let model = service.findById('testCheckboxList', testModel);
+
+    expect(service.isListGroup(model)).toBe(true);
+
+    model = service.findById('testRadioList', testModel);
+
+    expect(service.isListGroup(model)).toBe(true);
+  });
+
+  it('should return true when model is a Relation Group', () => {
+    const model = service.findById('testRelationGroup', testModel);
+
+    expect(service.isRelationGroup(model)).toBe(true);
+  });
+
+  it('should return properly form control by field id', () => {
+    const group = service.createFormGroup(testModel);
+    const control = group.controls.testLookup;
+
+    expect(service.getFormControlById('testLookup', group, testModel)).toEqual(control);
+  });
+
+  it('should return field id from model', () => {
+    const model = service.findById('testRadioList', testModel);
+
+    expect(service.getId(model)).toEqual('testRadioList');
+  });
+
+  it('should create a form group', () => {
+
+    const formGroup = service.createFormGroup(testModel);
+
+    expect(formGroup instanceof FormGroup).toBe(true);
+
+    expect(formGroup.get('testCheckbox') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testCheckboxGroup') instanceof FormGroup).toBe(true);
+    expect(formGroup.get('testDatepicker') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testFormArray') instanceof FormArray).toBe(true);
+    expect(formGroup.get('testInput') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testRadioGroup') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testSelect') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testTextArea') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testFileUpload') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testEditor') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testTimePicker') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testRating') instanceof FormControl).toBe(true);
+    expect(formGroup.get('testColorPicker') instanceof FormControl).toBe(true);
+  });
+
+  it('should throw when unknown DynamicFormControlModel id is specified in JSON', () => {
+
+    expect(() => service.fromJSON([{id: 'test'}]))
+      .toThrow(new Error(`unknown form control model type defined on JSON object with id "test"`));
+  });
+
+  it('should resolve array group path', () => {
+
+    service.createFormGroup(testModel);
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const nestedModel = (model.get(0).get(1) as DynamicFormArrayModel).get(0);
+
+    expect(service.getPath(model)).toEqual(['testFormArray']);
+    expect(service.getPath(nestedModel)).toEqual(['testFormArray', '0', 'testNestedFormArray', '0']);
+  });
+
+  it('should add a form control to an existing form group', () => {
+
+    const formGroup = service.createFormGroup(testModel);
+    const nestedFormGroup = formGroup.controls.testFormGroup as FormGroup;
+    const nestedFormGroupModel = testModel[7] as DynamicFormGroupModel;
+    const newModel1 = new DynamicInputModel({id: 'newInput1'});
+    const newModel2 = new DynamicInputModel({id: 'newInput2'});
+
+    service.addFormGroupControl(formGroup, testModel, newModel1);
+    service.addFormGroupControl(nestedFormGroup, nestedFormGroupModel, newModel2);
+
+    expect(formGroup.controls[newModel1.id]).toBeTruthy();
+    expect(testModel[testModel.length - 1] === newModel1).toBe(true);
+
+    expect((formGroup.controls.testFormGroup as FormGroup).controls[newModel2.id]).toBeTruthy();
+    expect(nestedFormGroupModel.get(nestedFormGroupModel.group.length - 1) === newModel2).toBe(true);
+  });
+
+  it('should insert a form control to an existing form group', () => {
+
+    const formGroup = service.createFormGroup(testModel);
+    const nestedFormGroup = formGroup.controls.testFormGroup as FormGroup;
+    const nestedFormGroupModel = testModel[7] as DynamicFormGroupModel;
+    const newModel1 = new DynamicInputModel({id: 'newInput1'});
+    const newModel2 = new DynamicInputModel({id: 'newInput2'});
+
+    service.insertFormGroupControl(4, formGroup, testModel, newModel1);
+    service.insertFormGroupControl(0, nestedFormGroup, nestedFormGroupModel, newModel2);
+
+    expect(formGroup.controls[newModel1.id]).toBeTruthy();
+    expect(testModel[4] === newModel1).toBe(true);
+    expect(service.getPath(testModel[4])).toEqual(['newInput1']);
+
+    expect((formGroup.controls.testFormGroup as FormGroup).controls[newModel2.id]).toBeTruthy();
+    expect(nestedFormGroupModel.get(0) === newModel2).toBe(true);
+    expect(service.getPath(nestedFormGroupModel.get(0))).toEqual(['testFormGroup', 'newInput2']);
+  });
+
+  it('should move an existing form control to a different group position', () => {
+
+    const formGroup = service.createFormGroup(testModel);
+    const nestedFormGroupModel = testModel[7] as DynamicFormGroupModel;
+    const model1 = testModel[0];
+    const model2 = nestedFormGroupModel.get(0);
+
+    service.moveFormGroupControl(0, 2, testModel);
+
+    expect(formGroup.controls[model1.id]).toBeTruthy();
+    expect(testModel[2] === model1).toBe(true);
+
+    service.moveFormGroupControl(0, 1, nestedFormGroupModel);
+
+    expect((formGroup.controls.testFormGroup as FormGroup).controls[model2.id]).toBeTruthy();
+    expect(nestedFormGroupModel.get(1) === model2).toBe(true);
+  });
+
+  it('should remove a form control from an existing form group', () => {
+
+    const formGroup = service.createFormGroup(testModel);
+    const nestedFormGroup = formGroup.controls.testFormGroup as FormGroup;
+    const nestedFormGroupModel = testModel[7] as DynamicFormGroupModel;
+    const length = testModel.length;
+    const size = nestedFormGroupModel.size();
+    const index = 1;
+    const id1 = testModel[index].id;
+    const id2 = nestedFormGroupModel.get(index).id;
+
+    service.removeFormGroupControl(index, formGroup, testModel);
+
+    expect(Object.keys(formGroup.controls).length).toBe(length - 1);
+    expect(formGroup.controls[id1]).toBeUndefined();
+
+    expect(testModel.length).toBe(length - 1);
+    expect(service.findById(id1, testModel)).toBeNull();
+
+    service.removeFormGroupControl(index, nestedFormGroup, nestedFormGroupModel);
+
+    expect(Object.keys(nestedFormGroup.controls).length).toBe(size - 1);
+    expect(nestedFormGroup.controls[id2]).toBeUndefined();
+
+    expect(nestedFormGroupModel.size()).toBe(size - 1);
+    expect(service.findById(id2, testModel)).toBeNull();
+  });
+
+  it('should create a form array', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    let formArray;
+
+    expect(service.createFormArray).toBeTruthy();
+
+    formArray = service.createFormArray(model);
+
+    expect(formArray instanceof FormArray).toBe(true);
+    expect(formArray.length).toBe(model.initialCount);
+  });
+
+  it('should add a form array group', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+
+    service.addFormArrayGroup(formArray, model);
+
+    expect(formArray.length).toBe(model.initialCount + 1);
+  });
+
+  it('should insert a form array group', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+
+    service.insertFormArrayGroup(0, formArray, model);
+
+    expect(formArray.length).toBe(model.initialCount + 1);
+  });
+
+  it('should move up a form array group', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+    const index = 3;
+    const step = 1;
+
+    (formArray.at(index) as FormGroup).controls.testFormArrayGroupInput.setValue('next test value 1');
+    (formArray.at(index + step) as FormGroup).controls.testFormArrayGroupInput.setValue('next test value 2');
+
+    (model.get(index).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).valueUpdates.next('next test value 1');
+    (model.get(index + step).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).valueUpdates.next('next test value 2');
+
+    service.moveFormArrayGroup(index, step, formArray, model);
+
+    expect(formArray.length).toBe(model.initialCount);
+
+    expect((formArray.at(index) as FormGroup).controls.testFormArrayGroupInput.value).toEqual('next test value 2');
+    expect((formArray.at(index + step) as FormGroup).controls.testFormArrayGroupInput.value).toEqual('next test value 1');
+
+    expect((model.get(index).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).value).toEqual('next test value 2');
+    expect((model.get(index + step).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).value).toEqual('next test value 1');
+  });
+
+  it('should move down a form array group', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+    const index = 3;
+    const step = -1;
+
+    (formArray.at(index) as FormGroup).controls.testFormArrayGroupInput.setValue('next test value 1');
+    (formArray.at(index + step) as FormGroup).controls.testFormArrayGroupInput.setValue('next test value 2');
+
+    (model.get(index).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).valueUpdates.next('next test value 1');
+    (model.get(index + step).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).valueUpdates.next('next test value 2');
+
+    service.moveFormArrayGroup(index, step, formArray, model);
+
+    expect(formArray.length).toBe(model.initialCount);
+
+    expect((formArray.at(index) as FormGroup).controls.testFormArrayGroupInput.value).toEqual('next test value 2');
+    expect((formArray.at(index + step) as FormGroup).controls.testFormArrayGroupInput.value).toEqual('next test value 1');
+
+    expect((model.get(index).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).value).toEqual('next test value 2');
+    expect((model.get(index + step).get(0) as DynamicFormValueControlModel<DynamicFormControlValue>).value).toEqual('next test value 1');
+  });
+
+  it('should throw when form array group is to be moved out of bounds', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+
+    expect(() => service.moveFormArrayGroup(2, -5, formArray, model))
+      .toThrow(new Error(`form array group cannot be moved due to index or new index being out of bounds`));
+  });
+
+  it('should remove a form array group', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+
+    service.removeFormArrayGroup(0, formArray, model);
+
+    expect(formArray.length).toBe(model.initialCount - 1);
+  });
+
+  it('should clear a form array', () => {
+
+    const model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+    const formArray = service.createFormArray(model);
+
+    service.clearFormArray(formArray, model);
+
+    expect(formArray.length === 0).toBe(true);
+  });
+});
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index b33018ea0c..a58061e448 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -13,7 +13,7 @@ import {
 import { mergeWith, isObject } from 'lodash';
 
 import { isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
-import { DynamicComboboxModel } from './ds-dynamic-form-ui/models/ds-dynamic-combobox.model';
+import { DynamicQualdropModel } from './ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
 import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { DynamicListCheckboxGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
@@ -148,8 +148,8 @@ export class FormBuilderService extends DynamicFormService {
 
         let controlId;
         // Get the field's name
-        if (controlModel instanceof DynamicComboboxModel) {
-          // If is instance of DynamicComboboxModel take the qualdrop id as field's name
+        if (controlModel instanceof DynamicQualdropModel) {
+          // If is instance of DynamicQualdropModel take the qualdrop id as field's name
           controlId = controlModel.qualdropId;
         } else {
           controlId = controlModel.name;
@@ -220,22 +220,26 @@ export class FormBuilderService extends DynamicFormService {
   isModelInCustomGroup(model: DynamicFormControlModel) {
     return model.parent &&
       (model.parent instanceof DynamicConcatModel
-        || model.parent instanceof DynamicComboboxModel);
+        || model.parent instanceof DynamicQualdropModel);
+  }
+
+  hasArrayGroupValue(model: DynamicFormControlModel) {
+    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
   }
 
   hasMappedGroupValue(model: DynamicFormControlModel) {
-    return ((model.parent && model.parent instanceof DynamicComboboxModel)
+    return ((model.parent && model.parent instanceof DynamicQualdropModel)
       || model.parent instanceof DynamicGroupModel);
   }
 
-  isComboboxGroup(model: DynamicFormControlModel) {
-    return model && model instanceof DynamicComboboxModel;
+  isQualdropGroup(model: DynamicFormControlModel) {
+    return model && model instanceof DynamicQualdropModel;
   }
 
   isCustomGroup(model: DynamicFormControlModel) {
     return model &&
       (model instanceof DynamicConcatModel
-        || model instanceof DynamicComboboxModel
+        || this.isQualdropGroup(model)
         || this.isListGroup(model));
   }
 
@@ -245,10 +249,6 @@ export class FormBuilderService extends DynamicFormService {
         || model instanceof DynamicListRadioGroupModel);
   }
 
-  isModelInAuthorityGroup(model: DynamicFormControlModel) {
-    return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
-  }
-
   isRelationGroup(model: DynamicFormControlModel) {
     return model && model.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION;
   }
diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index 14150e9ccc..bd636e94de 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -31,10 +31,16 @@ export class ConcatFieldParser extends FieldParser {
 
     let clsGroup: DynamicFormControlLayout;
     let clsInput: DynamicFormControlLayout;
-    const newId = this.configData.selectableMetadata[0].metadata
-      .split('.')
-      .slice(0, this.configData.selectableMetadata[0].metadata.split('.').length - 1)
-      .join('.');
+    let newId: string;
+
+    if (this.configData.selectableMetadata[0].metadata.includes('.')) {
+      newId = this.configData.selectableMetadata[0].metadata
+        .split('.')
+        .slice(0, this.configData.selectableMetadata[0].metadata.split('.').length - 1)
+        .join('.');
+    } else {
+      newId = this.configData.selectableMetadata[0].metadata
+    }
 
     clsInput = {
       grid: {
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index 6c7b16cf10..703e79bf56 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -3,12 +3,12 @@ import { DynamicSelectModel, DynamicSelectModelConfig } from '@ng-dynamic-forms/
 import { FieldParser } from './field-parser';
 import { FormFieldModel } from '../models/form-field.model';
 import {
-  COMBOBOX_GROUP_SUFFIX,
-  COMBOBOX_METADATA_SUFFIX,
-  COMBOBOX_VALUE_SUFFIX,
-  DsDynamicComboboxModelConfig,
-  DynamicComboboxModel
-} from '../ds-dynamic-form-ui/models/ds-dynamic-combobox.model';
+  QUALDROP_GROUP_SUFFIX,
+  QUALDROP_METADATA_SUFFIX,
+  QUALDROP_VALUE_SUFFIX,
+  DsDynamicQualdropModelConfig,
+  DynamicQualdropModel
+} from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import { isNotEmpty } from '../../../empty.util';
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
@@ -58,25 +58,25 @@ export class OneboxFieldParser extends FieldParser {
         .slice(0, this.configData.selectableMetadata[0].metadata.split('.').length - 1)
         .join('.');
 
-      const inputSelectGroup: DsDynamicComboboxModelConfig = Object.create(null);
-      inputSelectGroup.id = newId.replace(/\./g, '_') + COMBOBOX_GROUP_SUFFIX;
+      const inputSelectGroup: DsDynamicQualdropModelConfig = Object.create(null);
+      inputSelectGroup.id = newId.replace(/\./g, '_') + QUALDROP_GROUP_SUFFIX;
       inputSelectGroup.group = [];
       inputSelectGroup.legend = this.configData.label;
 
-      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + COMBOBOX_METADATA_SUFFIX);
+      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX);
       this.setOptions(selectModelConfig);
       if (isNotEmpty(fieldValue)) {
         selectModelConfig.value = fieldValue.metadata;
       }
       inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
 
-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + COMBOBOX_VALUE_SUFFIX, true, true);
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, true, true);
       this.setValues(inputModelConfig, fieldValue);
 
       inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
       inputSelectGroup.group.push(new DsDynamicInputModel(inputModelConfig, clsInput));
 
-      return new DynamicComboboxModel(inputSelectGroup, clsGroup);
+      return new DynamicQualdropModel(inputSelectGroup, clsGroup);
     } else if (this.configData.selectableMetadata[0].authority) {
       const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel();
       this.setAuthorityOptions(typeaheadModelConfig, this.authorityUuid);

From 83e8b003e8784222f03e0b7e9de556618617733c Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 19 Jun 2018 18:11:53 +0200
Subject: [PATCH 12/41] Added more tests

---
 .../builder/parsers/name-field-parser.spec.ts |  85 ++++++++++
 .../parsers/onebox-field-parser.spec.ts       |  98 +++++++++++
 .../form/builder/parsers/row-parser.spec.ts   | 158 ++++++++++++++++++
 .../parsers/series-field-parser.spec.ts       |  56 +++++++
 4 files changed, 397 insertions(+)
 create mode 100644 src/app/shared/form/builder/parsers/name-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/row-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/series-field-parser.spec.ts

diff --git a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
new file mode 100644
index 0000000000..e512dac2f2
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
@@ -0,0 +1,85 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { NameFieldParser } from './name-field-parser';
+import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+
+describe('NameFieldParser test suite', () => {
+  let field1: FormFieldModel;
+  let field2: FormFieldModel;
+  let field3: FormFieldModel;
+
+  const initFormValues = {};
+  const readOnly = false;
+
+  beforeEach(() => {
+    field1 = {
+      input: {type: 'name'},
+      label: 'Name',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the name.',
+      selectableMetadata: [
+        {
+          metadata: 'name',
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+    field2 = {
+      hints: 'If the item has any identification numbers or codes associated with↵	it, please enter the types and the actual numbers or codes.',
+      input: {type: 'onebox'},
+      label: 'Identifiers',
+      languageCodes: [],
+      mandatory: 'false',
+      repeatable: false,
+      selectableMetadata: [
+        {metadata: 'dc.identifier.issn', label: 'ISSN'},
+        {metadata: 'dc.identifier.other', label: 'Other'},
+        {metadata: 'dc.identifier.ismn', label: 'ISMN'},
+        {metadata: 'dc.identifier.govdoc', label: 'Gov\'t Doc #'},
+        {metadata: 'dc.identifier.uri', label: 'URI'},
+        {metadata: 'dc.identifier.isbn', label: 'ISBN'},
+        {metadata: 'dc.identifier.doi', label: 'DOI'},
+        {metadata: 'dc.identifier.pmid', label: 'PubMed ID'},
+        {metadata: 'dc.identifier.arxiv', label: 'arXiv'}
+      ]
+    } as FormFieldModel;
+
+    field3 = {
+      input: {type: 'onebox'},
+      label: 'Title',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the name of the events, if any.',
+      selectableMetadata: [
+        {
+          metadata: 'title',
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+  });
+
+  it('should init parser properly', () => {
+    const parser = new NameFieldParser(field1, initFormValues, readOnly);
+
+    expect(parser instanceof NameFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicConcatModel object', () => {
+    const parser = new NameFieldParser(field2, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicConcatModel).toBe(true);
+  });
+
+  it('should return a DynamicConcatModel object with the correct separator', () => {
+    const parser = new NameFieldParser(field2, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect((fieldModel as DynamicConcatModel).separator).toBe(', ');
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts
new file mode 100644
index 0000000000..4e764a3b36
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts
@@ -0,0 +1,98 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { OneboxFieldParser } from './onebox-field-parser';
+import { DynamicQualdropModel } from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
+import { DynamicTypeaheadModel } from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model';
+import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+
+describe('OneboxFieldParser test suite', () => {
+  let field1: FormFieldModel;
+  let field2: FormFieldModel;
+  let field3: FormFieldModel;
+
+  const authorityUuid = 'testScopeUUID';
+  const initFormValues = {};
+  const readOnly = false;
+
+  beforeEach(() => {
+    field1 = {
+      input: {type: 'onebox'},
+      label: 'Title',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the name of the events, if any.',
+      selectableMetadata: [
+        {
+          metadata: 'title',
+          authority: 'EVENTAuthority',
+          closed: false
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+    field2 = {
+      hints: 'If the item has any identification numbers or codes associated with↵	it, please enter the types and the actual numbers or codes.',
+      input: {type: 'onebox'},
+      label: 'Identifiers',
+      languageCodes: [],
+      mandatory: 'false',
+      repeatable: false,
+      selectableMetadata: [
+        {metadata: 'dc.identifier.issn', label: 'ISSN'},
+        {metadata: 'dc.identifier.other', label: 'Other'},
+        {metadata: 'dc.identifier.ismn', label: 'ISMN'},
+        {metadata: 'dc.identifier.govdoc', label: 'Gov\'t Doc #'},
+        {metadata: 'dc.identifier.uri', label: 'URI'},
+        {metadata: 'dc.identifier.isbn', label: 'ISBN'},
+        {metadata: 'dc.identifier.doi', label: 'DOI'},
+        {metadata: 'dc.identifier.pmid', label: 'PubMed ID'},
+        {metadata: 'dc.identifier.arxiv', label: 'arXiv'}
+      ]
+    } as FormFieldModel;
+
+    field3 = {
+      input: {type: 'onebox'},
+      label: 'Title',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the name of the events, if any.',
+      selectableMetadata: [
+        {
+          metadata: 'title',
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+  });
+
+  it('should init parser properly', () => {
+    const parser = new OneboxFieldParser(field1, initFormValues, readOnly, authorityUuid);
+
+    expect(parser instanceof OneboxFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicQualdropModel object when selectableMetadata is multiple', () => {
+    const parser = new OneboxFieldParser(field2, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicQualdropModel).toBe(true);
+  });
+
+  it('should return a DsDynamicInputModel object when selectableMetadata is not multiple', () => {
+    const parser = new OneboxFieldParser(field3, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DsDynamicInputModel).toBe(true);
+  });
+
+  it('should return a DynamicTypeaheadModel object when selectableMetadata has authority', () => {
+    const parser = new OneboxFieldParser(field1, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicTypeaheadModel).toBe(true);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/row-parser.spec.ts b/src/app/shared/form/builder/parsers/row-parser.spec.ts
new file mode 100644
index 0000000000..b60cf8d01c
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/row-parser.spec.ts
@@ -0,0 +1,158 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormRowModel } from '../../../../core/shared/config/config-submission-forms.model';
+import { RowParser } from './row-parser';
+import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
+import { DynamicRowArrayModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
+
+describe('RowParser test suite', () => {
+
+  let row1: FormRowModel;
+  let row2: FormRowModel;
+  let row3: FormRowModel;
+
+  const scopeUUID = 'testScopeUUID';
+  const initFormValues = {};
+  const submissionScope = 'WORKSPACE';
+  const readOnly = false;
+
+  beforeEach(() => {
+    row1 = {
+      fields: [
+        {
+          input: {type: 'lookup'},
+          label: 'Journal',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter the name of the journal where the item has been\n\t\t\t\t\tpublished, if any.',
+          selectableMetadata: [
+            {
+              metadata: 'journal',
+              authority: 'JOURNALAuthority',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel,
+        {
+          input: {type: 'onebox'},
+          label: 'Issue',
+          mandatory: 'false',
+          repeatable: false,
+          hints: ' Enter issue number.',
+          selectableMetadata: [
+            {
+              metadata: 'issue'
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel,
+        {
+          input: {type: 'name'},
+          label: 'Name',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter full name.',
+          selectableMetadata: [
+            {
+              metadata: 'name'
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+    row2 = {
+      fields: [
+        {
+          input: {type: 'onebox'},
+          label: 'Title',
+          mandatory: 'false',
+          repeatable: true,
+          hints: 'Enter the name of the events, if any.',
+          selectableMetadata: [
+            {
+              metadata: 'title',
+              authority: 'EVENTAuthority',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        }
+      ]
+    } as FormRowModel;
+    row3 = {
+      fields: [
+        {
+          input: {type: 'onebox'},
+          label: 'Title',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter the name of the events, if any.',
+          selectableMetadata: [
+            {
+              metadata: 'title',
+              authority: 'EVENTAuthority',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        },
+        {
+          input: {type: 'onebox'},
+          label: 'Other title',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter the name of the events, if any.',
+          scope: 'WORKFLOW',
+          selectableMetadata: [
+            {
+              metadata: 'otherTitle',
+              authority: 'EVENTAuthority',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        }
+      ]
+    } as FormRowModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+  });
+
+  it('should return a DynamicRowGroupModel object', () => {
+    const parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    const rowModel = parser.parse();
+
+    expect(rowModel instanceof DynamicRowGroupModel).toBe(true);
+  });
+
+  it('should return a row with three fields', () => {
+    const parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    const rowModel = parser.parse();
+
+    expect((rowModel as DynamicRowGroupModel).group.length).toBe(3);
+  });
+
+  it('should return a DynamicRowArrayModel object', () => {
+    const parser = new RowParser(row2, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    const rowModel = parser.parse();
+
+    expect(rowModel instanceof DynamicRowArrayModel).toBe(true);
+  });
+
+  it('should return a row that contains only scoped fields', () => {
+    const parser = new RowParser(row3, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    const rowModel = parser.parse();
+
+    expect((rowModel as DynamicRowGroupModel).group.length).toBe(1);
+  });
+});
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
new file mode 100644
index 0000000000..b458929e7c
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
@@ -0,0 +1,56 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { OneboxFieldParser } from './onebox-field-parser';
+import { DynamicQualdropModel } from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
+import { DynamicTypeaheadModel } from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model';
+import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { ConcatFieldParser } from './concat-field-parser';
+import { NameFieldParser } from './name-field-parser';
+import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { SeriesFieldParser } from './series-field-parser';
+
+describe('SeriesFieldParser test suite', () => {
+  let field: FormFieldModel;
+
+  const initFormValues = {};
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {type: 'series'},
+      label: 'Series/Report No.',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the series and number assigned to this item by your community.',
+      selectableMetadata: [
+        {
+          metadata: 'series',
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+
+    expect(parser instanceof SeriesFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicConcatModel object', () => {
+    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicConcatModel).toBe(true);
+  });
+
+  it('should return a DynamicConcatModel object with the correct separator', () => {
+    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect((fieldModel as DynamicConcatModel).separator).toBe('; ');
+  });
+
+});

From 22493be15a878a9842931d1aeb5e3506e88b85d6 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 20 Jun 2018 12:11:59 +0200
Subject: [PATCH 13/41] Added more tests

---
 .../builder/parsers/date-field-parser.spec.ts |  47 ++++++++
 .../form/builder/parsers/date-field-parser.ts |   1 -
 .../parsers/dropdown-field-parser.spec.ts     |  55 +++++++++
 .../parsers/series-field-parser.spec.ts       |   6 -
 src/app/shared/form/form.service.spec.ts      | 108 +++++++++++++++---
 src/app/shared/form/form.service.ts           |  26 ++---
 6 files changed, 202 insertions(+), 41 deletions(-)
 create mode 100644 src/app/shared/form/builder/parsers/date-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts

diff --git a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
new file mode 100644
index 0000000000..aef4797676
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
@@ -0,0 +1,47 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { SeriesFieldParser } from './series-field-parser';
+import { DateFieldParser } from './date-field-parser';
+import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
+
+describe('DateFieldParser test suite', () => {
+  let field: FormFieldModel;
+
+  const initFormValues = {};
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'date'
+      },
+      label: 'Date of Issue.',
+      mandatory: 'true',
+      repeatable: false,
+      hints: 'Please give the date of previous publication or public distribution. You can leave out the day and/or month if they aren\'t applicable.',
+      mandatoryMessage: 'You must enter at least the year.',
+      selectableMetadata: [
+        {
+          metadata: 'date',
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new DateFieldParser(field, initFormValues, readOnly);
+
+    expect(parser instanceof DateFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicDsDatePickerModel object', () => {
+    const parser = new DateFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicDsDatePickerModel).toBe(true);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
index 6ad244f298..2c997211f1 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -1,6 +1,5 @@
 import { FieldParser } from './field-parser';
 import { DynamicDatePickerModelConfig } from '@ng-dynamic-forms/core';
-import { FormFieldModel } from '../models/form-field.model';
 import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
 import { isNotEmpty } from '../../../empty.util';
 import { DS_DATE_PICKER_SEPARATOR } from '../ds-dynamic-form-ui/models/date-picker/date-picker.component';
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
new file mode 100644
index 0000000000..700c824051
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
@@ -0,0 +1,55 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { DropdownFieldParser } from './dropdown-field-parser';
+import { DynamicScrollableDropdownModel } from '../ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+
+describe('DropdownFieldParser test suite', () => {
+  let field: FormFieldModel;
+
+  const authorityUuid = 'testScopeUUID';
+  const initFormValues = {};
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'dropdown'
+      },
+      label: 'Type',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Select the tyupe.',
+      selectableMetadata: [
+        {
+          metadata: 'type',
+          authority: 'common_types_dataset',
+          closed: false
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    expect(parser instanceof DropdownFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicScrollableDropdownModel object', () => {
+    const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicScrollableDropdownModel).toBe(true);
+  });
+
+  it('should throw when authority is not passed', () => {
+    field.selectableMetadata[0].authority = null;
+    const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    expect(() => parser.parse())
+      .toThrow();
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
index b458929e7c..384ae880dc 100644
--- a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
@@ -1,10 +1,4 @@
 import { FormFieldModel } from '../models/form-field.model';
-import { OneboxFieldParser } from './onebox-field-parser';
-import { DynamicQualdropModel } from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
-import { DynamicTypeaheadModel } from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model';
-import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
-import { ConcatFieldParser } from './concat-field-parser';
-import { NameFieldParser } from './name-field-parser';
 import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { SeriesFieldParser } from './series-field-parser';
 
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
index b72bbbd0d6..7155743764 100644
--- a/src/app/shared/form/form.service.spec.ts
+++ b/src/app/shared/form/form.service.spec.ts
@@ -1,21 +1,45 @@
 import { Store, StoreModule } from '@ngrx/store';
 import { async, inject, TestBed } from '@angular/core/testing';
-import 'rxjs/add/observable/of';
+import { FormGroup } from '@angular/forms';
+
+import {
+  DynamicFormControlModel,
+  DynamicFormService,
+  DynamicFormValidationService,
+  DynamicInputModel
+} from '@ng-dynamic-forms/core';
+
 import { FormService } from './form.service';
 import { FormBuilderService } from './builder/form-builder.service';
 import { AppState } from '../../app.reducer';
-import { DynamicPathable } from '@ng-dynamic-forms/core/src/model/misc/dynamic-form-control-path.model';
-import { DynamicFormControlModel } from '@ng-dynamic-forms/core';
 import { formReducer } from './form.reducers';
 
-describe('FormService', () => {
+describe('FormService test suite', () => {
   const formId = 'testForm';
   let service: FormService;
+  let builderService: FormBuilderService;
+  let formGroup: FormGroup;
+
+  const formModel: DynamicFormControlModel[] = [
+    new DynamicInputModel({id: 'author', value: 'test'}),
+    new DynamicInputModel({
+      id: 'title',
+      validators: {
+        required: null
+      },
+      errorMessages: {
+        required: 'Title is required'
+      }
+    }),
+    new DynamicInputModel({id: 'date'}),
+    new DynamicInputModel({id: 'description'}),
+  ];
+
   const formData = {
-    'dc.contributor.author': null,
-    'dc.title': ['test'],
-    'dc.date.issued': null,
-    'dc.description': null
+    author: ['test'],
+    title: null,
+    date: null,
+    description: null
   };
   const formState = {
     testForm: {
@@ -25,31 +49,27 @@ describe('FormService', () => {
     }
   };
 
-  const formBuilderServiceStub: any = {
-    getPath: (model: DynamicPathable) => [],
-    /* tslint:disable:no-empty */
-    clearAllModelsValue: (groupModel: DynamicFormControlModel[]) => {
-    }
-    /* tslint:enable:no-empty */
-  };
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
         StoreModule.forRoot({formReducer})
       ],
       providers: [
-        {provide: FormBuilderService, useValue: formBuilderServiceStub},
+        DynamicFormService,
+        DynamicFormValidationService,
+        FormBuilderService,
       ]
     }).compileComponents();
   }));
 
-  beforeEach(inject([Store], (store: Store<AppState>) => {
+  beforeEach(inject([Store, FormBuilderService], (store: Store<AppState>, formBuilderService: FormBuilderService) => {
     store
       .subscribe((state) => {
         state.forms = formState;
       });
-    service = new FormService(formBuilderServiceStub, store);
+    builderService = formBuilderService;
+    formGroup = builderService.createFormGroup(formModel);
+    service = new FormService(formBuilderService, store);
   }));
 
   it('should check whether form state is init', () => {
@@ -70,4 +90,54 @@ describe('FormService', () => {
     });
   });
 
+  it('should return form unique id', () => {
+    const formId1 = service.getUniqueId(formId);
+    const formId2 = service.getUniqueId(formId);
+
+    expect(formId1).not.toEqual(formId2);
+  });
+
+  it('should validate all form fields', () => {
+    service.validateAllFormFields(formGroup);
+
+    expect(formGroup.controls.author.touched).toBe(true);
+    expect(formGroup.controls.author.status).toBe('VALID');
+
+    expect(formGroup.controls.title.touched).toBe(true);
+    expect(formGroup.controls.title.status).toBe('INVALID');
+
+    expect(formGroup.controls.date.touched).toBe(true);
+
+    expect(formGroup.controls.description.touched).toBe(true);
+  });
+
+  it('should add error to field', () => {
+    const control = builderService.getFormControlById('description', formGroup, formModel);
+    const model = builderService.findById('description', formModel);
+
+    service.addErrorToField(control, model, 'Test error message');
+    const errorKeys = Object.keys(control.errors);
+
+    expect(errorKeys.length).toBe(1);
+
+    expect(control.hasError(errorKeys[0])).toBe(true);
+
+    expect(formGroup.controls.description.touched).toBe(true);
+  });
+
+  it('should remove error from field', () => {
+    const control = builderService.getFormControlById('description', formGroup, formModel);
+    const model = builderService.findById('description', formModel);
+
+    service.addErrorToField(control, model, 'Test error message');
+    const errorKeys = Object.keys(control.errors);
+
+    service.removeErrorFromField(control, model, errorKeys[0]);
+
+    expect(errorKeys.length).toBe(1);
+
+    expect(control.hasError(errorKeys[0])).toBe(false);
+
+    expect(formGroup.controls.description.touched).toBe(false);
+  });
 });
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
index f13bae1532..823b00d69b 100644
--- a/src/app/shared/form/form.service.ts
+++ b/src/app/shared/form/form.service.ts
@@ -65,15 +65,6 @@ export class FormService {
     });
   }
 
-  public setValue(formGroup: FormGroup, fieldModel: DynamicFormControlModel, fieldId: string, value: any) {
-    if (isNotEmpty(fieldModel)) {
-      const path = this.formBuilderService.getPath(fieldModel);
-      const fieldControl = formGroup.get(path);
-      fieldControl.markAsDirty();
-      fieldControl.setValue(value);
-    }
-  }
-
   public addErrorToField(field: AbstractControl, model: DynamicFormControlModel, message: string) {
 
     const error = {}; // create the error object
@@ -104,15 +95,20 @@ export class FormService {
     field.markAsTouched();
   }
 
-  public removeErrorFromField(field: AbstractControl, model: DynamicFormControlModel, message) {
+  public removeErrorFromField(field: AbstractControl, model: DynamicFormControlModel, messageKey: string) {
     const error = {};
 
-    // Use correct error messages from the model
-    const lastArray = message.split('.');
-    if (lastArray && lastArray.length > 0) {
-      const last = lastArray[lastArray.length - 1];
-      error[last] = null;
+    if (messageKey.includes('.')) {
+      // Use correct error messages from the model
+      const lastArray = messageKey.split('.');
+      if (lastArray && lastArray.length > 0) {
+        const last = lastArray[lastArray.length - 1];
+        error[last] = null;
+      }
+    } else {
+      error[messageKey] = null;
     }
+
     field.setErrors(error);
     field.markAsUntouched();
   }

From fe416b294b721a49f4972dbc651e0c60eff317dd Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 20 Jun 2018 19:23:55 +0200
Subject: [PATCH 14/41] created DynamicLookupNameModel and added more tests

---
 .../ds-dynamic-form-control.component.html    |  12 ++
 .../ds-dynamic-form-control.component.spec.ts |   8 +-
 .../ds-dynamic-form-control.component.ts      |   5 +
 .../lookup/dynamic-lookup-name.model.ts       |  26 +++++
 .../lookup/dynamic-lookup.component.html      |   8 +-
 .../models/lookup/dynamic-lookup.component.ts |  21 ++--
 .../models/lookup/dynamic-lookup.model.ts     |  11 --
 .../form/builder/form-builder.service.spec.ts |   5 +-
 .../builder/parsers/date-field-parser.spec.ts |   2 +-
 .../parsers/dropdown-field-parser.spec.ts     |   2 +-
 .../parsers/group-field-parser.spec.ts        | 108 ++++++++++++++++++
 .../builder/parsers/list-field-parser.spec.ts |  71 ++++++++++++
 .../parsers/lookup-field-parser.spec.ts       |  61 ++++++++++
 .../builder/parsers/lookup-field-parser.ts    |   4 +-
 .../parsers/lookup-name-field-parser.spec.ts  |  63 ++++++++++
 .../parsers/lookup-name-field-parser.ts       |  27 +++--
 .../builder/parsers/name-field-parser.spec.ts |   2 +-
 .../parsers/series-field-parser.spec.ts       |   2 +-
 src/app/shared/form/form.service.spec.ts      |  39 ++++++-
 19 files changed, 428 insertions(+), 49 deletions(-)
 create mode 100644 src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model.ts
 create mode 100644 src/app/shared/form/builder/parsers/group-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/list-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
index a044a78e8e..7b8501e7af 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -317,6 +317,18 @@
           ></ds-dynamic-lookup>
         </ng-container>
 
+        <ng-container *ngSwitchCase="19">
+          <ds-dynamic-lookup
+            [bindId]="bindId"
+            [group]="group"
+            [model]="model"
+            [showErrorMessages]="showErrorMessages"
+            (blur)="onBlur($event)"
+            (change)="onValueChange($event)"
+            (focus)="onFocus($event)"
+          ></ds-dynamic-lookup>
+        </ng-container>
+
         <small *ngIf="showHint" class="text-muted" [innerHTML]="model.hint"
                [ngClass]="getClass('element', 'hint')"></small>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
index 3e24916899..7fc756c470 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.spec.ts
@@ -38,6 +38,7 @@ import { DynamicScrollableDropdownModel } from './models/scrollable-dropdown/dyn
 import { DynamicTagModel } from './models/tag/dynamic-tag.model';
 import { DynamicTypeaheadModel } from './models/typeahead/dynamic-typeahead.model';
 import { DynamicQualdropModel } from './models/ds-dynamic-qualdrop.model';
+import { DynamicLookupNameModel } from './models/lookup/dynamic-lookup-name.model';
 
 describe('DsDynamicFormControlComponent test suite', () => {
 
@@ -79,7 +80,8 @@ describe('DsDynamicFormControlComponent test suite', () => {
       submissionScope: ''
     }),
     new DynamicDsDatePickerModel({id: 'datepicker'}),
-    new DynamicLookupModel({id: 'lookup', separator: ','}),
+    new DynamicLookupModel({id: 'lookup'}),
+    new DynamicLookupNameModel({id: 'lookupName'}),
     new DynamicQualdropModel({id: 'combobox', readOnly: false})
   ];
   const testModel = formModel[8];
@@ -272,6 +274,8 @@ describe('DsDynamicFormControlComponent test suite', () => {
 
     expect(testFn(formModel[23])).toEqual(NGBootstrapFormControlType.Lookup);
 
-    expect(testFn(formModel[24])).toEqual(NGBootstrapFormControlType.Group);
+    expect(testFn(formModel[24])).toEqual(NGBootstrapFormControlType.LookupName);
+
+    expect(testFn(formModel[25])).toEqual(NGBootstrapFormControlType.Group);
   });
 });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
index 5bd8402702..660ae9c244 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -39,6 +39,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup
 import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './models/list/dynamic-list-radio-group.model';
 import { isNotEmpty } from '../../../empty.util';
+import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME } from './models/lookup/dynamic-lookup-name.model';
 
 export const enum NGBootstrapFormControlType {
 
@@ -60,6 +61,7 @@ export const enum NGBootstrapFormControlType {
   Relation = 16, // 'RELATION'
   Date = 17, // 'DATE'
   Lookup = 18, // LOOKUP
+  LookupName = 19, // LOOKUP_NAME
 }
 
 @Component({
@@ -144,6 +146,9 @@ export class DsDynamicFormControlComponent extends DynamicFormControlComponent i
       case DYNAMIC_FORM_CONTROL_TYPE_LOOKUP:
         return NGBootstrapFormControlType.Lookup;
 
+      case DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME:
+        return NGBootstrapFormControlType.LookupName;
+
       default:
         return null;
     }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model.ts
new file mode 100644
index 0000000000..64590ec9e0
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model.ts
@@ -0,0 +1,26 @@
+import { DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import { DynamicLookupModel, DynamicLookupModelConfig } from './dynamic-lookup.model';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME = 'LOOKUP_NAME';
+
+export interface DynamicLookupNameModelConfig extends DynamicLookupModelConfig {
+  separator?: string;
+  firstPlaceholder?: string;
+  secondPlaceholder?: string;
+}
+
+export class DynamicLookupNameModel extends DynamicLookupModel {
+
+  @serializable() separator: string;
+  @serializable() secondPlaceholder: string;
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME;
+
+  constructor(config: DynamicLookupNameModelConfig, layout?: DynamicFormControlLayout) {
+
+    super(config, layout);
+
+    this.separator = config.separator || ',';
+    this.placeholder = config.firstPlaceholder || 'form.last-name';
+    this.secondPlaceholder = config.secondPlaceholder || 'form.first-name';
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 14f468b0f8..710639ff88 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -3,7 +3,7 @@
      (openChange)="openChange($event);">
 
   <!--Simple lookup, only 1 field -->
-  <div class="form-row" *ngIf="!isLookupName">
+  <div class="form-row" *ngIf="!isLookupName()">
     <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
       <div class="row">
         <div class="col">
@@ -42,7 +42,7 @@
   </div>
 
   <!--Lookup-name, 2 fields-->
-  <div class="form-row" *ngIf="isLookupName">
+  <div class="form-row" *ngIf="isLookupName()">
     <div class="col-xs-12 col-md-8 col-lg-9">
       <div class="row">
         <div class="col-xs-12 col-md-6">
@@ -63,7 +63,7 @@
                  (input)="onInput($event)">
         </div>
 
-        <div *ngIf="isLookupName" class="col-xs-12 col-md-6 pl-md-0" >
+        <div *ngIf="isLookupName()" class="col-xs-12 col-md-6 pl-md-0" >
           <input  class="form-control"
                   [ngClass]="{}"
                   [attr.autoComplete]="model.autoComplete"
@@ -73,7 +73,7 @@
                   [type]="model.inputType"
                   [(ngModel)]="secondInputValue"
                   [disabled]="firstInputValue.length === 0 || isInputDisabled()"
-                  [placeholder]="model.placeholder2 | translate"
+                  [placeholder]="model.secondPlaceholder | translate"
                   [readonly]="model.readOnly"
                   (change)="$event.preventDefault()"
                   (blur)="onBlurEvent($event); $event.stopPropagation(); sdRef.close();"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
index 1ecf384748..a0a9f3be31 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
@@ -10,6 +10,7 @@ import { PageInfo } from '../../../../../../core/shared/page-info.model';
 import { Subscription } from 'rxjs/Subscription';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { DynamicLookupNameModel } from './dynamic-lookup-name.model';
 
 @Component({
   selector: 'ds-dynamic-lookup',
@@ -19,7 +20,7 @@ import { AuthorityValueModel } from '../../../../../../core/integration/models/a
 export class DsDynamicLookupComponent implements OnDestroy, OnInit {
   @Input() bindId = true;
   @Input() group: FormGroup;
-  @Input() model: DynamicLookupModel;
+  @Input() model: DynamicLookupModel | DynamicLookupNameModel;
   @Input() showErrorMessages = false;
 
   @Output() blur: EventEmitter<any> = new EventEmitter<any>();
@@ -31,7 +32,6 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
   public loading = false;
   public pageInfo: PageInfo;
   public optionsList: any;
-  public isLookupName: boolean;
   public name2: string;
 
   protected searchOptions: IntegrationSearchOptions;
@@ -51,8 +51,7 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
       1);
 
     // Switch Lookup/LookupName
-    if (this.model.separator) {
-      this.isLookupName = true;
+    if (this.isLookupName()) {
       this.name2 = this.model.name + '2';
     }
 
@@ -107,8 +106,8 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
       }
 
       if (hasValue(displayValue)) {
-        if (this.isLookupName) {
-          const values = displayValue.split(this.model.separator);
+        if (this.isLookupName()) {
+          const values = displayValue.split((this.model as DynamicLookupNameModel).separator);
 
           this.firstInputValue = (values[0] || '').trim();
           this.secondInputValue = (values[1] || '').trim();
@@ -121,7 +120,7 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
 
   protected getCurrentValue(): string {
     let result = '';
-    if (!this.isLookupName) {
+    if (!this.isLookupName()) {
       result = this.firstInputValue;
     } else {
       if (isNotEmpty(this.firstInputValue)) {
@@ -130,7 +129,7 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
       if (isNotEmpty(this.secondInputValue)) {
         result = isEmpty(result)
           ? this.secondInputValue
-          : this.firstInputValue + this.model.separator + ' ' + this.secondInputValue;
+          : this.firstInputValue + (this.model as DynamicLookupNameModel).separator + ' ' + this.secondInputValue;
       }
     }
     return result;
@@ -163,7 +162,7 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
 
   protected resetFields() {
     this.firstInputValue = '';
-    if (this.isLookupName) {
+    if (this.isLookupName()) {
       this.secondInputValue = '';
     }
   }
@@ -181,6 +180,10 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
     return this.model.authorityOptions.closed && hasValue(this.model.value);
   }
 
+  isLookupName() {
+    return (this.model instanceof DynamicLookupNameModel);
+  }
+
   isSearchDisabled() {
     // if (this.firstInputValue === ''
     //   && (this.isLookupName ? this.secondInputValue === '' : true)) {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
index 1d9f7ed9e9..e14dedb2ac 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.model.ts
@@ -1,14 +1,11 @@
 import { AUTOCOMPLETE_OFF, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
-import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-input.model';
-import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
 
 export const DYNAMIC_FORM_CONTROL_TYPE_LOOKUP = 'LOOKUP';
 
 export interface DynamicLookupModelConfig extends DsDynamicInputModelConfig {
   maxOptions?: number;
   value?: any;
-  separator: string;
 }
 
 export class DynamicLookupModel extends DsDynamicInputModel {
@@ -16,10 +13,6 @@ export class DynamicLookupModel extends DsDynamicInputModel {
   @serializable() maxOptions: number;
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP;
   @serializable() value: any;
-  @serializable() separator: string; // Defined only for lookup-name
-
-  @serializable() placeholder: string;
-  @serializable() placeholder2: string;
 
   constructor(config: DynamicLookupModelConfig, layout?: DynamicFormControlLayout) {
 
@@ -27,11 +20,7 @@ export class DynamicLookupModel extends DsDynamicInputModel {
 
     this.autoComplete = AUTOCOMPLETE_OFF;
     this.maxOptions = config.maxOptions || 10;
-    this.separator = config.separator; // Defined only for lookup-name
 
     this.valueUpdates.next(config.value);
-    // this.valueUpdates.subscribe(() => {
-    //   this.setInputsValue();
-    // });
   }
 }
diff --git a/src/app/shared/form/builder/form-builder.service.spec.ts b/src/app/shared/form/builder/form-builder.service.spec.ts
index c31d5c39aa..26d2ac73e3 100644
--- a/src/app/shared/form/builder/form-builder.service.spec.ts
+++ b/src/app/shared/form/builder/form-builder.service.spec.ts
@@ -47,6 +47,7 @@ import { DynamicRowGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-row
 import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
 import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { DynamicLookupNameModel } from './ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model';
 
 describe('FormBuilderService test suite', () => {
 
@@ -243,7 +244,9 @@ describe('FormBuilderService test suite', () => {
 
       new DynamicDsDatePickerModel({id: 'testDate'}),
 
-      new DynamicLookupModel({id: 'testLookup', separator: ','}),
+      new DynamicLookupModel({id: 'testLookup'}),
+
+      new DynamicLookupNameModel({id: 'testLookupName'}),
 
       new DynamicQualdropModel({id: 'testCombobox', readOnly: false})
     ];
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
index aef4797676..430e6df3cb 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
@@ -36,7 +36,7 @@ describe('DateFieldParser test suite', () => {
     expect(parser instanceof DateFieldParser).toBe(true);
   });
 
-  it('should return a DynamicDsDatePickerModel object', () => {
+  it('should return a DynamicDsDatePickerModel object when repeatable option is false', () => {
     const parser = new DateFieldParser(field, initFormValues, readOnly);
 
     const fieldModel = parser.parse();
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
index 700c824051..52d886d405 100644
--- a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
@@ -36,7 +36,7 @@ describe('DropdownFieldParser test suite', () => {
     expect(parser instanceof DropdownFieldParser).toBe(true);
   });
 
-  it('should return a DynamicScrollableDropdownModel object', () => {
+  it('should return a DynamicScrollableDropdownModel object when repeatable option is false', () => {
     const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
 
     const fieldModel = parser.parse();
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.spec.ts b/src/app/shared/form/builder/parsers/group-field-parser.spec.ts
new file mode 100644
index 0000000000..43cf72b61c
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/group-field-parser.spec.ts
@@ -0,0 +1,108 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { GroupFieldParser } from './group-field-parser';
+import { DynamicGroupModel } from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+
+describe('GroupFieldParser test suite', () => {
+  let field: FormFieldModel;
+  let initFormValues = {};
+
+  const authorityUuid = 'testScopeUUID';
+  const readOnly = false;
+  const submissionScope = 'WORKSPACE';
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'group'
+      },
+      rows: [
+        {
+          fields: [
+            {
+              input: {
+                type: 'onebox'
+              },
+              label: 'Author',
+              mandatory: 'false',
+              repeatable: false,
+              hints: 'Enter the name of the author.',
+              selectableMetadata: [
+                {
+                  metadata: 'author'
+                }
+              ],
+              languageCodes: []
+            },
+            {
+              input: {
+                type: 'onebox'
+              },
+              label: 'Affiliation',
+              mandatory: false,
+              repeatable: true,
+              hints: 'Enter the affiliation of the author.',
+              selectableMetadata: [
+                {
+                  metadata: 'affiliation'
+                }
+              ],
+              languageCodes: []
+            }
+          ]
+        }
+      ],
+      label: 'Authors',
+      mandatory: 'true',
+      repeatable: false,
+      mandatoryMessage: 'Entering at least the first author is mandatory.',
+      hints: 'Enter the names of the authors of this item.',
+      selectableMetadata: [
+        {
+          metadata: 'author'
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+
+    expect(parser instanceof GroupFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicGroupModel object', () => {
+    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicGroupModel).toBe(true);
+  });
+
+  it('should throw when rows configuration is empty', () => {
+    field.rows = null;
+    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+
+    expect(() => parser.parse())
+      .toThrow();
+  });
+
+  it('should set group init value properly', () => {
+    initFormValues = {
+      author: [new FormFieldMetadataValueObject('test author')],
+      affiliation: [new FormFieldMetadataValueObject('test affiliation')]
+    };
+    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+
+    const fieldModel = parser.parse();
+    const expectedValue = [{
+      author: new FormFieldMetadataValueObject('test author'),
+      affiliation: new FormFieldMetadataValueObject('test affiliation')
+    }];
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/list-field-parser.spec.ts b/src/app/shared/form/builder/parsers/list-field-parser.spec.ts
new file mode 100644
index 0000000000..65184e5433
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/list-field-parser.spec.ts
@@ -0,0 +1,71 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { ListFieldParser } from './list-field-parser';
+import { DynamicListCheckboxGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
+import { DynamicListRadioGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
+
+describe('ListFieldParser test suite', () => {
+  let field: FormFieldModel;
+  let initFormValues = {};
+
+  const authorityUuid = 'testScopeUUID';
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'list'
+      },
+      label: 'Type',
+      mandatory: 'false',
+      repeatable: true,
+      hints: 'Select the type.',
+      selectableMetadata: [
+        {
+          metadata: 'type',
+          authority: 'type_programme',
+          closed: false
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    expect(parser instanceof ListFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicListCheckboxGroupModel object when repeatable option is true', () => {
+    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicListCheckboxGroupModel).toBe(true);
+  });
+
+  it('should return a DynamicListRadioGroupModel object when repeatable option is false', () => {
+    field.repeatable = false;
+    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicListRadioGroupModel).toBe(true);
+  });
+
+  it('should set init value properly', () => {
+    initFormValues = {
+      type: [new FormFieldMetadataValueObject('test type')],
+    };
+    const expectedValue = [new FormFieldMetadataValueObject('test type')];
+
+    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts
new file mode 100644
index 0000000000..209ff318ea
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts
@@ -0,0 +1,61 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { LookupFieldParser } from './lookup-field-parser';
+import { DynamicLookupModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+
+describe('LookupFieldParser test suite', () => {
+  let field: FormFieldModel;
+  let initFormValues = {};
+
+  const authorityUuid = 'testScopeUUID';
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'lookup'
+      },
+      label: 'Journal',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the name of the journal where the item has been published, if any.',
+      selectableMetadata: [
+        {
+          metadata: 'journal',
+          authority: 'JOURNALAuthority',
+          closed: false
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new LookupFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    expect(parser instanceof LookupFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicLookupModel object when repeatable option is false', () => {
+    const parser = new LookupFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicLookupModel).toBe(true);
+  });
+
+  it('should set init value properly', () => {
+    initFormValues = {
+      journal: [new FormFieldMetadataValueObject('test journal')],
+    };
+    const expectedValue = new FormFieldMetadataValueObject('test journal');
+
+    const parser = new LookupFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
index 9a9637997d..1962c3928e 100644
--- a/src/app/shared/form/builder/parsers/lookup-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
@@ -19,8 +19,8 @@ export class LookupFieldParser extends FieldParser {
 
       this.setValues(lookupModelConfig, fieldValue, true);
 
-      const lookupModel = new DynamicLookupModel(lookupModelConfig);
-      return lookupModel;
+      return new DynamicLookupModel(lookupModelConfig);
+
     }
   }
 }
diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts
new file mode 100644
index 0000000000..e5d1df7dc1
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts
@@ -0,0 +1,63 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { LookupFieldParser } from './lookup-field-parser';
+import { DynamicLookupModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+import { LookupNameFieldParser } from './lookup-name-field-parser';
+import { DynamicLookupNameModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model';
+
+describe('LookupNameFieldParser test suite', () => {
+  let field: FormFieldModel;
+  let initFormValues = {};
+
+  const authorityUuid = 'testScopeUUID';
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'lookup-name'
+      },
+      label: 'Author',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter the name of the author.',
+      selectableMetadata: [
+        {
+          metadata: 'author',
+          authority: 'RPAuthority',
+          closed: false
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new LookupNameFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    expect(parser instanceof LookupNameFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicLookupNameModel object when repeatable option is false', () => {
+    const parser = new LookupNameFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicLookupNameModel).toBe(true);
+  });
+
+  it('should set init value properly', () => {
+    initFormValues = {
+      author: [new FormFieldMetadataValueObject('test author')],
+    };
+    const expectedValue = new FormFieldMetadataValueObject('test author');
+
+    const parser = new LookupNameFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
index 8ae8d78b2b..d687ddf0c4 100644
--- a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
@@ -1,22 +1,29 @@
 import { FormFieldModel } from '../models/form-field.model';
-import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
-import { LookupFieldParser } from './lookup-field-parser';
+import { FieldParser } from './field-parser';
+import {
+  DynamicLookupNameModel,
+  DynamicLookupNameModelConfig
+} from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model';
 
-export class LookupNameFieldParser extends LookupFieldParser {
+export class LookupNameFieldParser extends FieldParser {
 
   constructor(protected configData: FormFieldModel,
               protected initFormValues,
               protected readOnly: boolean,
               protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly, authorityUuid);
+    super(configData, initFormValues, readOnly);
   }
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject | any): any {
-    const lookupModel = super.modelFactory(fieldValue);
-    lookupModel.separator = ',';
-    lookupModel.placeholder = 'form.last-name';
-    lookupModel.placeholder2 = 'form.first-name';
-    return lookupModel;
+  public modelFactory(fieldValue: any): any {
+    if (this.configData.selectableMetadata[0].authority) {
+      const lookupModelConfig: DynamicLookupNameModelConfig = this.initModel();
 
+      this.setAuthorityOptions(lookupModelConfig, this.authorityUuid);
+
+      this.setValues(lookupModelConfig, fieldValue, true);
+
+      return new DynamicLookupNameModel(lookupModelConfig);
+    }
   }
+
 }
diff --git a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
index e512dac2f2..e565ea881d 100644
--- a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
@@ -66,7 +66,7 @@ describe('NameFieldParser test suite', () => {
     expect(parser instanceof NameFieldParser).toBe(true);
   });
 
-  it('should return a DynamicConcatModel object', () => {
+  it('should return a DynamicConcatModel object when repeatable option is false', () => {
     const parser = new NameFieldParser(field2, initFormValues, readOnly);
 
     const fieldModel = parser.parse();
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
index 384ae880dc..21889a1b53 100644
--- a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
@@ -31,7 +31,7 @@ describe('SeriesFieldParser test suite', () => {
     expect(parser instanceof SeriesFieldParser).toBe(true);
   });
 
-  it('should return a DynamicConcatModel object', () => {
+  it('should return a DynamicConcatModel object when repeatable option is false', () => {
     const parser = new SeriesFieldParser(field, initFormValues, readOnly);
 
     const fieldModel = parser.parse();
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
index 7155743764..a3f8e09e84 100644
--- a/src/app/shared/form/form.service.spec.ts
+++ b/src/app/shared/form/form.service.spec.ts
@@ -112,11 +112,23 @@ describe('FormService test suite', () => {
   });
 
   it('should add error to field', () => {
-    const control = builderService.getFormControlById('description', formGroup, formModel);
-    const model = builderService.findById('description', formModel);
+    let control = builderService.getFormControlById('description', formGroup, formModel);
+    let model = builderService.findById('description', formModel);
+    let errorKeys: string[];
 
     service.addErrorToField(control, model, 'Test error message');
-    const errorKeys = Object.keys(control.errors);
+    errorKeys = Object.keys(control.errors);
+
+    expect(errorKeys.length).toBe(1);
+
+    expect(control.hasError(errorKeys[0])).toBe(true);
+
+    expect(formGroup.controls.description.touched).toBe(true);
+
+    control = builderService.getFormControlById('title', formGroup, formModel);
+    model = builderService.findById('title', formModel);
+    service.addErrorToField(control, model, 'error.required');
+    errorKeys = Object.keys(control.errors);
 
     expect(errorKeys.length).toBe(1);
 
@@ -126,11 +138,26 @@ describe('FormService test suite', () => {
   });
 
   it('should remove error from field', () => {
-    const control = builderService.getFormControlById('description', formGroup, formModel);
-    const model = builderService.findById('description', formModel);
+    let control = builderService.getFormControlById('description', formGroup, formModel);
+    let model = builderService.findById('description', formModel);
+    let errorKeys: string[];
 
     service.addErrorToField(control, model, 'Test error message');
-    const errorKeys = Object.keys(control.errors);
+    errorKeys = Object.keys(control.errors);
+
+    service.removeErrorFromField(control, model, errorKeys[0]);
+
+    expect(errorKeys.length).toBe(1);
+
+    expect(control.hasError(errorKeys[0])).toBe(false);
+
+    expect(formGroup.controls.description.touched).toBe(false);
+
+    control = builderService.getFormControlById('title', formGroup, formModel);
+    model = builderService.findById('title', formModel);
+
+    service.addErrorToField(control, model, 'error.required');
+    errorKeys = Object.keys(control.errors);
 
     service.removeErrorFromField(control, model, errorKeys[0]);
 

From 40ccbdf65363db1577c81cdd71d52ced3a0cdcdd Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 21 Jun 2018 11:40:00 +0200
Subject: [PATCH 15/41] Added more tests

---
 .../models/ds-dynamic-textarea.model.ts       |   8 +-
 .../shared/form/builder/parsers/row-parser.ts |   4 -
 .../builder/parsers/tag-field-parser.spec.ts  |  63 ++++++
 .../parsers/textarea-field-parser.spec.ts     |  61 +++++
 .../builder/parsers/twobox-field-parser.ts    |  10 -
 src/app/shared/form/form.reducer.spec.ts      | 208 +++++++++++++-----
 6 files changed, 276 insertions(+), 78 deletions(-)
 create mode 100644 src/app/shared/form/builder/parsers/tag-field-parser.spec.ts
 create mode 100644 src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts
 delete mode 100644 src/app/shared/form/builder/parsers/twobox-field-parser.ts

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts
index 9aead0447f..00d385edef 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model.ts
@@ -1,10 +1,4 @@
-import {
-  DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
-  DynamicFormControlLayout, DynamicTextAreaModel, DynamicTextAreaModelConfig,
-  serializable
-} from '@ng-dynamic-forms/core';
-import { Subject } from 'rxjs/Subject';
-import { LanguageCode } from '../../models/form-field-language-value.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
 import { DsDynamicInputModel, DsDynamicInputModelConfig } from './ds-dynamic-input.model';
 
 export interface DsDynamicTextAreaModelConfig extends DsDynamicInputModelConfig {
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
index 3f76c1c5c1..d21799c584 100644
--- a/src/app/shared/form/builder/parsers/row-parser.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -93,10 +93,6 @@ export class RowParser {
           fieldModel = new GroupFieldParser(fieldData, this.initFormValues, this.readOnly, this.submissionScope, this.authorityOptions.uuid).parse();
           break;
 
-        case 'twobox':
-          // group.push(new TwoboxFieldParser(fieldData).parse());
-          break;
-
         default:
           throw new Error(`unknown form control model type defined on JSON object with label "${fieldData.label}"`);
       }
diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts b/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts
new file mode 100644
index 0000000000..d71681b32d
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts
@@ -0,0 +1,63 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { TagFieldParser } from './tag-field-parser';
+import { DynamicTagModel } from '../ds-dynamic-form-ui/models/tag/dynamic-tag.model';
+
+describe('TagFieldParser test suite', () => {
+  let field: FormFieldModel;
+  let initFormValues: any = {};
+
+  const authorityUuid = 'testScopeUUID';
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'tag'
+      },
+      label: 'Keywords',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Local controlled vocabulary.',
+      selectableMetadata: [
+        {
+          metadata: 'subject',
+          authority: 'JOURNALAuthority',
+          closed: false
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new TagFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    expect(parser instanceof TagFieldParser).toBe(true);
+  });
+
+  it('should return a DynamicTagModel object when repeatable option is false', () => {
+    const parser = new TagFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DynamicTagModel).toBe(true);
+  });
+
+  it('should set init value properly', () => {
+    initFormValues = {
+      subject: [
+        new FormFieldMetadataValueObject('test subject'),
+        new FormFieldMetadataValueObject('another test subject'),
+      ],
+    };
+
+    const parser = new TagFieldParser(field, initFormValues, readOnly, authorityUuid);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(initFormValues.subject);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts b/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts
new file mode 100644
index 0000000000..3dbc9c0814
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts
@@ -0,0 +1,61 @@
+import { FormFieldModel } from '../models/form-field.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { TextareaFieldParser } from './textarea-field-parser';
+import { DsDynamicTextAreaModel } from '../ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
+
+describe('TextareaFieldParser test suite', () => {
+  let field: FormFieldModel;
+  let initFormValues: any = {};
+
+  const authorityUuid = 'testScopeUUID';
+  const readOnly = false;
+
+  beforeEach(() => {
+    field = {
+      input: {
+        type: 'textarea'
+      },
+      label: 'Description',
+      mandatory: 'false',
+      repeatable: false,
+      hints: 'Enter a description.',
+      selectableMetadata: [
+        {
+          metadata: 'description'
+        }
+      ],
+      languageCodes: []
+    } as FormFieldModel;
+
+  });
+
+  it('should init parser properly', () => {
+    const parser = new TextareaFieldParser(field, initFormValues, readOnly);
+
+    expect(parser instanceof TextareaFieldParser).toBe(true);
+  });
+
+  it('should return a DsDynamicTextAreaModel object when repeatable option is false', () => {
+    const parser = new TextareaFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel instanceof DsDynamicTextAreaModel).toBe(true);
+  });
+
+  it('should set init value properly', () => {
+    initFormValues = {
+      description: [
+        new FormFieldMetadataValueObject('test description'),
+      ],
+    };
+    const expectedValue ='test description';
+
+    const parser = new TextareaFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
+});
diff --git a/src/app/shared/form/builder/parsers/twobox-field-parser.ts b/src/app/shared/form/builder/parsers/twobox-field-parser.ts
deleted file mode 100644
index 1614ccf331..0000000000
--- a/src/app/shared/form/builder/parsers/twobox-field-parser.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FieldParser } from './field-parser';
-import { FormFieldModel } from '../models/form-field.model';
-
-// @TODO to be implemented
-export class TwoboxFieldParser extends FieldParser {
-
-  public modelFactory(): any {
-    return null;
-  }
-}
diff --git a/src/app/shared/form/form.reducer.spec.ts b/src/app/shared/form/form.reducer.spec.ts
index 64141a15b6..a76bfa5c03 100644
--- a/src/app/shared/form/form.reducer.spec.ts
+++ b/src/app/shared/form/form.reducer.spec.ts
@@ -1,9 +1,9 @@
-import { formReducer } from './form.reducers';
+import { FormEntry, formReducer } from './form.reducers';
 import {
   FormAddError,
-  FormChangeAction,
+  FormChangeAction, FormClearErrorsAction,
   FormInitAction,
-  FormRemoveAction,
+  FormRemoveAction, FormRemoveErrorAction,
   FormStatusChangeAction
 } from './form.actions';
 
@@ -13,10 +13,10 @@ describe('formReducer', () => {
     const state = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': null,
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: null,
+          date: null,
+          description: null
         },
         valid: false,
         errors: []
@@ -24,10 +24,10 @@ describe('formReducer', () => {
     };
     const formId = 'testForm';
     const formData = {
-      'dc.contributor.author': null,
-      'dc.title': null,
-      'dc.date.issued': null,
-      'dc.description': null
+      author: null,
+      title: null,
+      date: null,
+      description: null
     };
     const valid = false;
     const action = new FormInitAction(formId, formData, valid);
@@ -36,14 +36,54 @@ describe('formReducer', () => {
     expect(newState).toEqual(state);
   });
 
+  it('should update state of the form when it\'s already present', () => {
+    const initState = {
+      testForm: {
+        data: {
+          author: null,
+          title: null,
+          date: null,
+          description: null
+        },
+        valid: false,
+        errors: []
+      }
+    };
+    const formId = 'testForm';
+    const formData = {
+      author: null,
+      title: 'title',
+      date: null,
+      description: null
+    };
+    const state = {
+      testForm: {
+        data: {
+          author: null,
+          title: 'title',
+          date: null,
+          description: null
+        },
+        valid: false,
+        errors: []
+      }
+    };
+
+    const valid = false;
+    const action = new FormInitAction(formId, formData, valid);
+    const newState = formReducer(initState, action);
+
+    expect(newState).toEqual(state);
+  });
+
   it('should change form data on form change', () => {
     const initState = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': null,
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: null,
+          date: null,
+          description: null
         },
         valid: false,
         errors: []
@@ -52,10 +92,10 @@ describe('formReducer', () => {
     const state = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': ['test'],
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
         },
         valid: false,
         errors: []
@@ -63,10 +103,10 @@ describe('formReducer', () => {
     };
     const formId = 'testForm';
     const formData = {
-      'dc.contributor.author': null,
-      'dc.title': ['test'],
-      'dc.date.issued': null,
-      'dc.description': null
+      author: null,
+      title: ['test'],
+      date: null,
+      description: null
     };
 
     const action = new FormChangeAction(formId, formData);
@@ -79,10 +119,10 @@ describe('formReducer', () => {
     const initState = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': ['test'],
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
         },
         valid: false,
         errors: []
@@ -91,10 +131,10 @@ describe('formReducer', () => {
     const state = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': ['test'],
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
         },
         valid: true,
         errors: []
@@ -112,52 +152,79 @@ describe('formReducer', () => {
     const initState = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': ['test'],
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
         },
         valid: true,
         errors: []
       }
     };
 
-    const state = {
-      testForm: {
-        data: {
-          'dc.contributor.author': null,
-          'dc.title': ['test'],
-          'dc.date.issued': null,
-          'dc.description': null
-        },
-        valid: true,
-        errors: [
-          {
-            fieldId: 'dc.title',
-            message: 'Not valid'
-          }
-        ]
+    const expectedErrors = [
+      {
+        fieldId: 'title',
+        message: 'Not valid'
       }
-    };
+    ];
 
     const formId = 'testForm';
-    const fieldId = 'dc.title';
+    const fieldId = 'title';
     const message = 'Not valid';
 
     const action = new FormAddError(formId, fieldId, message);
     const newState = formReducer(initState, action);
 
-    expect(newState).toEqual(state);
+    expect(newState.testForm.errors).toEqual(expectedErrors);
+  });
+
+  it('should remove errors from field', () => {
+    const initState = {
+      testForm: {
+        data: {
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
+        },
+        valid: true,
+        errors: [
+          {
+            fieldId: 'author',
+            message: 'error.validation.required'
+          },
+          {
+            fieldId: 'title',
+            message: 'error.validation.required'
+          }
+        ]
+      }
+    };
+
+    const expectedErrors = [
+      {
+        fieldId: 'title',
+        message: 'error.validation.required'
+      }
+    ];
+
+    const formId = 'testForm';
+
+    const action = new FormRemoveErrorAction(formId, 'author');
+    const newState = formReducer(initState, action);
+
+    expect(newState.testForm.errors).toEqual(expectedErrors);
   });
 
   it('should remove form state', () => {
     const initState = {
       testForm: {
         data: {
-          'dc.contributor.author': null,
-          'dc.title': ['test'],
-          'dc.date.issued': null,
-          'dc.description': null
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
         },
         valid: true,
         errors: []
@@ -171,4 +238,31 @@ describe('formReducer', () => {
 
     expect(newState).toEqual({});
   });
+
+  it('should clear form errors', () => {
+    const initState = {
+      testForm: {
+        data: {
+          author: null,
+          title: ['test'],
+          date: null,
+          description: null
+        },
+        valid: true,
+        errors: [
+          {
+            fieldId: 'author',
+            message: 'error.validation.required'
+          }
+        ]
+      }
+    };
+
+    const formId = 'testForm';
+
+    const action = new FormClearErrorsAction(formId);
+    const newState = formReducer(initState, action);
+
+    expect(newState.testForm.errors).toEqual([]);
+  });
 });

From e6c68c9396d8acb13e4c2ead6a94f1dfee2efef4 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Fri, 22 Jun 2018 15:13:49 +0200
Subject: [PATCH 16/41] Added more tests

---
 .../integration/integration.service.spec.ts   | 94 +++++++++++++++++++
 src/app/shared/chips/chips.component.spec.ts  | 74 ++++++++++++++-
 src/app/shared/chips/chips.component.ts       |  8 +-
 .../models/ds-dynamic-concat.model.ts         |  7 +-
 .../builder/parsers/concat-field-parser.ts    |  6 +-
 .../builder/parsers/date-field-parser.spec.ts | 15 ++-
 .../form/builder/parsers/date-field-parser.ts | 14 +--
 .../form/builder/parsers/field-parser.ts      |  4 +-
 .../builder/parsers/name-field-parser.spec.ts | 20 +++-
 .../parsers/series-field-parser.spec.ts       | 16 +++-
 src/app/shared/form/form.service.spec.ts      |  3 +-
 src/app/shared/object.util.spec.ts            | 87 +++++++++++++++++
 src/app/shared/object.util.ts                 | 22 +++--
 13 files changed, 325 insertions(+), 45 deletions(-)
 create mode 100644 src/app/core/integration/integration.service.spec.ts
 create mode 100644 src/app/shared/object.util.spec.ts

diff --git a/src/app/core/integration/integration.service.spec.ts b/src/app/core/integration/integration.service.spec.ts
new file mode 100644
index 0000000000..fda3008bec
--- /dev/null
+++ b/src/app/core/integration/integration.service.spec.ts
@@ -0,0 +1,94 @@
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { TestScheduler } from 'rxjs/Rx';
+import { getMockRequestService } from '../../shared/mocks/mock-request.service';
+import { ResponseCacheService } from '../cache/response-cache.service';
+
+import { RequestService } from '../data/request.service';
+import { IntegrationRequest } from '../data/request.models';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service-stub';
+import { IntegrationService } from './integration.service';
+import { IntegrationSearchOptions } from './models/integration-options.model';
+
+const LINK_NAME = 'authorities';
+const BROWSE = 'entries';
+
+class TestService extends IntegrationService {
+  protected linkPath = LINK_NAME;
+  protected browseEndpoint = BROWSE;
+
+  constructor(
+    protected responseCache: ResponseCacheService,
+    protected requestService: RequestService,
+    protected halService: HALEndpointService) {
+    super();
+  }
+}
+
+describe('IntegrationService', () => {
+  let scheduler: TestScheduler;
+  let service: TestService;
+  let responseCache: ResponseCacheService;
+  let requestService: RequestService;
+  let halService: any;
+  let findOptions: IntegrationSearchOptions;
+
+  const name = 'type';
+  const metadata = 'dc.type';
+  const query = '';
+  const uuid = 'd9d30c0c-69b7-4369-8397-ca67c888974d';
+  const integrationEndpoint = 'https://rest.api/integration';
+  const serviceEndpoint = `${integrationEndpoint}/${LINK_NAME}`;
+  const entriesEndpoint = `${serviceEndpoint}/${name}/entries?query=${query}&metadata=${metadata}&uuid=${uuid}`;
+
+  findOptions = new IntegrationSearchOptions(uuid, name, metadata);
+
+  function initMockResponseCacheService(isSuccessful: boolean): ResponseCacheService {
+    return jasmine.createSpyObj('responseCache', {
+      get: cold('c-', {
+        c: {response: {isSuccessful}}
+      })
+    });
+  }
+
+  function initTestService(): TestService {
+    return new TestService(
+      responseCache,
+      requestService,
+      halService
+    );
+  }
+
+  beforeEach(() => {
+    responseCache = initMockResponseCacheService(true);
+    requestService = getMockRequestService();
+    scheduler = getTestScheduler();
+    halService = new HALEndpointServiceStub(integrationEndpoint);
+    findOptions = new IntegrationSearchOptions(uuid, name, metadata, query);
+    service = initTestService();
+
+  });
+
+  describe('getEntriesByName', () => {
+
+    it('should configure a new IntegrationRequest', () => {
+      const expected = new IntegrationRequest(requestService.generateRequestId(), entriesEndpoint);
+      scheduler.schedule(() => service.getEntriesByName(findOptions).subscribe());
+      scheduler.flush();
+
+      expect(requestService.configure).toHaveBeenCalledWith(expected);
+    });
+  });
+
+  // describe('getConfigBySearch', () => {
+  //
+  //   it('should configure a new ConfigRequest', () => {
+  //     findOptions.uuid = uuid;
+  //     const expected = new ConfigRequest(requestService.generateRequestId(), searchEndpoint);
+  //     scheduler.schedule(() => service.getConfigBySearch(findOptions).subscribe());
+  //     scheduler.flush();
+  //
+  //     expect(requestService.configure).toHaveBeenCalledWith(expected);
+  //   });
+  // });
+});
diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts
index add22b5d42..20cd22488f 100644
--- a/src/app/shared/chips/chips.component.spec.ts
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -1,6 +1,6 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick, } from '@angular/core/testing';
 import 'rxjs/add/observable/of';
 
 import { Chips } from './models/chips.model';
@@ -8,6 +8,9 @@ import { UploaderService } from '../uploader/uploader.service';
 import { ChipsComponent } from './chips.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SortablejsModule } from 'angular-sortablejs';
+import { By } from '@angular/platform-browser';
+import { PaginationComponent } from '../pagination/pagination.component';
+import { TruncatableComponent } from '../truncatable/truncatable.component';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -22,8 +25,11 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
 describe('Chips component', () => {
 
   let testComp: TestComponent;
+  let chipsComp: ChipsComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let chipsFixture: ComponentFixture<ChipsComponent>;
   let html;
+  let chips: Chips;
 
   // async beforeEach
   beforeEach(async(() => {
@@ -53,7 +59,7 @@ describe('Chips component', () => {
       <ds-chips
         *ngIf="chips.hasItems()"
         [chips]="chips"
-        [editable]="true"
+        [editable]="editable"
         (selected)="onChipSelected($event)"></ds-chips>`;
 
     testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
@@ -61,10 +67,68 @@ describe('Chips component', () => {
   });
 
   it('should create Chips Component', inject([ChipsComponent], (app: ChipsComponent) => {
-
     expect(app).toBeDefined();
   }));
 
+  beforeEach(() => {
+    chips = new Chips(['a', 'b', 'c']);
+    chipsFixture = TestBed.createComponent(ChipsComponent);
+    chipsComp = chipsFixture.componentInstance; // TruncatableComponent test instance
+    chipsComp.editable = true;
+    chipsComp.chips = chips;
+    chipsFixture.detectChanges();
+  });
+
+  afterEach(() => {
+    chipsFixture.destroy();
+    chipsComp = null;
+  });
+
+  it('should set edit mode when a chip item is selected', fakeAsync(() => {
+
+    spyOn(chipsComp.selected, 'emit');
+
+    chipsComp.chipsSelected(new Event('click'), 1);
+    chipsFixture.detectChanges();
+    tick();
+
+    const item = chipsComp.chips.getChipByIndex(1);
+
+    expect(item.editMode).toBe(true);
+    expect(chipsComp.selected.emit).toHaveBeenCalledWith(1);
+  }));
+
+  it('should not set edit mode when a chip item is selected and editable is false', fakeAsync(() => {
+    chipsComp.editable = false;
+    spyOn(chipsComp.selected, 'emit');
+
+    chipsComp.chipsSelected(new Event('click'), 1);
+    chipsFixture.detectChanges();
+    tick();
+
+    const item = chipsComp.chips.getChipByIndex(1);
+
+    expect(item.editMode).toBe(false);
+    expect(chipsComp.selected.emit).not.toHaveBeenCalledWith(1);
+  }));
+
+  it('should emit when a chip item is removed and editable is true', fakeAsync(() => {
+
+    spyOn(chipsComp.chips, 'remove');
+
+    const item = chipsComp.chips.getChipByIndex(1);
+
+    chipsComp.removeChips(new Event('click'), 1);
+    chipsFixture.detectChanges();
+    tick();
+
+    expect(chipsComp.chips.remove).toHaveBeenCalledWith(item);
+  }));
+
+  // it('should chipsSelected', inject([ChipsComponent], (app: ChipsComponent) => {
+  //   app.chipsSelected(new Event('click'), 1);
+  //   expect(app).toBeDefined();
+  // }));
 });
 
 // declare a test component
@@ -74,6 +138,6 @@ describe('Chips component', () => {
 })
 class TestComponent {
 
-  public chips = new Chips([]);
-
+  public chips = new Chips(['a', 'b', 'c']);
+  public editable = true;
 }
diff --git a/src/app/shared/chips/chips.component.ts b/src/app/shared/chips/chips.component.ts
index eea0993c98..e8167ec5a1 100644
--- a/src/app/shared/chips/chips.component.ts
+++ b/src/app/shared/chips/chips.component.ts
@@ -16,7 +16,7 @@ import { UploaderService } from '../uploader/uploader.service';
 export class ChipsComponent implements OnChanges {
   @Input() chips: Chips;
   @Input() wrapperClass: string;
-  @Input() editable: boolean;
+  @Input() editable = true;
 
   @Output() selected: EventEmitter<number> = new EventEmitter<number>();
   @Output() remove: EventEmitter<number> = new EventEmitter<number>();
@@ -36,12 +36,6 @@ export class ChipsComponent implements OnChanges {
     };
   }
 
-  ngOnInit() {
-    if (!this.editable) {
-      this.editable = false;
-    }
-  }
-
   ngOnChanges(changes: SimpleChanges) {
     if (changes.chips && !changes.chips.isFirstChange()) {
       this.chips = changes.chips.currentValue;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
index aee2e65f3a..47d410f2ed 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
@@ -2,6 +2,7 @@ import { DynamicFormControlLayout, DynamicFormGroupModel, DynamicFormGroupModelC
 import { isNotEmpty } from '../../../../empty.util';
 import { DsDynamicInputModel } from './ds-dynamic-input.model';
 import { AuthorityValueModel } from '../../../../../core/integration/models/authority-value.model';
+import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
 
 export const CONCAT_GROUP_SUFFIX = '_CONCAT_GROUP';
 export const CONCAT_FIRST_INPUT_SUFFIX = '_CONCAT_FIRST_INPUT';
@@ -27,13 +28,13 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     const firstValue = (this.get(0) as DsDynamicInputModel).value;
     const secondValue = (this.get(1) as DsDynamicInputModel).value;
     if (isNotEmpty(firstValue) && isNotEmpty(secondValue)) {
-      return firstValue + this.separator + secondValue;
+      return new FormFieldMetadataValueObject(firstValue + this.separator + secondValue);
     } else {
-      return null
+      return null;
     }
   }
 
-  set value(value: string | AuthorityValueModel) {
+  set value(value: string | FormFieldMetadataValueObject) {
     let values;
     if (typeof value === 'string') {
       values =  value ? value.split(this.separator) : [null, null];
diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index bd636e94de..68d34f7bbe 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -71,11 +71,11 @@ export class ConcatFieldParser extends FieldParser {
 
     // Init values
     if (isNotEmpty(fieldValue)) {
-      const  values = fieldValue.split(this.separator);
+      const  values = fieldValue.value.split(this.separator);
 
       if (values.length > 1) {
-        input1ModelConfig.value = values[0];
-        input2ModelConfig.value = values[1];
+        input1ModelConfig.value = values[0].trim();
+        input2ModelConfig.value = values[1].trim();
       }
     }
 
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
index 430e6df3cb..a103b53b35 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
@@ -3,11 +3,12 @@ import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-conc
 import { SeriesFieldParser } from './series-field-parser';
 import { DateFieldParser } from './date-field-parser';
 import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 describe('DateFieldParser test suite', () => {
   let field: FormFieldModel;
+  let initFormValues: any = {};
 
-  const initFormValues = {};
   const readOnly = false;
 
   beforeEach(() => {
@@ -44,4 +45,16 @@ describe('DateFieldParser test suite', () => {
     expect(fieldModel instanceof DynamicDsDatePickerModel).toBe(true);
   });
 
+  it('should set init value properly', () => {
+    initFormValues = {
+      date: [new FormFieldMetadataValueObject('1983-11-18')],
+    };
+    const expectedValue = '1983-11-18';
+
+    const parser = new DateFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
 });
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
index 2c997211f1..842036db6c 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -8,13 +8,13 @@ import { FormFieldMetadataValueObject } from '../models/form-field-metadata-valu
 export class DateFieldParser extends FieldParser {
 
   public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+    let malformedDate = false;
     const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel();
 
     inputDateModelConfig.toggleIcon = 'fa fa-calendar';
     this.setValues(inputDateModelConfig as any, fieldValue);
     // Init Data and validity check
     if (isNotEmpty(inputDateModelConfig.value)) {
-      let malformedData = false;
       const value = inputDateModelConfig.value.toString();
       if (value.length >= 4) {
         const valuesArray = value.split(DS_DATE_PICKER_SEPARATOR);
@@ -22,23 +22,15 @@ export class DateFieldParser extends FieldParser {
           for (let i = 0; i < valuesArray.length; i++) {
             const len = i === 0 ? 4 : 2;
             if (valuesArray[i].length !== len) {
-              malformedData = true;
+              malformedDate = true;
             }
           }
         }
-
-        if (malformedData) {
-          // TODO Set error message
-          // const errorMessage = 'The stored date is not compliant';
-          // dateModel.validators = Object.assign({}, dateModel.validators, {malformedDate: null});
-          // dateModel.errorMessages = Object.assign({}, dateModel.errorMessages, {malformedDate: errorMessage});
-
-          // this.formService.addErrorToField(this.group.get(this.model.id), this.model, errorMessage)
-        }
       }
 
     }
     const dateModel = new DynamicDsDatePickerModel(inputDateModelConfig);
+    dateModel.malformedDate = malformedDate;
     return dateModel;
   }
 }
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 9845f1772d..409726ebe9 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -185,7 +185,7 @@ export abstract class FieldParser {
     controlModel.placeholder = this.configData.label;
 
     if (this.configData.mandatory && setErrors) {
-      this.setErrors(controlModel);
+      this.markAsRequired(controlModel);
     }
 
     // Available Languages
@@ -196,7 +196,7 @@ export abstract class FieldParser {
     return controlModel;
   }
 
-  protected setErrors(controlModel) {
+  protected markAsRequired(controlModel) {
     controlModel.required = true;
     controlModel.validators = Object.assign({}, controlModel.validators, {required: null});
     controlModel.errorMessages = Object.assign(
diff --git a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
index e565ea881d..a72dacd909 100644
--- a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
@@ -1,18 +1,21 @@
 import { FormFieldModel } from '../models/form-field.model';
 import { NameFieldParser } from './name-field-parser';
 import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 describe('NameFieldParser test suite', () => {
   let field1: FormFieldModel;
   let field2: FormFieldModel;
   let field3: FormFieldModel;
+  let initFormValues: any = {};
 
-  const initFormValues = {};
   const readOnly = false;
 
   beforeEach(() => {
     field1 = {
-      input: {type: 'name'},
+      input: {
+        type: 'name'
+      },
       label: 'Name',
       mandatory: 'false',
       repeatable: false,
@@ -82,4 +85,17 @@ describe('NameFieldParser test suite', () => {
     expect((fieldModel as DynamicConcatModel).separator).toBe(', ');
   });
 
+  it('should set init value properly', () => {
+    initFormValues = {
+      name: [new FormFieldMetadataValueObject('test, name')],
+    };
+    const expectedValue = new FormFieldMetadataValueObject('test, name');
+
+    const parser = new NameFieldParser(field1, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
 });
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
index 21889a1b53..af228ea488 100644
--- a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
@@ -1,11 +1,12 @@
 import { FormFieldModel } from '../models/form-field.model';
 import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { SeriesFieldParser } from './series-field-parser';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 describe('SeriesFieldParser test suite', () => {
   let field: FormFieldModel;
+  let initFormValues: any = {};
 
-  const initFormValues = {};
   const readOnly = false;
 
   beforeEach(() => {
@@ -47,4 +48,17 @@ describe('SeriesFieldParser test suite', () => {
     expect((fieldModel as DynamicConcatModel).separator).toBe('; ');
   });
 
+  it('should set init value properly', () => {
+    initFormValues = {
+      series: [new FormFieldMetadataValueObject('test; series')],
+    };
+    const expectedValue = new FormFieldMetadataValueObject('test; series');
+
+    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+
+    const fieldModel = parser.parse();
+
+    expect(fieldModel.value).toEqual(expectedValue);
+  });
+
 });
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
index a3f8e09e84..dcea3b6cf2 100644
--- a/src/app/shared/form/form.service.spec.ts
+++ b/src/app/shared/form/form.service.spec.ts
@@ -157,9 +157,8 @@ describe('FormService test suite', () => {
     model = builderService.findById('title', formModel);
 
     service.addErrorToField(control, model, 'error.required');
-    errorKeys = Object.keys(control.errors);
 
-    service.removeErrorFromField(control, model, errorKeys[0]);
+    service.removeErrorFromField(control, model, 'error.required');
 
     expect(errorKeys.length).toBe(1);
 
diff --git a/src/app/shared/object.util.spec.ts b/src/app/shared/object.util.spec.ts
new file mode 100644
index 0000000000..9f0e687dc1
--- /dev/null
+++ b/src/app/shared/object.util.spec.ts
@@ -0,0 +1,87 @@
+import { deleteProperty, difference, isObjectEmpty } from './object.util';
+
+describe('Object Utils', () => {
+  let object: any = {};
+  let anotherObject: any = {};
+  let objectExpected: any = {};
+
+  describe('deleteProperty', () => {
+    it('should return object without property \'a\'', () => {
+      object = {a: 'a', b: 'b'};
+      objectExpected = {b: 'b'};
+      expect(deleteProperty(object, 'a')).toEqual(objectExpected);
+    });
+
+    it('should return same object', () => {
+      object = {a: 'a', b: 'b'};
+      expect(deleteProperty(object, 'c')).toEqual(object);
+    });
+
+  });
+
+  describe('isObjectEmpty', () => {
+
+    it('should return true when object is empty', () => {
+      object = {};
+      expect(isObjectEmpty(object)).toBe(true);
+    });
+
+    it('should return true when object has a null property', () => {
+      object = {a: null};
+      expect(isObjectEmpty(object)).toBe(true);
+    });
+
+    it('should return true when object property has an empty array as value', () => {
+      object = {a: []};
+      expect(isObjectEmpty(object)).toBe(true);
+    });
+
+    it('should return true when object property has an empty object as value', () => {
+      object = {a: {}};
+      expect(isObjectEmpty(object)).toBe(true);
+    });
+
+    it('should return false when object is not empty', () => {
+      object = {a: 'a', b: 'b'};
+      expect(isObjectEmpty(object)).toBe(false);
+    });
+
+    it('should return false when object has at least a valued property', () => {
+      object = {a: [], b: 'b'};
+      expect(isObjectEmpty(object)).toBe(false);
+    });
+
+  });
+
+  describe('difference', () => {
+
+    it('should return an empty object', () => {
+      object = {};
+      anotherObject = {};
+      objectExpected = {};
+      expect(difference(object, anotherObject)).toEqual(objectExpected);
+    });
+
+    it('should return object properties that are not included in the base object', () => {
+      object = {a: 'a', b: 'b'};
+      anotherObject = {a: 'a'};
+      objectExpected = {b: 'b'};
+      expect(difference(object, anotherObject)).toEqual(objectExpected);
+    });
+
+    it('should not return object properties that are included only in the base object', () => {
+      object = {a: 'a'};
+      anotherObject = {a: 'a', b: 'b'};
+      objectExpected = {};
+      expect(difference(object, anotherObject)).toEqual(objectExpected);
+    });
+
+    it('should not return empty object properties that are not included in the base object', () => {
+      object = {a: 'a', b: {}};
+      anotherObject = {a: 'a'};
+      objectExpected = {};
+      expect(difference(object, anotherObject)).toEqual(objectExpected);
+    });
+
+  });
+});
diff --git a/src/app/shared/object.util.ts b/src/app/shared/object.util.ts
index 50680d6d32..1dccd2070a 100644
--- a/src/app/shared/object.util.ts
+++ b/src/app/shared/object.util.ts
@@ -10,14 +10,13 @@ export function deleteProperty(object, key): object {
 }
 
 /**
- * Returns true if the passed value is null or undefined.
- * hasNoValue();              // true
- * hasNoValue(null);          // true
- * hasNoValue(undefined);     // true
- * hasNoValue('');            // false
- * hasNoValue({});            // false
- * hasNoValue([]);            // false
- * hasNoValue(function() {}); // false
+ * Returns true if the passed object is empty or has only empty property.
+ * isObjectEmpty({});               // true
+ * isObjectEmpty({a: null});        // true
+ * isObjectEmpty({a: []});          // true
+ * isObjectEmpty({a: [], b: {});    // true
+ * isObjectEmpty({a: 'a', b: 'b'}); // false
+ * isObjectEmpty({a: [], b: 'b'});  // false
  */
 export function isObjectEmpty(obj: any): boolean {
   const objectType = typeof obj;
@@ -37,6 +36,13 @@ export function isObjectEmpty(obj: any): boolean {
   }
 }
 
+/**
+ * Returns diff from the base object.
+ * difference({}, {});                      // {}
+ * difference({a: 'a', b: 'b'}, {a: 'a'});  // {b: 'b'}
+ * difference({a: 'a', b: {}}, {a: 'a'});   // {}
+ * difference({a: 'a'}, {a: 'a', b: 'b'});  // {}
+ */
 export function difference(object, base) {
   const changes = (o, b) => {
     return transform(o, (result, value, key) => {

From 5d377287ad4c6e0738aaa7b1218041967752e751 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 25 Jun 2018 19:17:33 +0200
Subject: [PATCH 17/41] Added more tests

---
 ...tegration-response-parsing.service.spec.ts | 196 ++++++++++++++++++
 .../integration/integration.service.spec.ts   |  11 -
 src/app/shared/chips/chips.component.spec.ts  |  33 ++-
 .../date-picker/date-picker.component.ts      |  15 +-
 src/app/shared/form/form.reducers.ts          |  11 +-
 src/app/shared/form/form.service.spec.ts      |  45 +++-
 .../number-picker.component.html              |   4 +-
 .../number-picker.component.spec.ts           | 173 ++++++++++++++++
 .../number-picker/number-picker.component.ts  |  31 +--
 .../pagination/pagination.component.spec.ts   |   2 +-
 10 files changed, 471 insertions(+), 50 deletions(-)
 create mode 100644 src/app/core/integration/integration-response-parsing.service.spec.ts
 create mode 100644 src/app/shared/number-picker/number-picker.component.spec.ts

diff --git a/src/app/core/integration/integration-response-parsing.service.spec.ts b/src/app/core/integration/integration-response-parsing.service.spec.ts
new file mode 100644
index 0000000000..e2e2f92d5a
--- /dev/null
+++ b/src/app/core/integration/integration-response-parsing.service.spec.ts
@@ -0,0 +1,196 @@
+import { ErrorResponse, IntegrationSuccessResponse } from '../cache/response-cache.models';
+
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { GlobalConfig } from '../../../config/global-config.interface';
+
+import { Store } from '@ngrx/store';
+import { CoreState } from '../core.reducers';
+import { IntegrationResponseParsingService } from './integration-response-parsing.service';
+import { IntegrationRequest } from '../data/request.models';
+import { AuthorityValueModel } from './models/authority-value.model';
+
+describe('IntegrationResponseParsingService', () => {
+  let service: IntegrationResponseParsingService;
+
+  const EnvConfig = {} as GlobalConfig;
+  const store = {} as Store<CoreState>;
+  const objectCacheService = new ObjectCacheService(store);
+  const name = 'type';
+  const metadata = 'dc.type';
+  const query = '';
+  const uuid = 'd9d30c0c-69b7-4369-8397-ca67c888974d';
+  const integrationEndpoint = 'https://rest.api/integration/authorities';
+  const entriesEndpoint = `${integrationEndpoint}/${name}/entries?query=${query}&metadata=${metadata}&uuid=${uuid}`;
+
+  beforeEach(() => {
+    service = new IntegrationResponseParsingService(EnvConfig, objectCacheService);
+  });
+
+  describe('parse', () => {
+    const validRequest = new IntegrationRequest('69f375b5-19f4-4453-8c7a-7dc5c55aafbb', entriesEndpoint);
+
+    const validResponse = {
+      payload: {
+        page: {
+          number: 0,
+          size: 5,
+          totalElements: 5,
+          totalPages: 1
+        },
+        _embedded: {
+          authorityEntries: [
+            {
+              display: 'One',
+              id: 'One',
+              otherInformation: {},
+              type: 'authority',
+              value: 'One'
+            },
+            {
+              display: 'Two',
+              id: 'Two',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Two'
+            },
+            {
+              display: 'Three',
+              id: 'Three',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Three'
+            },
+            {
+              display: 'Four',
+              id: 'Four',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Four'
+            },
+            {
+              display: 'Five',
+              id: 'Five',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Five'
+            },
+          ],
+
+        },
+        _links: {
+          self: 'https://rest.api/integration/authorities/type/entries'
+        }
+      },
+      statusCode: '200'
+    };
+
+    const invalidResponse1 = {
+      payload: {},
+      statusCode: '200'
+    };
+
+    const invalidResponse2 = {
+      payload: {
+        page: {
+          number: 0,
+          size: 5,
+          totalElements: 5,
+          totalPages: 1
+        },
+        _embedded: {
+          authorityEntries: [
+            {
+              display: 'One',
+              id: 'One',
+              otherInformation: {},
+              type: 'authority',
+              value: 'One'
+            },
+            {
+              display: 'Two',
+              id: 'Two',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Two'
+            },
+            {
+              display: 'Three',
+              id: 'Three',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Three'
+            },
+            {
+              display: 'Four',
+              id: 'Four',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Four'
+            },
+            {
+              display: 'Five',
+              id: 'Five',
+              otherInformation: {},
+              type: 'authority',
+              value: 'Five'
+            },
+          ],
+
+        },
+        _links: {}
+      },
+      statusCode: '200'
+    };
+
+    const definitions = [
+      Object.assign(new AuthorityValueModel(), {
+        display: 'One',
+        id: 'One',
+        otherInformation: {},
+        value: 'One'
+      }),
+      Object.assign(new AuthorityValueModel(), {
+        display: 'Two',
+        id: 'Two',
+        otherInformation: {},
+        value: 'Two'
+      }),
+      Object.assign(new AuthorityValueModel(), {
+        display: 'Three',
+        id: 'Three',
+        otherInformation: {},
+        value: 'Three'
+      }),
+      Object.assign(new AuthorityValueModel(), {
+        display: 'Four',
+        id: 'Four',
+        otherInformation: {},
+        value: 'Four'
+      }),
+      Object.assign(new AuthorityValueModel(), {
+        display: 'Five',
+        id: 'Five',
+        otherInformation: {},
+        value: 'Five'
+      })
+    ];
+
+    it('should return a IntegrationSuccessResponse if data contains a valid endpoint response', () => {
+      const response = service.parse(validRequest, validResponse);
+      expect(response.constructor).toBe(IntegrationSuccessResponse);
+    });
+
+    it('should return an ErrorResponse if data contains an invalid config endpoint response', () => {
+      const response1 = service.parse(validRequest, invalidResponse1);
+      const response2 = service.parse(validRequest, invalidResponse2);
+      expect(response1.constructor).toBe(ErrorResponse);
+      expect(response2.constructor).toBe(ErrorResponse);
+    });
+
+    it('should return a IntegrationSuccessResponse with data definition', () => {
+      const response = service.parse(validRequest, validResponse);
+      expect((response as any).dataDefinition).toEqual(definitions);
+    });
+
+  });
+});
diff --git a/src/app/core/integration/integration.service.spec.ts b/src/app/core/integration/integration.service.spec.ts
index fda3008bec..b7f4e019f7 100644
--- a/src/app/core/integration/integration.service.spec.ts
+++ b/src/app/core/integration/integration.service.spec.ts
@@ -80,15 +80,4 @@ describe('IntegrationService', () => {
     });
   });
 
-  // describe('getConfigBySearch', () => {
-  //
-  //   it('should configure a new ConfigRequest', () => {
-  //     findOptions.uuid = uuid;
-  //     const expected = new ConfigRequest(requestService.generateRequestId(), searchEndpoint);
-  //     scheduler.schedule(() => service.getConfigBySearch(findOptions).subscribe());
-  //     scheduler.flush();
-  //
-  //     expect(requestService.configure).toHaveBeenCalledWith(expected);
-  //   });
-  // });
 });
diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts
index 20cd22488f..b060b93012 100644
--- a/src/app/shared/chips/chips.component.spec.ts
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -6,7 +6,7 @@ import 'rxjs/add/observable/of';
 import { Chips } from './models/chips.model';
 import { UploaderService } from '../uploader/uploader.service';
 import { ChipsComponent } from './chips.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { SortablejsModule } from 'angular-sortablejs';
 import { By } from '@angular/platform-browser';
 import { PaginationComponent } from '../pagination/pagination.component';
@@ -22,7 +22,7 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Chips component', () => {
+describe('ChipsComponent test suite', () => {
 
   let testComp: TestComponent;
   let chipsComp: ChipsComponent;
@@ -125,10 +125,31 @@ describe('Chips component', () => {
     expect(chipsComp.chips.remove).toHaveBeenCalledWith(item);
   }));
 
-  // it('should chipsSelected', inject([ChipsComponent], (app: ChipsComponent) => {
-  //   app.chipsSelected(new Event('click'), 1);
-  //   expect(app).toBeDefined();
-  // }));
+  it('should save chips item index when drag and drop start', fakeAsync(() => {
+    const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+
+    de.triggerEventHandler('dragstart', null);
+
+    expect(chipsComp.dragged).toBe(0)
+  }));
+
+  it('should update chips item order when drag and drop end', fakeAsync(() => {
+    spyOn(chipsComp.chips, 'updateOrder');
+    const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+
+    de.triggerEventHandler('dragend', null);
+
+    expect(chipsComp.dragged).toBe(-1)
+    expect(chipsComp.chips.updateOrder).toHaveBeenCalled();
+  }));
+
+  it('should show item tooltip on mouse over', fakeAsync(() => {
+    const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+
+    de.triggerEventHandler('mouseover', null);
+
+    expect(chipsComp.tipText).toBe('a')
+  }));
 });
 
 // declare a test component
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index bf3a5ed98e..17a4e9e750 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { DynamicDsDatePickerModel } from './date-picker.model';
-import { hasValue, isNotEmpty } from '../../../../../empty.util';
+import { hasNoValue, hasValue, isNotEmpty } from '../../../../../empty.util';
 
 export const DS_DATE_PICKER_SEPARATOR = '-';
 
@@ -91,6 +91,8 @@ export class DsDatePickerComponent implements OnInit {
           this.year = undefined;
           this.month = undefined;
           this.day = undefined;
+          this.disabledMonth = true;
+          this.disabledDay = true;
         }
         break;
       }
@@ -100,6 +102,7 @@ export class DsDatePickerComponent implements OnInit {
         } else {
           this.month = undefined;
           this.day = undefined;
+          this.disabledDay = true;
         }
         break;
       }
@@ -124,28 +127,28 @@ export class DsDatePickerComponent implements OnInit {
     }
 
     // Manage disable
-    if (!this.model.value && event.field === 'year') {
+    if (hasValue(this.year) && event.field === 'year') {
       this.disabledMonth = false;
-    } else if (this.disabledDay && event.field === 'month') {
+    } else if (hasValue(this.month) && event.field === 'month') {
       this.disabledDay = false;
     }
 
     // update value
     let value = null;
-    if (this.year) {
+    if (hasValue(this.year)) {
       let yyyy = this.year.toString();
       while (yyyy.length < 4) {
         yyyy = '0' + yyyy;
       }
       value = yyyy;
     }
-    if (this.month) {
+    if (hasValue(this.month)) {
       const mm = this.month.toString().length === 1
         ? '0' + this.month.toString()
         : this.month.toString();
       value += DS_DATE_PICKER_SEPARATOR + mm;
     }
-    if (this.day) {
+    if (hasValue(this.day)) {
       const dd = this.day.toString().length === 1
         ? '0' + this.day.toString()
         : this.day.toString();
diff --git a/src/app/shared/form/form.reducers.ts b/src/app/shared/form/form.reducers.ts
index c65f2405ec..69f84978f7 100644
--- a/src/app/shared/form/form.reducers.ts
+++ b/src/app/shared/form/form.reducers.ts
@@ -148,14 +148,7 @@ function initForm(state: FormState, action: FormInitAction): FormState {
  *    the new state, with the data changed.
  */
 function changeDataForm(state: FormState, action: FormChangeAction): FormState {
-  if (!hasValue(state[action.payload.formId])) {
-    return Object.assign({}, state, {
-      [action.payload.formId]: {
-        data: action.payload.formData,
-        valid: state[action.payload.formId].valid
-      }
-    });
-  } else {
+  if (hasValue(state[action.payload.formId])) {
     const newState = Object.assign({}, state);
     newState[action.payload.formId] = Object.assign({}, newState[action.payload.formId], {
         data: action.payload.formData,
@@ -163,6 +156,8 @@ function changeDataForm(state: FormState, action: FormChangeAction): FormState {
       }
     );
     return newState;
+  } else {
+    return state;
   }
 }
 
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
index dcea3b6cf2..4c7e84b4f2 100644
--- a/src/app/shared/form/form.service.spec.ts
+++ b/src/app/shared/form/form.service.spec.ts
@@ -3,7 +3,7 @@ import { async, inject, TestBed } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
 
 import {
-  DynamicFormControlModel,
+  DynamicFormControlModel, DynamicFormGroupModel,
   DynamicFormService,
   DynamicFormValidationService,
   DynamicInputModel
@@ -33,18 +33,47 @@ describe('FormService test suite', () => {
     }),
     new DynamicInputModel({id: 'date'}),
     new DynamicInputModel({id: 'description'}),
+    new DynamicFormGroupModel({
+
+      id: 'addressLocation',
+      group: [
+        new DynamicInputModel({
+
+          id: 'zipCode',
+          label: 'Zip Code',
+          placeholder: 'ZIP'
+        }),
+        new DynamicInputModel({
+
+          id: 'state',
+          label: 'State',
+          placeholder: 'State'
+        }),
+        new DynamicInputModel({
+
+          id: 'city',
+          label: 'City',
+          placeholder: 'City'
+        })
+      ]
+    }),
   ];
 
   const formData = {
     author: ['test'],
     title: null,
     date: null,
-    description: null
+    description: null,
+    addressLocation: {
+      zipCode: null,
+      state: null,
+      city: null
+    }
   };
   const formState = {
     testForm: {
       data: formData,
-      valid: true,
+      valid: false,
       errors: []
     }
   };
@@ -80,7 +109,7 @@ describe('FormService test suite', () => {
 
   it('should return form status when isValid is called', () => {
     service.isValid(formId).subscribe((status) => {
-      expect(status).toBe(true);
+      expect(status).toBe(false);
     });
   });
 
@@ -166,4 +195,12 @@ describe('FormService test suite', () => {
 
     expect(formGroup.controls.description.touched).toBe(false);
   });
+
+  it('should reset form group', () => {
+    const control = builderService.getFormControlById('author', formGroup, formModel);
+
+    service.resetForm(formGroup, formModel, formId);
+
+    expect(control.value).toBeNull();
+  });
 });
diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html
index 55e0c39078..e1e559c535 100644
--- a/src/app/shared/number-picker/number-picker.component.html
+++ b/src/app/shared/number-picker/number-picker.component.html
@@ -4,7 +4,7 @@
       type="button"
       tabindex="-1"
       [disabled]="disabled"
-      (click)="increment()">
+      (click)="toggleUp()">
       <span class="chevron"></span>
       <span class="sr-only">Increment</span>
     </button>
@@ -28,7 +28,7 @@
       type="button"
       tabindex="-1"
       [disabled]="disabled"
-      (click)="decrement()">
+      (click)="toggleDown()">
       <span class="chevron bottom"></span>
       <span class="sr-only">Decrement</span>
     </button>
diff --git a/src/app/shared/number-picker/number-picker.component.spec.ts b/src/app/shared/number-picker/number-picker.component.spec.ts
new file mode 100644
index 0000000000..b7f696a42e
--- /dev/null
+++ b/src/app/shared/number-picker/number-picker.component.spec.ts
@@ -0,0 +1,173 @@
+// Load the implementations that should be tested
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import 'rxjs/add/observable/of';
+
+import { UploaderService } from '../uploader/uploader.service';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { By } from '@angular/platform-browser';
+import { NumberPickerComponent } from './number-picker.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}
+
+describe('NumberPickerComponent test suite', () => {
+
+  let testComp: TestComponent;
+  let numberPickerComp: NumberPickerComponent;
+  let testFixture: ComponentFixture<TestComponent>;
+  let numberPickerFixture: ComponentFixture<NumberPickerComponent>;
+  let html;
+
+  // async beforeEach
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule.forRoot()
+      ],
+      declarations: [
+        NumberPickerComponent,
+        TestComponent,
+      ], // declare the test component
+      providers: [
+        ChangeDetectorRef,
+        NumberPickerComponent,
+        UploaderService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    html = `
+      <ds-number-picker
+        tabindex="1"
+        [disabled]="disabled"
+        [min]="min"
+        [max]="max"
+        [name]="'test'"
+        [size]="size"
+        [(ngModel)]="initValue"
+        [value]="value"
+        [invalid]="showErrorMessages"
+        [placeholder]="'test'"
+        (blur)="onBlur($event)"
+        (change)="onChange($event)"
+        (focus)="onFocus($event)"></ds-number-picker>`;
+
+    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+    testComp = testFixture.componentInstance;
+  });
+
+  it('should create NumberPickerComponent', inject([NumberPickerComponent], (app: NumberPickerComponent) => {
+    expect(app).toBeDefined();
+  }));
+
+  beforeEach(() => {
+    numberPickerFixture = TestBed.createComponent(NumberPickerComponent);
+    numberPickerComp = numberPickerFixture.componentInstance; // NumberPickerComponent test instance
+    numberPickerFixture.detectChanges();
+  });
+
+  afterEach(() => {
+    numberPickerFixture.destroy();
+    numberPickerComp = null;
+  });
+
+  it('should use default value when component\'s property is not passed', () => {
+
+    expect(numberPickerComp.min).toBe(0);
+    expect(numberPickerComp.max).toBe(100);
+    expect(numberPickerComp.size).toBe(1);
+    expect(numberPickerComp.step).toBe(1);
+  });
+
+  it('should increase value', () => {
+    numberPickerComp.startValue = 0;
+    numberPickerComp.toggleUp();
+
+    expect(numberPickerComp.value).toBe(0);
+
+    numberPickerComp.toggleUp();
+
+    expect(numberPickerComp.value).toBe(1);
+  });
+
+  it('should set min value when the value exceeds the max', () => {
+    numberPickerComp.value = 100;
+    numberPickerComp.toggleUp();
+
+    expect(numberPickerComp.value).toBe(0);
+
+  });
+
+  it('should decrease value', () => {
+    numberPickerComp.startValue = 2;
+    numberPickerComp.toggleDown();
+
+    expect(numberPickerComp.value).toBe(2);
+
+    numberPickerComp.toggleDown();
+
+    expect(numberPickerComp.value).toBe(1);
+  });
+
+  it('should set max value when the value is less than the min', () => {
+    numberPickerComp.value = 0;
+    numberPickerComp.toggleDown();
+
+    expect(numberPickerComp.value).toBe(100);
+
+  });
+
+  it('should update value on input type', () => {
+    const de = numberPickerFixture.debugElement.query(By.css('input.form-control'));
+    const inputEl = de.nativeElement;
+
+    inputEl.value = 99;
+    inputEl.dispatchEvent(new Event('change'));
+
+    expect(numberPickerComp.value).toBe(99);
+  });
+
+  it('should not update value when input value is invalid', () => {
+    const de = numberPickerFixture.debugElement.query(By.css('input.form-control'));
+    const inputEl = de.nativeElement;
+
+    inputEl.value = 101;
+    inputEl.dispatchEvent(new Event('change'));
+
+    expect(numberPickerComp.value).toBe(undefined);
+  });
+
+});
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  public disabled = false;
+  public max = 100;
+  public min = 0;
+  public initValue = 0;
+  public showErrorMessages = false;
+  public size = 4;
+  public value;
+
+}
diff --git a/src/app/shared/number-picker/number-picker.component.ts b/src/app/shared/number-picker/number-picker.component.ts
index b4172b7182..56be174055 100644
--- a/src/app/shared/number-picker/number-picker.component.ts
+++ b/src/app/shared/number-picker/number-picker.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, SimpleChanges, } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isEmpty } from '../empty.util';
 
 @Component({
   selector: 'ds-number-picker',
@@ -27,16 +28,17 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
   @Output() change = new EventEmitter<any>();
   @Output() focus = new EventEmitter<any>();
 
-  lastValue: number;
+  startValue: number;
 
   constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {
   }
 
   ngOnInit() {
-    // this.lastValue = this.value;
+    // this.startValue = this.value;
     this.step = this.step || 1;
     this.min = this.min || 0;
     this.max = this.max || 100;
+    this.size = this.size || 1;
     this.disabled = this.disabled || false;
     this.invalid = this.invalid || false;
     this.cd.detectChanges();
@@ -57,12 +59,13 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  increment(reverse?: boolean) {
+  private changeValue(reverse: boolean = false) {
+
     // First after init
-    if (!this.value) {
-      this.value = this.lastValue;
+    if (isEmpty(this.value)) {
+      this.value = this.startValue;
     } else {
-      this.lastValue = this.value;
+      this.startValue = this.value;
 
       let newValue = this.value;
       if (reverse) {
@@ -85,8 +88,12 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
     this.emitChange();
   }
 
-  decrement() {
-    this.increment(true);
+  toggleDown() {
+    this.changeValue(true);
+  }
+
+  toggleUp() {
+    this.changeValue();
   }
 
   update(event) {
@@ -109,18 +116,18 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
 
   onFocus(event) {
     if (this.value) {
-      this.lastValue = this.value;
+      this.startValue = this.value;
     }
     this.focus.emit(event);
   }
 
   writeValue(value) {
-    if (this.lastValue) {
-      this.lastValue = this.value;
+    if (this.startValue) {
+      this.startValue = this.value;
       this.value = value;
     } else {
       // First init
-      this.lastValue = value;
+      this.startValue = value || this.min;
     }
   }
 
diff --git a/src/app/shared/pagination/pagination.component.spec.ts b/src/app/shared/pagination/pagination.component.spec.ts
index 48767cf582..d5d0c4980c 100644
--- a/src/app/shared/pagination/pagination.component.spec.ts
+++ b/src/app/shared/pagination/pagination.component.spec.ts
@@ -300,7 +300,7 @@ describe('Pagination component', () => {
 
   it('should get parameters from route', () => {
 
-    activatedRouteStub = testFixture.debugElement.injector.get(ActivatedRoute) as any;;
+    activatedRouteStub = testFixture.debugElement.injector.get(ActivatedRoute) as any;
     activatedRouteStub.testParams = {
       pageId: 'test',
       page: 2,

From d49cba9090634635664945240ce1a821a02d0e1e Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 26 Jun 2018 16:41:11 +0200
Subject: [PATCH 18/41] Added more tests

---
 .../form/builder/parsers/row-parser.spec.ts   | 250 ++++++++++++-
 src/app/shared/form/form.component.spec.ts    | 338 ++++++++++++++++--
 src/app/shared/form/form.component.ts         |  20 +-
 src/app/shared/testing/mock-store.ts          |   9 +-
 4 files changed, 561 insertions(+), 56 deletions(-)

diff --git a/src/app/shared/form/builder/parsers/row-parser.spec.ts b/src/app/shared/form/builder/parsers/row-parser.spec.ts
index b60cf8d01c..b7bb083de7 100644
--- a/src/app/shared/form/builder/parsers/row-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.spec.ts
@@ -9,6 +9,13 @@ describe('RowParser test suite', () => {
   let row1: FormRowModel;
   let row2: FormRowModel;
   let row3: FormRowModel;
+  let row4: FormRowModel;
+  let row5: FormRowModel;
+  let row6: FormRowModel;
+  let row7: FormRowModel;
+  let row8: FormRowModel;
+  let row9: FormRowModel;
+  let row10: FormRowModel;
 
   const scopeUUID = 'testScopeUUID';
   const initFormValues = {};
@@ -77,9 +84,10 @@ describe('RowParser test suite', () => {
             }
           ],
           languageCodes: []
-        }
+        } as FormFieldModel
       ]
     } as FormRowModel;
+
     row3 = {
       fields: [
         {
@@ -96,7 +104,7 @@ describe('RowParser test suite', () => {
             }
           ],
           languageCodes: []
-        },
+        } as FormFieldModel,
         {
           input: {type: 'onebox'},
           label: 'Other title',
@@ -112,14 +120,248 @@ describe('RowParser test suite', () => {
             }
           ],
           languageCodes: []
-        }
+        } as FormFieldModel
       ]
     } as FormRowModel;
 
+    row4 = {
+      fields: [
+        {
+          input: {
+            type: 'dropdown'
+          },
+          label: 'Type',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Select the tyupe.',
+          selectableMetadata: [
+            {
+              metadata: 'type',
+              authority: 'common_types_dataset',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel,
+        {
+          input: {type: 'series'},
+          label: 'Series/Report No.',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter the series and number assigned to this item by your community.',
+          selectableMetadata: [
+            {
+              metadata: 'series',
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+
+    row5 = {
+      fields: [
+        {
+          input: {
+            type: 'lookup-name'
+          },
+          label: 'Author',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter the name of the author.',
+          selectableMetadata: [
+            {
+              metadata: 'author',
+              authority: 'RPAuthority',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+
+    row6 = {
+      fields: [
+        {
+          input: {
+            type: 'list'
+          },
+          label: 'Type',
+          mandatory: 'false',
+          repeatable: true,
+          hints: 'Select the type.',
+          selectableMetadata: [
+            {
+              metadata: 'type',
+              authority: 'type_programme',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+
+    row7 = {
+      fields: [
+        {
+          input: {
+            type: 'date'
+          },
+          label: 'Date of Issue.',
+          mandatory: 'true',
+          repeatable: false,
+          hints: 'Please give the date of previous publication or public distribution. You can leave out the day and/or month if they aren\'t applicable.',
+          mandatoryMessage: 'You must enter at least the year.',
+          selectableMetadata: [
+            {
+              metadata: 'date',
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+
+    row8 = {
+      fields: [
+        {
+          input: {
+            type: 'tag'
+          },
+          label: 'Keywords',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Local controlled vocabulary.',
+          selectableMetadata: [
+            {
+              metadata: 'subject',
+              authority: 'JOURNALAuthority',
+              closed: false
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+
+    row9 = {
+      fields: [
+        {
+          input: {
+            type: 'textarea'
+          },
+          label: 'Description',
+          mandatory: 'false',
+          repeatable: false,
+          hints: 'Enter a description.',
+          selectableMetadata: [
+            {
+              metadata: 'description'
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
+
+    row10 = {
+      fields: [
+        {
+          input: {
+            type: 'group'
+          },
+          rows: [
+            {
+              fields: [
+                {
+                  input: {
+                    type: 'onebox'
+                  },
+                  label: 'Author',
+                  mandatory: 'false',
+                  repeatable: false,
+                  hints: 'Enter the name of the author.',
+                  selectableMetadata: [
+                    {
+                      metadata: 'author'
+                    }
+                  ],
+                  languageCodes: []
+                },
+                {
+                  input: {
+                    type: 'onebox'
+                  },
+                  label: 'Affiliation',
+                  mandatory: false,
+                  repeatable: true,
+                  hints: 'Enter the affiliation of the author.',
+                  selectableMetadata: [
+                    {
+                      metadata: 'affiliation'
+                    }
+                  ],
+                  languageCodes: []
+                }
+              ]
+            }
+          ],
+          label: 'Authors',
+          mandatory: 'true',
+          repeatable: false,
+          mandatoryMessage: 'Entering at least the first author is mandatory.',
+          hints: 'Enter the names of the authors of this item.',
+          selectableMetadata: [
+            {
+              metadata: 'author'
+            }
+          ],
+          languageCodes: []
+        } as FormFieldModel
+      ]
+    } as FormRowModel;
   });
 
   it('should init parser properly', () => {
-    const parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly);
+    let parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row2, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row3, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row4, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row5, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row6, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row7, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row8, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row9, scopeUUID, initFormValues, submissionScope, readOnly);
+
+    expect(parser instanceof RowParser).toBe(true);
+
+    parser = new RowParser(row10, scopeUUID, initFormValues, submissionScope, readOnly);
 
     expect(parser instanceof RowParser).toBe(true);
   });
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index efc6383603..155e009fb1 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -1,13 +1,16 @@
-// Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { Observable } from 'rxjs/Observable';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import 'rxjs/add/observable/of';
-import { DynamicFormControlModel, DynamicFormValidationService, DynamicInputModel } from '@ng-dynamic-forms/core';
+import {
+  DynamicFormArrayModel,
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+  DynamicFormValidationService,
+  DynamicInputModel
+} from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
@@ -16,6 +19,9 @@ import { FormComponent } from './form.component';
 import { FormService } from './form.service';
 import { FormBuilderService } from './builder/form-builder.service';
 import { FormState } from './form.reducers';
+import { FormChangeAction, FormStatusChangeAction } from './form.actions';
+import { MockStore } from '../testing/mock-store';
+import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -76,33 +82,47 @@ export const TEST_FORM_MODEL = [
   ),
 ];
 
-export const TEST_FORM_GROUP = {
-  dc_title: new FormControl(),
-  dc_title_alternative: new FormControl(),
-  dc_publisher: new FormControl(),
-  dc_identifier_citation: new FormControl(),
-  dc_identifier_issn: new FormControl()
-}
+export const TEST_FORM_MODEL_WITH_ARRAY = [
+  new DynamicFormArrayModel({
 
-describe('Form component', () => {
+    id: 'bootstrapFormArray',
+    initialCount: 1,
+    label: 'Form Array',
+    groupFactory: () => {
+      return [
+        new DynamicInputModel({
+
+          id: 'bootstrapArrayGroupInput',
+          placeholder: 'example array group input',
+          readOnly: false
+        })
+      ];
+    }
+  })
+];
+
+describe('FormComponent test suite', () => {
 
   let testComp: TestComponent;
+  let formComp: FormComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let formFixture: ComponentFixture<FormComponent>;
+  const formState: FormState = {
+    testForm: {
+      data: {
+        dc_title: null,
+        dc_title_alternative: null,
+        dc_publisher: null,
+        dc_identifier_citation: null,
+        dc_identifier_issn: null
+      },
+      valid: false,
+      errors: []
+    }
+  };
   let html;
-  const formServiceStub = {
-    getFormData: (formId) => Observable.of([])
-  }
-  const formBuilderServiceStub = {
-    createFormGroup: (formModel) => new FormGroup(TEST_FORM_GROUP)
-  }
-  const submissionFormsConfigServiceStub = {};
 
-  const store: Store<FormState> = jasmine.createSpyObj('store', {
-    /* tslint:disable:no-empty */
-    dispatch: {},
-    /* tslint:enable:no-empty */
-    select: Observable.of({})
-  });
+  const store: MockStore<FormState> = new MockStore<FormState>(formState);
 
   // async beforeEach
   beforeEach(async(() => {
@@ -135,23 +155,265 @@ describe('Form component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
-      <ds-form *ngIf="formModel" #formRef="formComponent"
-               [formId]="formId"
-               [formModel]="formModel"
-               [displaySubmit]="displaySubmit"></ds-form>`;
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
+        <ds-form *ngIf="formModel" #formRef="formComponent"
+                 [formId]="formId"
+                 [formModel]="formModel"
+                 [displaySubmit]="displaySubmit"></ds-form>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create FormComponent', inject([FormComponent], (app: FormComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create Form Component', inject([FormComponent], (app: FormComponent) => {
+  describe('', () => {
+    beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+      formFixture = TestBed.createComponent(FormComponent);
+      formComp = formFixture.componentInstance; // FormComponent test instance
+      formComp.formId = 'testForm';
+      formComp.formModel = TEST_FORM_MODEL;
+      formComp.displaySubmit = false;
+      formFixture.detectChanges();
+      spyOn(store, 'dispatch');
+    });
 
+    afterEach(() => {
+      formFixture.destroy();
+      formComp = null;
+    });
+
+    it('should dispatch a FormStatusChangeAction when Form group status changes', () => {
+      const control = formComp.formGroup.get(['dc_title']);
+      control.setValue('Test Title');
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormStatusChangeAction('testForm', formComp.formGroup.valid));
+
+    });
+
+    it('should display form errors when errors are added to the state', () => {
+      const errors = [{
+        fieldId: 'dc_title',
+        message: 'error.validation.required'
+      }];
+
+      formState.testForm.errors = errors;
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      expect((formComp as any).formErrors).toEqual(errors);
+
+    });
+
+    it('should remove form errors when errors are empty in the state', () => {
+      (formComp as any).formErrors = [{
+        fieldId: 'dc_title',
+        message: 'error.validation.required'
+      }];
+      const errors = [];
+
+      formState.testForm.errors = errors;
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      expect((formComp as any).formErrors).toEqual(errors);
+
+    });
+
+    it('should dispatch FormChangeAction on form change', inject([FormBuilderService], (service: FormBuilderService) => {
+      const event = {
+        $event: new FormFieldMetadataValueObject('Test Title'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'change'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.change, 'emit');
+
+      formComp.onChange(event);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testForm', service.getValueFromModel(formComp.formModel)));
+      expect(formComp.change.emit).toHaveBeenCalled();
+    }));
+
+    it('should emit change on form change', inject([FormBuilderService], (service: FormBuilderService) => {
+      const event = {
+        $event: new FormFieldMetadataValueObject('Test Title'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'change'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.change, 'emit');
+
+      formComp.onChange(event);
+
+      expect(formComp.change.emit).toHaveBeenCalled();
+    }));
+
+    it('should not emit change Event on form change when emitChange is false', inject([FormBuilderService], (service: FormBuilderService) => {
+      const event = {
+        $event: new FormFieldMetadataValueObject('Test Title'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'change'
+      } as DynamicFormControlEvent;
+
+      formComp.emitChange = false;
+      spyOn(formComp.change, 'emit');
+
+      formComp.onChange(event);
+
+      expect(formComp.change.emit).not.toHaveBeenCalled();
+    }));
+
+    it('should emit blur Event on blur', () => {
+      const event = {
+        $event: new FocusEvent('blur'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'blur'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.blur, 'emit');
+
+      formComp.onBlur(event);
+
+      expect(formComp.blur.emit).toHaveBeenCalled();
+    });
+
+    it('should emit focus Event on focus', () => {
+      const event = {
+        $event: new FocusEvent('focus'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'focus'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.focus, 'emit');
+
+      formComp.onFocus(event);
+
+      expect(formComp.focus.emit).toHaveBeenCalled();
+    });
+
+    it('should return Observable of form status', () => {
+
+      const control = formComp.formGroup.get(['dc_title']);
+      control.setValue('Test Title');
+      formState.testForm.valid = true;
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      formComp.isValid().subscribe((valid) => {
+        expect(valid).toBe(true);
+      });
+    });
+
+    it('should emit submit Event on form submit whether the form is valid', () => {
+
+      const control = formComp.formGroup.get(['dc_title']);
+      control.setValue('Test Title');
+      formState.testForm.valid = true;
+      spyOn(formComp.submit, 'emit');
+
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      formComp.onSubmit();
+      expect(formComp.submit.emit).toHaveBeenCalled();
+    });
+
+    it('should not emit submit Event on form submit whether the form is not valid', () => {
+
+      spyOn((formComp as any).formService, 'validateAllFormFields');
+
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      formComp.onSubmit();
+      expect((formComp as any).formService.validateAllFormFields).toHaveBeenCalled();
+    });
+
+    it('should reset form group', () => {
+
+      spyOn(formComp.formGroup, 'reset');
+
+      formComp.reset();
+
+      expect(formComp.formGroup.reset).toHaveBeenCalled();
+    });
+  });
+
+  describe('', () => {
+    beforeEach(() => {
+
+      formFixture = TestBed.createComponent(FormComponent);
+      formComp = formFixture.componentInstance; // FormComponent test instance
+      formComp.formId = 'testFormArray';
+      formComp.formModel = TEST_FORM_MODEL_WITH_ARRAY;
+      formComp.displaySubmit = false;
+      formFixture.detectChanges();
+      spyOn(store, 'dispatch');
+    });
+
+    afterEach(() => {
+      formFixture.destroy();
+      formComp = null;
+    });
+
+    it('should return ReadOnly property from array item', inject([FormBuilderService], (service: FormBuilderService) => {
+      const readOnly = formComp.isItemReadOnly(formComp.formModel[0] as DynamicFormArrayModel, 0);
+
+      expect(readOnly).toBe(false);
+    }));
+
+    it('should dispatch FormChangeAction when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
+    }));
+
+    it('should emit addArrayItem Event when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp.addArrayItem, 'emit');
+
+      formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(formComp.addArrayItem.emit).toHaveBeenCalled();
+    }));
+
+    it('should dispatch FormChangeAction when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
+    }));
+
+    it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp.removeArrayItem, 'emit');
+
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
+    }));
+  })
 });
 
 // declare a test component
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index 7a894ca3e5..922f2e40f8 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -21,7 +21,7 @@ import {
 import { FormBuilderService } from './builder/form-builder.service';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
-import { hasValue, isNotNull, isNull } from '../empty.util';
+import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
 import { FormService } from './form.service';
 import { formObjectFromIdSelector } from './selectors';
 import { FormEntry, FormError } from './form.reducers';
@@ -154,7 +154,7 @@ export class FormComponent implements OnDestroy, OnInit {
 
     this.subs.push(
       this.store.select(formObjectFromIdSelector(this.formId))
-        .filter((formState: FormEntry) => !!formState && !isEmpty(formState.errors))
+        .filter((formState: FormEntry) => !!formState && (isNotEmpty(formState.errors) || isNotEmpty(this.formErrors)))
         .map((formState) => formState.errors)
         .distinctUntilChanged()
         // .delay(100) // this terrible delay is here to prevent the detection change error
@@ -223,7 +223,7 @@ export class FormComponent implements OnDestroy, OnInit {
   /**
    * Method to keep synchronized form controls values with form state
    */
-  private keepSync() {
+  private keepSync(): void {
     this.subs.push(this.formService.getFormData(this.formId)
       .subscribe((stateFormData) => {
         if (!Object.is(stateFormData, this.formGroup.value) && this.formGroup) {
@@ -232,15 +232,15 @@ export class FormComponent implements OnDestroy, OnInit {
       }));
   }
 
-  onBlur(event) {
+  onBlur(event: DynamicFormControlEvent): void {
     this.blur.emit(event);
   }
 
-  onFocus(event) {
+  onFocus(event: DynamicFormControlEvent): void {
     this.focus.emit(event);
   }
 
-  onChange(event) {
+  onChange(event: DynamicFormControlEvent): void {
     const action: FormChangeAction = new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel));
 
     this.store.dispatch(action);
@@ -260,7 +260,7 @@ export class FormComponent implements OnDestroy, OnInit {
    * Method called on submit.
    * Emit a new submit Event whether the form is valid, mark fields with error otherwise
    */
-  onSubmit() {
+  onSubmit(): void {
     if (this.getFormGroupValidStatus()) {
       this.submit.emit(this.formService.getFormData(this.formId));
     } else {
@@ -271,7 +271,7 @@ export class FormComponent implements OnDestroy, OnInit {
   /**
    * Method to reset form fields
    */
-  reset() {
+  reset(): void {
     this.formGroup.reset();
   }
 
@@ -281,14 +281,14 @@ export class FormComponent implements OnDestroy, OnInit {
     return model.readOnly;
   }
 
-  removeItem($event, arrayContext: DynamicFormArrayModel, index: number) {
+  removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
     const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
     this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
     this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
     this.store.dispatch(new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel)));
   }
 
-  insertItem($event, arrayContext: DynamicFormArrayModel, index: number) {
+  insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
     const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
     this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
     this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
diff --git a/src/app/shared/testing/mock-store.ts b/src/app/shared/testing/mock-store.ts
index c619b5aa77..a3bca3c1b5 100644
--- a/src/app/shared/testing/mock-store.ts
+++ b/src/app/shared/testing/mock-store.ts
@@ -9,12 +9,13 @@ export class MockStore<T> extends BehaviorSubject<T> {
   }
 
   dispatch = (action: Action): void => {
-    console.info();
-  }
+    // console.info(action);
+  };
 
   select = <R>(pathOrMapFn: any): Observable<T> => {
-    return Observable.of(this.getValue());
-  }
+    return this.asObservable()
+      .map((value) => pathOrMapFn.projector(value))
+  };
 
   nextState(_newState: T) {
     this.next(_newState);

From 2ffbdf942c574d76fcc8b41e2781df7a4150a21f Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 26 Jun 2018 19:19:13 +0200
Subject: [PATCH 19/41] Added more tests

---
 .../shared/chips/models/chips-item.model.ts   |   4 +-
 .../chips/models/chpis-item.model.spec.ts     |  78 ++++++++++++
 .../shared/chips/models/chpis.model.spec.ts   | 115 ++++++++++++++++++
 3 files changed, 195 insertions(+), 2 deletions(-)
 create mode 100644 src/app/shared/chips/models/chpis-item.model.spec.ts
 create mode 100644 src/app/shared/chips/models/chpis.model.spec.ts

diff --git a/src/app/shared/chips/models/chips-item.model.ts b/src/app/shared/chips/models/chips-item.model.ts
index 0efdd0984b..ed082a51eb 100644
--- a/src/app/shared/chips/models/chips-item.model.ts
+++ b/src/app/shared/chips/models/chips-item.model.ts
@@ -17,8 +17,8 @@ export class ChipsItem {
   private objToDisplay: string;
 
   constructor(item: any,
-              fieldToDisplay: string,
-              objToDisplay: string,
+              fieldToDisplay: string = 'display',
+              objToDisplay?: string,
               icons?: ChipsItemIcon[],
               editMode?: boolean) {
 
diff --git a/src/app/shared/chips/models/chpis-item.model.spec.ts b/src/app/shared/chips/models/chpis-item.model.spec.ts
new file mode 100644
index 0000000000..6e1e2dcc3b
--- /dev/null
+++ b/src/app/shared/chips/models/chpis-item.model.spec.ts
@@ -0,0 +1,78 @@
+import { ChipsItem, ChipsItemIcon } from './chips-item.model';
+import { FormFieldMetadataValueObject } from '../../form/builder/models/form-field-metadata-value.model';
+
+describe('ChipsItem model test suite', () => {
+  let item: ChipsItem;
+
+  beforeEach(() => {
+    item = new ChipsItem('a');
+  });
+
+  it('should init ChipsItem object properly', () => {
+    expect(item.item).toBe('a');
+    expect(item.display).toBe('a');
+    expect(item.editMode).toBe(false);
+    expect(item.icons).toEqual([]);
+  });
+
+  it('should update item', () => {
+    item.updateItem('b');
+
+    expect(item.item).toBe('b');
+  });
+
+  it('should set editMode', () => {
+    item.setEditMode();
+
+    expect(item.editMode).toBe(true);
+  });
+
+  it('should unset editMode', () => {
+    item.unsetEditMode();
+
+    expect(item.editMode).toBe(false);
+  });
+
+  it('should update icons', () => {
+    const icons: ChipsItemIcon[] = [{style: 'fa fa-plus'}];
+    item.updateIcons(icons);
+
+    expect(item.icons).toEqual(icons);
+  });
+
+  it('should return true if has icons', () => {
+    const icons: ChipsItemIcon[] = [{style: 'fa fa-plus'}];
+    item.updateIcons(icons);
+    const hasIcons = item.hasIcons();
+
+    expect(hasIcons).toBe(true);
+  });
+
+  it('should return false if has not icons', () => {
+    const hasIcons = item.hasIcons();
+
+    expect(hasIcons).toBe(false);
+  });
+
+  it('should set display property with a different fieldToDisplay', () => {
+    item = new ChipsItem(
+      {
+        label: 'A',
+        value: 'a'
+      },
+      'label');
+
+    expect(item.display).toBe('A');
+  });
+
+  it('should set display property with a different objToDisplay', () => {
+    item = new ChipsItem(
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'other'
+      },
+      'value', 'toDisplay');
+
+    expect(item.display).toBe('a');
+  });
+});
diff --git a/src/app/shared/chips/models/chpis.model.spec.ts b/src/app/shared/chips/models/chpis.model.spec.ts
new file mode 100644
index 0000000000..661dc561ba
--- /dev/null
+++ b/src/app/shared/chips/models/chpis.model.spec.ts
@@ -0,0 +1,115 @@
+import { Chips } from './chips.model';
+import { ChipsItem } from './chips-item.model';
+import { FormFieldMetadataValueObject } from '../../form/builder/models/form-field-metadata-value.model';
+
+describe('Chips model test suite', () => {
+  let items: any[];
+  let item: ChipsItem;
+  let chips: Chips;
+
+  beforeEach(() => {
+    items = ['a', 'b', 'c'];
+    chips = new Chips(items);
+  });
+
+  it('should init Chips object properly', () => {
+    expect(chips.getChipsItems()).toEqual(items);
+    expect(chips.displayField).toBe('display');
+    expect(chips.displayObj).toBe(undefined);
+    expect(chips.iconsConfig).toEqual({});
+  });
+
+  it('should add an element to items', () => {
+    items = ['a', 'b', 'c', 'd'];
+    chips.add('d');
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+
+  it('should remove an element from items', () => {
+    items = ['a', 'c'];
+    item = chips.getChipByIndex(1);
+    chips.remove(item);
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+
+  it('should update an item', () => {
+    items = ['a', 'd', 'c'];
+    const id = chips.getChipByIndex(1).id;
+    chips.update(id, 'd');
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+
+  it('should update items order', () => {
+    items = ['a', 'c', 'b'];
+    const chipsItems = chips.getChips();
+    const b = chipsItems[1];
+    chipsItems[1] = chipsItems[2];
+    chipsItems[2] = b;
+    chips.updateOrder();
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+
+  it('should set a different displayField', () => {
+    items = [
+      {
+        label: 'A',
+        value: 'a'
+      },
+      {
+        label: 'B',
+        value: 'b'
+      },
+      {
+        label: 'C',
+        value: 'c'
+      },
+    ];
+    chips = new Chips(items, 'label');
+    expect(chips.displayField).toBe('label');
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+
+  it('should set a different displayObj', () => {
+    items = [
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'a'
+      },
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'a'
+      },
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'a'
+      },
+    ];
+    chips = new Chips(items, 'value', 'toDisplay');
+    expect(chips.displayField).toBe('value');
+    expect(chips.displayObj).toBe('toDisplay');
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+
+  it('should set iconsConfig', () => {
+    items = [
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'a'
+      },
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'a'
+      },
+      {
+        toDisplay: new FormFieldMetadataValueObject('a', null, 'a'),
+        otherProperty: 'a'
+      },
+    ];
+    chips = new Chips(items, 'value', 'toDisplay', {toDisplay: 'fa fa-plus'});
+
+    expect(chips.displayField).toBe('value');
+    expect(chips.displayObj).toBe('toDisplay');
+    expect(chips.iconsConfig).toEqual({toDisplay: 'fa fa-plus'});
+    expect(chips.getChipsItems()).toEqual(items);
+  });
+});

From f6b665cb90ac6b62cd20eac01810a99b90eb1c72 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 27 Jun 2018 17:43:09 +0200
Subject: [PATCH 20/41] Added more tests

---
 .../dynamic-group.component.spec.ts           | 302 ++++++++++++++----
 .../dynamic-group/dynamic-group.components.ts |  11 +-
 .../dynamic-group/dynamic-group.model.ts      |   2 -
 3 files changed, 239 insertions(+), 76 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
index 51b0838fd5..0ba55ef982 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -8,8 +8,8 @@ import 'rxjs/add/observable/of';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { DsDynamicGroupComponent } from './dynamic-group.components';
-import { DynamicGroupModel } from './dynamic-group.model';
-import { FormRowModel } from '../../../../../../core/shared/config/config-submission-forms.model';
+import { DynamicGroupModel, DynamicGroupModelConfig } from './dynamic-group.model';
+import { FormRowModel, SubmissionFormsModel } from '../../../../../../core/shared/config/config-submission-forms.model';
 import { FormFieldModel } from '../../../models/form-field.model';
 import { FormBuilderService } from '../../../form-builder.service';
 import { FormService } from '../../../../form.service';
@@ -20,6 +20,11 @@ import { DynamicFormValidationService } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '../../../../../../app.reducer';
 import { Observable } from 'rxjs/Observable';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Chips } from '../../../../../chips/models/chips.model';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { DsDynamicInputModel } from '../ds-dynamic-input.model';
+import { By } from '@angular/platform-browser';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -31,13 +36,70 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Dynamic Group component', () => {
+export const FORM_GROUP_TEST_MODEL_CONFIG = {
+  disabled: false,
+  errorMessages: {required: 'You must specify at least one author.'},
+  formConfiguration: [{
+    fields: [{
+      hints: 'Enter the name of the author.',
+      input: {type: 'onebox'},
+      label: 'Author',
+      languageCodes: [],
+      mandatory: 'true',
+      mandatoryMessage: 'Required field!',
+      repeatable: false,
+      selectableMetadata: [{
+        authority: 'RPAuthority',
+        closed: false,
+        metadata: 'dc.contributor.author'
+      }],
+    } as FormFieldModel]
+  } as FormRowModel, {
+    fields: [{
+      hints: 'Enter the affiliation of the author.',
+      input: {type: 'onebox'},
+      label: 'Affiliation',
+      languageCodes: [],
+      mandatory: 'false',
+      repeatable: false,
+      selectableMetadata: [{
+        authority: 'OUAuthority',
+        closed: false,
+        metadata: 'local.contributor.affiliation'
+      }]
+    } as FormFieldModel]
+  } as FormRowModel],
+  id: 'dc_contributor_author',
+  label: 'Authors',
+  mandatoryField: 'dc.contributor.author',
+  name: 'dc.contributor.author',
+  placeholder: 'Authors',
+  readOnly: false,
+  relationFields: ['local.contributor.affiliation'],
+  required: true,
+  scopeUUID: '43fe1f8c-09a6-4fcf-9c78-5d4fed8f2c8f',
+  submissionScope: undefined,
+  validators: {required: null}
+} as DynamicGroupModelConfig;
+
+export const FORM_GROUP_TEST_GROUP = new FormGroup({
+  dc_contributor_author: new FormControl(),
+});
+
+describe('DsDynamicGroupComponent test suite', () => {
 
   let testComp: TestComponent;
+  let groupComp: DsDynamicGroupComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let groupFixture: ComponentFixture<DsDynamicGroupComponent>;
+  let modelValue: any;
   let html;
+  let control1: FormControl;
+  let model1: DsDynamicInputModel;
+  let control2: FormControl;
+  let model2: DsDynamicInputModel;
 
-  const mockStore: Store<AppState> = jasmine.createSpyObj('store', {
+  const store: Store<AppState> = jasmine.createSpyObj('store', {
     dispatch: {},
     select: Observable.of(true)
   });
@@ -47,6 +109,7 @@ describe('Dynamic Group component', () => {
 
     TestBed.configureTestingModule({
       imports: [
+        BrowserAnimationsModule,
         FormsModule,
         ReactiveFormsModule,
         NgbModule.forRoot(),
@@ -65,34 +128,181 @@ describe('Dynamic Group component', () => {
         FormComponent,
         FormService,
         {provide: GLOBAL_CONFIG, useValue: {} as GlobalConfig},
-        {provide: Store, useValue: mockStore},
+        {provide: Store, useValue: store},
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
-           <ds-date-picker
-            [bindId]='bindId'
-            [group]='group'
-            [model]='model'
-            [showErrorMessages]='showErrorMessages'
-            (blur)='onBlur($event)'
-            (change)='onValueChange($event)'
-            (focus)='onFocus($event)'></ds-date-picker>`;
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
+          <ds-dynamic-group [model]="model"
+                            [formId]="formId"
+                            [group]="group"
+                            [showErrorMessages]="showErrorMessages"
+                            (blur)="onBlur($event)"
+                            (change)="onValueChange($event)"
+                            (focus)="onFocus($event)"></ds-dynamic-group>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicGroupComponent', inject([DsDynamicGroupComponent], (app: DsDynamicGroupComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicGroupComponent', inject([DsDynamicGroupComponent], (app: DsDynamicGroupComponent) => {
+  describe('when init model value is empty', () => {
+    beforeEach(inject([FormBuilderService], (service: FormBuilderService) => {
 
-    expect(app).toBeDefined();
-  }));
+      groupFixture = TestBed.createComponent(DsDynamicGroupComponent);
+      groupComp = groupFixture.componentInstance; // FormComponent test instance
+      groupComp.formId = 'testForm';
+      groupComp.group = FORM_GROUP_TEST_GROUP;
+      groupComp.model = new DynamicGroupModel(FORM_GROUP_TEST_MODEL_CONFIG);
+      groupComp.showErrorMessages = false;
+      groupFixture.detectChanges();
 
+      control1 = service.getFormControlById('dc_contributor_author', (groupComp as any).formRef.formGroup, groupComp.formModel) as FormControl;
+      model1 = service.findById('dc_contributor_author', groupComp.formModel) as DsDynamicInputModel;
+      control2 = service.getFormControlById('local_contributor_affiliation', (groupComp as any).formRef.formGroup, groupComp.formModel) as FormControl;
+      model2 = service.findById('local_contributor_affiliation', groupComp.formModel) as DsDynamicInputModel;
+
+      // spyOn(store, 'dispatch');
+    }));
+
+    afterEach(() => {
+      groupFixture.destroy();
+      groupComp = null;
+    });
+
+    it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => {
+      const config = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
+      const formModel = service.modelFromConfiguration(config, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
+      const chips = new Chips([], 'value', 'dc.contributor.author');
+
+      expect(groupComp.formCollapsed).toEqual(Observable.of(false));
+      expect(groupComp.formModel.length).toEqual(formModel.length);
+      expect(groupComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+    }));
+
+    it('should save a new chips item', () => {
+      control1.setValue('test author');
+      (model1 as any).value = new FormFieldMetadataValueObject('test author');
+      control2.setValue('test affiliation');
+      (model2 as any).value = new FormFieldMetadataValueObject('test affiliation');
+      modelValue = [{
+        'dc.contributor.author': new FormFieldMetadataValueObject('test author'),
+        'local.contributor.affiliation': new FormFieldMetadataValueObject('test affiliation')
+      }];
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[0];
+      btnEl.click();
+
+      expect(groupComp.chips.getChipsItems()).toEqual(modelValue);
+      expect(groupComp.formCollapsed).toEqual(Observable.of(true));
+    });
+
+    it('should clear form inputs', () => {
+      control1.setValue('test author');
+      (model1 as any).value = new FormFieldMetadataValueObject('test author');
+      control2.setValue('test affiliation');
+      (model2 as any).value = new FormFieldMetadataValueObject('test affiliation');
+
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[2];
+      btnEl.click();
+
+      expect(control1.value).toBeNull();
+      expect(control2.value).toBeNull();
+      expect(groupComp.formCollapsed).toEqual(Observable.of(false));
+    });
+  });
+
+  describe('when init model value is not empty', () => {
+    beforeEach(inject([FormBuilderService], (service: FormBuilderService) => {
+
+      groupFixture = TestBed.createComponent(DsDynamicGroupComponent);
+      groupComp = groupFixture.componentInstance; // FormComponent test instance
+      groupComp.formId = 'testForm';
+      groupComp.group = FORM_GROUP_TEST_GROUP;
+      groupComp.model = new DynamicGroupModel(FORM_GROUP_TEST_MODEL_CONFIG);
+      modelValue = [{
+        'dc.contributor.author': new FormFieldMetadataValueObject('test author'),
+        'local.contributor.affiliation': new FormFieldMetadataValueObject('test affiliation')
+      }];
+      groupComp.model.value = modelValue;
+      groupComp.showErrorMessages = false;
+      groupFixture.detectChanges();
+
+    }));
+
+    afterEach(() => {
+      groupFixture.destroy();
+      groupComp = null;
+    });
+
+    it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => {
+      const config = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
+      const formModel = service.modelFromConfiguration(config, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
+      const chips = new Chips(modelValue, 'value', 'dc.contributor.author');
+
+      expect(groupComp.formCollapsed).toEqual(Observable.of(true));
+      expect(groupComp.formModel.length).toEqual(formModel.length);
+      expect(groupComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+    }));
+
+    it('should modify existing chips item', inject([FormBuilderService], (service: FormBuilderService) => {
+      groupComp.onChipSelected(0);
+      groupFixture.detectChanges();
+
+      control1 = service.getFormControlById('dc_contributor_author', (groupComp as any).formRef.formGroup, groupComp.formModel) as FormControl;
+      model1 = service.findById('dc_contributor_author', groupComp.formModel) as DsDynamicInputModel;
+
+      control1.setValue('test author modify');
+      (model1 as any).value = new FormFieldMetadataValueObject('test author modify');
+
+      modelValue = [{
+        'dc.contributor.author': new FormFieldMetadataValueObject('test author modify'),
+        'local.contributor.affiliation': new FormFieldMetadataValueObject('test affiliation')
+      }];
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[0];
+      btnEl.click();
+
+      groupFixture.detectChanges();
+
+      expect(groupComp.chips.getChipsItems()).toEqual(modelValue);
+      expect(groupComp.formCollapsed).toEqual(Observable.of(true));
+    }));
+
+    it('should delete existing chips item', inject([FormBuilderService], (service: FormBuilderService) => {
+      groupComp.onChipSelected(0);
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[1];
+      btnEl.click();
+
+      expect(groupComp.chips.getChipsItems()).toEqual([]);
+      expect(groupComp.formCollapsed).toEqual(Observable.of(false));
+    }));
+  });
 });
 
 // declare a test component
@@ -102,55 +312,9 @@ describe('Dynamic Group component', () => {
 })
 class TestComponent {
 
-  group = new FormGroup({
-    date: new FormControl(),
-  });
+  group = FORM_GROUP_TEST_GROUP;
 
-  groupModelConfig = {
-    disabled: false,
-    errorMessages: {required: 'You must specify at least one author.'},
-    formConfiguration: [{
-      fields: [{
-        hints: 'Enter the name of the author.',
-        input: {type: 'onebox'},
-        label: 'Authors',
-        languageCodes: [],
-        mandatory: 'true',
-        mandatoryMessage: 'Required field!',
-        repeatable: false,
-        selectableMetadata: [{
-          authority: 'RPAuthority',
-          closed: false,
-          metadata: 'dc.contributor.author'
-        }],
-      } as FormFieldModel]
-    } as FormRowModel, {
-      fields: [{
-        hints: 'Enter the affiliation of the author.',
-        input: {type: 'onebox'},
-        label: 'Affiliation',
-        languageCodes: [],
-        mandatory: 'false',
-        repeatable: false,
-        selectableMetadata: [{
-          authority: 'OUAuthority',
-          closed: false,
-          metadata: 'local.contributor.affiliation'
-        }]
-      } as FormFieldModel]
-    } as FormRowModel],
-    id: 'date',
-    label: 'Date',
-    mandatoryField: 'dc.contributor.author',
-    name: 'date',
-    placeholder: 'Date',
-    readOnly: false,
-    relationFields: ['local.contributor.affiliation'],
-    required: true,
-    scopeUUID: '43fe1f8c-09a6-4fcf-9c78-5d4fed8f2c8f',
-    submissionScope: undefined,
-    validators: {required: null}
-  };
+  groupModelConfig = FORM_GROUP_TEST_MODEL_CONFIG;
 
   model = new DynamicGroupModel(this.groupModelConfig);
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index 2d5f33eac0..acb146c98c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -122,11 +122,12 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
           || this.selectedChipItem.item[model.name].value === PLACEHOLDER_PARENT_METADATA)
           ? null
           : this.selectedChipItem.item[model.name];
-        if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
-          model.valueUpdates.next(value.display);
-        } else {
-          model.valueUpdates.next(value);
-        }
+        // if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
+        //   model.valueUpdates.next(value.display);
+        // } else {
+        //   model.valueUpdates.next(value);
+        // }
+        model.valueUpdates.next(value);
       });
     });
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
index 59e442b4e9..f8f4c80385 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
@@ -13,11 +13,9 @@ export const PLACEHOLDER_PARENT_METADATA = '#PLACEHOLDER_PARENT_METADATA_VALUE#'
 export interface DynamicGroupModelConfig extends DsDynamicInputModelConfig {
   formConfiguration: FormRowModel[],
   mandatoryField: string,
-  name: string,
   relationFields: string[],
   scopeUUID: string,
   submissionScope: string;
-  value?: any;
 }
 
 /**

From 8f40ea0ea5efeb1aec10082f46b557799859d93a Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Fri, 29 Jun 2018 18:58:53 +0200
Subject: [PATCH 21/41] Added more tests and fixes

---
 .../date-picker/date-picker.component.spec.ts | 222 +++++++++++--
 .../date-picker/date-picker.component.ts      |   6 +-
 .../dynamic-group.component.spec.ts           |  19 +-
 .../lookup/dynamic-lookup.component.html      |   2 +-
 .../lookup/dynamic-lookup.component.spec.ts   | 300 ++++++++++++++++--
 .../models/lookup/dynamic-lookup.component.ts |   6 -
 ...dynamic-scrollable-dropdown.component.html |   4 +-
 ...amic-scrollable-dropdown.component.spec.ts | 198 ++++++++++--
 .../dynamic-scrollable-dropdown.component.ts  |   8 +-
 .../models/tag/dynamic-tag.component.html     |   6 +-
 .../models/tag/dynamic-tag.component.spec.ts  | 255 +++++++++++++--
 .../models/tag/dynamic-tag.component.ts       |  22 +-
 .../dynamic-typeahead.component.html          |   6 +-
 .../dynamic-typeahead.component.spec.ts       | 183 +++++++++--
 .../typeahead/dynamic-typeahead.component.ts  |   9 +-
 .../shared/testing/authority-service-stub.ts  |  13 +-
 16 files changed, 1035 insertions(+), 224 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
index f7d5fc1501..76cd0947bb 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -1,13 +1,17 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
-import 'rxjs/add/observable/of';
+import { FormControl, FormGroup } from '@angular/forms';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { SortablejsModule } from 'angular-sortablejs';
+import { DynamicFormValidationService } from '@ng-dynamic-forms/core';
+
 import { DsDatePickerComponent } from './date-picker.component';
-import { FormControl, FormGroup } from '@angular/forms';
 import { DynamicDsDatePickerModel } from './date-picker.model';
+import { FormBuilderService } from '../../../form-builder.service';
+
+import { FormComponent } from '../../../../form.component';
+import { FormService } from '../../../../form.service';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -19,10 +23,28 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Date Picker component', () => {
+export const DATE_TEST_GROUP = new FormGroup({
+  date: new FormControl()
+});
+
+export const DATE_TEST_MODEL_CONFIG = {
+  disabled: false,
+  errorMessages: {required: 'You must enter at least the year.'},
+  id: 'date',
+  label: 'Date',
+  name: 'date',
+  placeholder: 'Date',
+  readOnly: false,
+  required: true,
+  toggleIcon: 'fa fa-calendar'
+};
+
+describe('DsDatePickerComponent test suite', () => {
 
   let testComp: TestComponent;
+  let dateComp: DsDatePickerComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let dateFixture: ComponentFixture<DsDatePickerComponent>;
   let html;
 
   // async beforeEach
@@ -39,15 +61,20 @@ describe('Date Picker component', () => {
       providers: [
         ChangeDetectorRef,
         DsDatePickerComponent,
+        DynamicFormValidationService,
+        FormBuilderService,
+        FormComponent,
+        FormService
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
            <ds-date-picker
             [bindId]='bindId'
             [group]='group'
@@ -57,14 +84,167 @@ describe('Date Picker component', () => {
             (change)='onValueChange($event)'
             (focus)='onFocus($event)'></ds-date-picker>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDatePickerComponent', inject([DsDatePickerComponent], (app: DsDatePickerComponent) => {
+
+      expect(app).toBeDefined();
+    }));
+
   });
 
-  it('should create DsDatePickerComponent', inject([DsDatePickerComponent], (app: DsDatePickerComponent) => {
+  describe('', () => {
+    describe('when init model value is empty', () => {
+      beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+        dateFixture = TestBed.createComponent(DsDatePickerComponent);
+        dateComp = dateFixture.componentInstance; // FormComponent test instance
+        dateComp.group = DATE_TEST_GROUP;
+        dateComp.model = new DynamicDsDatePickerModel(DATE_TEST_MODEL_CONFIG);
+        dateFixture.detectChanges();
+      });
+
+      it('should init component properly', () => {
+        expect(dateComp.initialYear).toBeDefined();
+        expect(dateComp.initialMonth).toBeDefined();
+        expect(dateComp.initialDay).toBeDefined();
+        expect(dateComp.maxYear).toBeDefined();
+        expect(dateComp.disabledMonth).toBeTruthy();
+        expect(dateComp.disabledDay).toBeTruthy();
+      });
+
+      it('should set year and enable month field when year field is entered', () => {
+        const event = {
+          field: 'year',
+          value: '1983'
+        };
+        dateComp.onChange(event);
+
+        expect(dateComp.year).toEqual('1983');
+        expect(dateComp.disabledMonth).toBeFalsy();
+        expect(dateComp.disabledDay).toBeTruthy();
+      });
+
+      it('should set month and enable day field when month field is entered', () => {
+        const event = {
+          field: 'month',
+          value: '11'
+        };
+
+        dateComp.year = '1983';
+        dateComp.disabledMonth = false;
+        dateFixture.detectChanges();
+
+        dateComp.onChange(event);
+
+        expect(dateComp.year).toEqual('1983');
+        expect(dateComp.month).toEqual('11');
+        expect(dateComp.disabledMonth).toBeFalsy();
+        expect(dateComp.disabledDay).toBeFalsy();
+      });
+
+      it('should set day when day field is entered', () => {
+        const event = {
+          field: 'day',
+          value: '18'
+        };
+
+        dateComp.year = '1983';
+        dateComp.month = '11';
+        dateComp.disabledMonth = false;
+        dateComp.disabledDay = false;
+        dateFixture.detectChanges();
+
+        dateComp.onChange(event);
+
+        expect(dateComp.year).toEqual('1983');
+        expect(dateComp.month).toEqual('11');
+        expect(dateComp.day).toEqual('18');
+        expect(dateComp.disabledMonth).toBeFalsy();
+        expect(dateComp.disabledDay).toBeFalsy();
+      });
+
+      it('should emit blur Event onBlur', () => {
+        spyOn(dateComp.blur, 'emit');
+        dateComp.onBlur(new Event('blur'));
+        expect(dateComp.blur.emit).toHaveBeenCalled();
+      });
+
+      it('should emit focus Event onFocus', () => {
+        spyOn(dateComp.focus, 'emit');
+        dateComp.onFocus(new Event('focus'));
+        expect(dateComp.focus.emit).toHaveBeenCalled();
+      });
+    });
+
+    describe('when init model value is not empty', () => {
+      beforeEach(() => {
+
+        dateFixture = TestBed.createComponent(DsDatePickerComponent);
+        dateComp = dateFixture.componentInstance; // FormComponent test instance
+        dateComp.group = DATE_TEST_GROUP;
+        dateComp.model = new DynamicDsDatePickerModel(DATE_TEST_MODEL_CONFIG);
+        dateComp.model.value = '1983-11-18';
+        dateFixture.detectChanges();
+      });
+
+      it('should init component properly', () => {
+        expect(dateComp.initialYear).toBeDefined();
+        expect(dateComp.initialMonth).toBeDefined();
+        expect(dateComp.initialDay).toBeDefined();
+        expect(dateComp.maxYear).toBeDefined();
+        expect(dateComp.year).toBe(1983);
+        expect(dateComp.month).toBe(11);
+        expect(dateComp.day).toBe(18);
+        expect(dateComp.disabledMonth).toBeFalsy();
+        expect(dateComp.disabledDay).toBeFalsy();
+      });
+
+      it('should disable month and day fields when year field is canceled', () => {
+        const event = {
+          field: 'year',
+          value: null
+        };
+        dateComp.onChange(event);
+
+        expect(dateComp.year).not.toBeDefined();
+        expect(dateComp.month).not.toBeDefined();
+        expect(dateComp.day).not.toBeDefined();
+        expect(dateComp.disabledMonth).toBeTruthy();
+        expect(dateComp.disabledDay).toBeTruthy();
+      });
+
+      it('should disable day field when month field is canceled', () => {
+        const event = {
+          field: 'month',
+          value: null
+        };
+        dateComp.onChange(event);
+
+        expect(dateComp.year).toBe(1983);
+        expect(dateComp.month).not.toBeDefined();
+        expect(dateComp.day).not.toBeDefined();
+        expect(dateComp.disabledMonth).toBeFalsy();
+        expect(dateComp.disabledDay).toBeTruthy();
+      });
+
+      it('should not disable day field when day field is canceled', () => {
+        const event = {
+          field: 'day',
+          value: null
+        };
+        dateComp.onChange(event);
+
+        expect(dateComp.year).toBe(1983);
+        expect(dateComp.month).toBe(11);
+        expect(dateComp.day).not.toBeDefined();
+        expect(dateComp.disabledMonth).toBeFalsy();
+        expect(dateComp.disabledDay).toBeFalsy();
+      });
+    });
+  });
 
 });
 
@@ -75,23 +255,9 @@ describe('Date Picker component', () => {
 })
 class TestComponent {
 
-  group = new FormGroup({
-    date: new FormControl(),
-  });
+  group = DATE_TEST_GROUP;
 
-  inputDateModelConfig = {
-    disabled: false,
-    errorMessages: { required: 'You must enter at least the year.' },
-    id: 'date',
-    label: 'Date',
-    name: 'date',
-    placeholder: 'Date',
-    readOnly: false,
-    required: true,
-    toggleIcon: 'fa fa-calendar'
-  };
-
-  model = new DynamicDsDatePickerModel(this.inputDateModelConfig);
+  model = new DynamicDsDatePickerModel(DATE_TEST_MODEL_CONFIG);
 
   showErrorMessages = false;
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 17a4e9e750..741d86fab9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -31,9 +31,9 @@ export class DsDatePickerComponent implements OnInit {
   initialMonth: number;
   initialDay: number;
 
-  year: number;
-  month: number;
-  day: number;
+  year: any;
+  month: any;
+  day: any;
 
   minYear: 0;
   maxYear: number;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
index 0ba55ef982..55f98df8ac 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -3,7 +3,10 @@ import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/c
 import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+import { DynamicFormValidationService } from '@ng-dynamic-forms/core';
+import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
@@ -16,15 +19,11 @@ import { FormService } from '../../../../form.service';
 import { GlobalConfig } from '../../../../../../../config/global-config.interface';
 import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { FormComponent } from '../../../../form.component';
-import { DynamicFormValidationService } from '@ng-dynamic-forms/core';
-import { Store } from '@ngrx/store';
 import { AppState } from '../../../../../../app.reducer';
-import { Observable } from 'rxjs/Observable';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Chips } from '../../../../../chips/models/chips.model';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { DsDynamicInputModel } from '../ds-dynamic-input.model';
-import { By } from '@angular/platform-browser';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -202,7 +201,6 @@ describe('DsDynamicGroupComponent test suite', () => {
       }];
       groupFixture.detectChanges();
 
-      const de = groupFixture.debugElement.queryAll(By.css('button'));
       const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
       const btnEl = buttons[0];
       btnEl.click();
@@ -219,7 +217,6 @@ describe('DsDynamicGroupComponent test suite', () => {
 
       groupFixture.detectChanges();
 
-      const de = groupFixture.debugElement.queryAll(By.css('button'));
       const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
       const btnEl = buttons[2];
       btnEl.click();
@@ -231,7 +228,7 @@ describe('DsDynamicGroupComponent test suite', () => {
   });
 
   describe('when init model value is not empty', () => {
-    beforeEach(inject([FormBuilderService], (service: FormBuilderService) => {
+    beforeEach(() => {
 
       groupFixture = TestBed.createComponent(DsDynamicGroupComponent);
       groupComp = groupFixture.componentInstance; // FormComponent test instance
@@ -246,7 +243,7 @@ describe('DsDynamicGroupComponent test suite', () => {
       groupComp.showErrorMessages = false;
       groupFixture.detectChanges();
 
-    }));
+    });
 
     afterEach(() => {
       groupFixture.destroy();
@@ -279,7 +276,6 @@ describe('DsDynamicGroupComponent test suite', () => {
       }];
       groupFixture.detectChanges();
 
-      const de = groupFixture.debugElement.queryAll(By.css('button'));
       const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
       const btnEl = buttons[0];
       btnEl.click();
@@ -290,18 +286,17 @@ describe('DsDynamicGroupComponent test suite', () => {
       expect(groupComp.formCollapsed).toEqual(Observable.of(true));
     }));
 
-    it('should delete existing chips item', inject([FormBuilderService], (service: FormBuilderService) => {
+    it('should delete existing chips item', () => {
       groupComp.onChipSelected(0);
       groupFixture.detectChanges();
 
-      const de = groupFixture.debugElement.queryAll(By.css('button'));
       const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
       const btnEl = buttons[1];
       btnEl.click();
 
       expect(groupComp.chips.getChipsItems()).toEqual([]);
       expect(groupComp.formCollapsed).toEqual(Observable.of(false));
-    }));
+    });
   });
 });
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 710639ff88..bd18ef3a1f 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -69,7 +69,7 @@
                   [attr.autoComplete]="model.autoComplete"
                   [class.is-invalid]="showErrorMessages"
                   [dynamicId]="bindId && model.id"
-                  [name]="name2"
+                  [name]="model.name + '_2'"
                   [type]="model.inputType"
                   [(ngModel)]="secondInputValue"
                   [disabled]="firstInputValue.length === 0 || isInputDisabled()"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
index b5e76f7b15..b2cce76be6 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
@@ -1,12 +1,12 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick, } from '@angular/core/testing';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
-import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
+import { DynamicFormsCoreModule, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
@@ -14,6 +14,13 @@ import { DsDynamicLookupComponent } from './dynamic-lookup.component';
 import { DynamicLookupModel } from './dynamic-lookup.model';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { TranslateModule } from '@ngx-translate/core';
+import { FormBuilderService } from '../../../form-builder.service';
+import { FormService } from '../../../../form.service';
+import { FormComponent } from '../../../../form.component';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { By } from '@angular/platform-browser';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
+import { DynamicLookupNameModel } from './dynamic-lookup-name.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -25,15 +32,67 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
+export const LOOKUP_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'lookup',
+    name: 'RPAuthority',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  errorMessages: {required: 'Required field.'},
+  id: 'lookup',
+  label: 'Author',
+  maxOptions: 10,
+  name: 'lookup',
+  placeholder: 'Author',
+  readOnly: false,
+  required: true,
+  repeatable: true,
+  separator: ',',
+  validators: {required: null},
+  value: undefined
+};
+
+export const LOOKUP_NAME_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'lookup-name',
+    name: 'RPAuthority',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  errorMessages: {required: 'Required field.'},
+  id: 'lookupName',
+  label: 'Author',
+  maxOptions: 10,
+  name: 'lookupName',
+  placeholder: 'Author',
+  readOnly: false,
+  required: true,
+  repeatable: true,
+  separator: ',',
+  validators: {required: null},
+  value: undefined
+};
+
+export const LOOKUP_TEST_GROUP = new FormGroup({
+  lookup: new FormControl(),
+  lookupName: new FormControl()
+});
+
 describe('Dynamic Lookup component', () => {
 
   let testComp: TestComponent;
+  let lookupComp: DsDynamicLookupComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let lookupFixture: ComponentFixture<DsDynamicLookupComponent>;
   let html;
 
+  const authorityServiceStub = new AuthorityServiceStub();
+
   // async beforeEach
   beforeEach(async(() => {
-    const authorityServiceStub = new AuthorityServiceStub();
 
     TestBed.configureTestingModule({
       imports: [
@@ -52,6 +111,10 @@ describe('Dynamic Lookup component', () => {
       providers: [
         ChangeDetectorRef,
         DsDynamicLookupComponent,
+        DynamicFormValidationService,
+        FormBuilderService,
+        FormComponent,
+        FormService,
         {provide: AuthorityService, useValue: authorityServiceStub},
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
@@ -59,9 +122,10 @@ describe('Dynamic Lookup component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
       <ds-dynamic-lookup
         [bindId]="bindId"
         [group]="group"
@@ -71,15 +135,203 @@ describe('Dynamic Lookup component', () => {
         (change)="onValueChange($event)"
         (focus)="onFocus($event)"></ds-dynamic-lookup>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicLookupComponent', inject([DsDynamicLookupComponent], (app: DsDynamicLookupComponent) => {
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicLookupComponent', inject([DsDynamicLookupComponent], (app: DsDynamicLookupComponent) => {
+  describe('when model is DynamicLookupModel', () => {
 
-    expect(app).toBeDefined();
-  }));
+    describe('', () => {
+      beforeEach(() => {
 
+        lookupFixture = TestBed.createComponent(DsDynamicLookupComponent);
+        lookupComp = lookupFixture.componentInstance; // FormComponent test instance
+        lookupComp.group = LOOKUP_TEST_GROUP;
+        lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG);
+        lookupFixture.detectChanges();
+      });
+
+      it('should render only an input element', () => {
+        const de = lookupFixture.debugElement.queryAll(By.css('input.form-control'));
+        expect(de.length).toBe(1);
+      });
+
+    });
+
+    describe('and init model value is empty', () => {
+      beforeEach(() => {
+
+        lookupFixture = TestBed.createComponent(DsDynamicLookupComponent);
+        lookupComp = lookupFixture.componentInstance; // FormComponent test instance
+        lookupComp.group = LOOKUP_TEST_GROUP;
+        lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG);
+        lookupFixture.detectChanges();
+      });
+
+      it('should init component properly', () => {
+        expect(lookupComp.firstInputValue).toBe('');
+      });
+
+      it('should return search results', fakeAsync(() => {
+        const de = lookupFixture.debugElement.queryAll(By.css('button'));
+        const btnEl = de[0].nativeElement;
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+
+        lookupComp.firstInputValue = 'test';
+        lookupFixture.detectChanges();
+
+        btnEl.click();
+        tick();
+        lookupFixture.detectChanges();
+        results$.subscribe((results) => {
+          expect(lookupComp.optionsList).toEqual(results.payload);
+        })
+
+      }));
+
+      it('should select a results entry properly', fakeAsync(() => {
+        let de = lookupFixture.debugElement.queryAll(By.css('button'));
+        const btnEl = de[0].nativeElement;
+        const selectedValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1});
+        spyOn(lookupComp.change, 'emit');
+
+        lookupComp.firstInputValue = 'test';
+        lookupFixture.detectChanges();
+        btnEl.click();
+        tick();
+        lookupFixture.detectChanges();
+        de = lookupFixture.debugElement.queryAll(By.css('button.dropdown-item'));
+        const entryEl = de[0].nativeElement;
+        entryEl.click();
+
+        expect(lookupComp.firstInputValue).toEqual('one');
+        expect(lookupComp.model.value).toEqual(selectedValue);
+        expect(lookupComp.change.emit).toHaveBeenCalled();
+      }));
+
+      it('should set model.value on input type when AuthorityOptions.closed is false', fakeAsync(() => {
+        lookupComp.firstInputValue = 'test';
+        lookupFixture.detectChanges();
+
+        lookupComp.onInput(new Event('input'));
+        expect(lookupComp.model.value).toEqual(new FormFieldMetadataValueObject('test'))
+
+      }));
+
+      it('should not set model.value on input type when AuthorityOptions.closed is true', () => {
+        lookupComp.model.authorityOptions.closed = true;
+        lookupComp.firstInputValue = 'test';
+        lookupFixture.detectChanges();
+
+        lookupComp.onInput(new Event('input'));
+        expect(lookupComp.model.value).not.toBeDefined();
+
+      });
+    });
+
+    describe('and init model value is not empty', () => {
+      beforeEach(() => {
+
+        lookupFixture = TestBed.createComponent(DsDynamicLookupComponent);
+        lookupComp = lookupFixture.componentInstance; // FormComponent test instance
+        lookupComp.group = LOOKUP_TEST_GROUP;
+        lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG);
+        lookupComp.model.value = new FormFieldMetadataValueObject('test', null, 'test001');
+        lookupFixture.detectChanges();
+
+        // spyOn(store, 'dispatch');
+      });
+
+      it('should init component properly', () => {
+        expect(lookupComp.firstInputValue).toBe('test')
+      });
+    });
+  });
+
+  describe('when model is DynamicLookupNameModel', () => {
+
+    describe('', () => {
+      beforeEach(() => {
+
+        lookupFixture = TestBed.createComponent(DsDynamicLookupComponent);
+        lookupComp = lookupFixture.componentInstance; // FormComponent test instance
+        lookupComp.group = LOOKUP_TEST_GROUP;
+        lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG);
+        lookupFixture.detectChanges();
+
+        // spyOn(store, 'dispatch');
+      });
+
+      it('should render two input element', () => {
+        const de = lookupFixture.debugElement.queryAll(By.css('input.form-control'));
+        expect(de.length).toBe(2);
+      });
+
+    });
+
+    describe('and init model value is empty', () => {
+
+      beforeEach(() => {
+
+        lookupFixture = TestBed.createComponent(DsDynamicLookupComponent);
+        lookupComp = lookupFixture.componentInstance; // FormComponent test instance
+        lookupComp.group = LOOKUP_TEST_GROUP;
+        lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG);
+        lookupFixture.detectChanges();
+      });
+
+      it('should select a results entry properly', fakeAsync(() => {
+        const payload = [
+          Object.assign(new AuthorityValueModel(), {id: 1, display: 'Name, Lastname', value: 1}),
+          Object.assign(new AuthorityValueModel(), {id: 2, display: 'NameTwo, LastnameTwo', value: 2}),
+        ];
+        let de = lookupFixture.debugElement.queryAll(By.css('button'));
+        const btnEl = de[0].nativeElement;
+        const selectedValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'Name, Lastname', value: 1});
+
+        spyOn(lookupComp.change, 'emit');
+        authorityServiceStub.setNewPayload(payload);
+        lookupComp.firstInputValue = 'test';
+        lookupFixture.detectChanges();
+        btnEl.click();
+        tick();
+        lookupFixture.detectChanges();
+        de = lookupFixture.debugElement.queryAll(By.css('button.dropdown-item'));
+        const entryEl = de[0].nativeElement;
+        entryEl.click();
+
+        expect(lookupComp.firstInputValue).toEqual('Name');
+        expect(lookupComp.secondInputValue).toEqual('Lastname');
+        expect(lookupComp.model.value).toEqual(selectedValue);
+        expect(lookupComp.change.emit).toHaveBeenCalled();
+      }));
+
+    });
+
+    describe('and init model value is not empty', () => {
+      beforeEach(() => {
+
+        lookupFixture = TestBed.createComponent(DsDynamicLookupComponent);
+        lookupComp = lookupFixture.componentInstance; // FormComponent test instance
+        lookupComp.group = LOOKUP_TEST_GROUP;
+        lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG);
+        lookupComp.model.value = new FormFieldMetadataValueObject('Name, Lastname', null, 'test001');
+        lookupFixture.detectChanges();
+
+      });
+
+      it('should init component properly', () => {
+        expect(lookupComp.firstInputValue).toBe('Name');
+        expect(lookupComp.secondInputValue).toBe('Lastname');
+      });
+    });
+
+  });
 });
 
 // declare a test component
@@ -89,31 +341,9 @@ describe('Dynamic Lookup component', () => {
 })
 class TestComponent {
 
-  group: FormGroup = new FormGroup({
-    lookup: new FormControl(),
-  });
+  group: FormGroup = LOOKUP_TEST_GROUP;
 
-  inputLookupModelConfig = {
-    authorityOptions: {
-      closed: false,
-      metadata: 'lookup',
-      name: 'RPAuthority',
-      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
-    } as AuthorityOptions,
-    disabled: false,
-    errorMessages: {required: 'Required field.'},
-    id: 'lookup',
-    label: 'Author',
-    maxOptions: 10,
-    name: 'lookup',
-    placeholder: 'Author',
-    readOnly: false,
-    required: true,
-    repeatable: true,
-    separator: ',',
-    validators: {required: null},
-    value: undefined
-  };
+  inputLookupModelConfig = LOOKUP_TEST_MODEL_CONFIG;
 
   model = new DynamicLookupModel(this.inputLookupModelConfig);
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
index a0a9f3be31..4e88e9c78e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
@@ -32,7 +32,6 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
   public loading = false;
   public pageInfo: PageInfo;
   public optionsList: any;
-  public name2: string;
 
   protected searchOptions: IntegrationSearchOptions;
   protected sub: Subscription;
@@ -50,11 +49,6 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit {
       this.model.maxOptions,
       1);
 
-    // Switch Lookup/LookupName
-    if (this.isLookupName()) {
-      this.name2 = this.model.name + '2';
-    }
-
     this.setInputsValue(this.model.value);
 
     this.model.valueUpdates
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index aed4e16bca..6a5e588610 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -7,9 +7,9 @@
          [readonly]="model.readOnly"
          [type]="model.inputType"
          [value]="formatItemForInput(model.value)"
-         (blur)="onBlurEvent($event)"
+         (blur)="onBlur($event)"
          (click)="$event.stopPropagation(); openDropdown(sdRef);"
-         (focus)="onFocusEvent($event)"
+         (focus)="onFocus($event)"
          (keypress)="$event.preventDefault()">
     <button aria-describedby="collectionControlsMenuLabel"
             class="ds-form-input-btn  btn btn-outline-primary"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
index 0d79d71e8b..de35d300f5 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -1,7 +1,7 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick, } from '@angular/core/testing';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
@@ -14,6 +14,11 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { TranslateModule } from '@ngx-translate/core';
 import { DsDynamicScrollableDropdownComponent } from './dynamic-scrollable-dropdown.component';
 import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model';
+import { DsDynamicTypeaheadComponent } from '../typeahead/dynamic-typeahead.component';
+import { DynamicTypeaheadModel } from '../typeahead/dynamic-typeahead.model';
+import { TYPEAHEAD_TEST_GROUP, TYPEAHEAD_TEST_MODEL_CONFIG } from '../typeahead/dynamic-typeahead.component.spec';
+import { By } from '@angular/platform-browser';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -25,15 +30,48 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
+function hasClass(element: any, className: string): boolean {
+  const classes = element.getAttribute('class');
+  return classes.split(' ').indexOf(className) !== -1;
+}
+
+export const SD_TEST_GROUP = new FormGroup({
+  dropdown: new FormControl(),
+});
+
+export const SD_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'dropdown',
+    name: 'common_iso_languages',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  errorMessages: {required: 'Required field.'},
+  id: 'dropdown',
+  label: 'Language',
+  maxOptions: 10,
+  name: 'dropdown',
+  placeholder: 'Language',
+  readOnly: false,
+  required: false,
+  repeatable: false,
+  value: undefined
+};
+
 describe('Dynamic Dynamic Scrollable Dropdown component', () => {
 
   let testComp: TestComponent;
+  let scrollableDropdownComp: DsDynamicScrollableDropdownComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let scrollableDropdownFixture: ComponentFixture<DsDynamicScrollableDropdownComponent>;
   let html;
+  let modelValue;
+
+  const authorityServiceStub = new AuthorityServiceStub();
 
   // async beforeEach
   beforeEach(async(() => {
-    const authorityServiceStub = new AuthorityServiceStub();
 
     TestBed.configureTestingModule({
       imports: [
@@ -59,9 +97,10 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
       <ds-dynamic-scrollable-dropdown [bindId]="bindId"
                                       [group]="group"
                                       [model]="model"
@@ -70,15 +109,128 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
                                       (change)="onValueChange($event)"
                                       (focus)="onFocus($event)"></ds-dynamic-scrollable-dropdown>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicScrollableDropdownComponent', inject([DsDynamicScrollableDropdownComponent], (app: DsDynamicScrollableDropdownComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicScrollableDropdownComponent', inject([DsDynamicScrollableDropdownComponent], (app: DsDynamicScrollableDropdownComponent) => {
+  describe('', () => {
+    describe('when init model value is empty', () => {
+      beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+        scrollableDropdownFixture = TestBed.createComponent(DsDynamicScrollableDropdownComponent);
+        scrollableDropdownComp = scrollableDropdownFixture.componentInstance; // FormComponent test instance
+        scrollableDropdownComp.group = SD_TEST_GROUP;
+        scrollableDropdownComp.model = new DynamicScrollableDropdownModel(SD_TEST_MODEL_CONFIG);
+        scrollableDropdownFixture.detectChanges();
+      });
 
+      afterEach(() => {
+        scrollableDropdownFixture.destroy();
+        scrollableDropdownComp = null;
+      });
+
+      it('should init component properly', () => {
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+        expect(scrollableDropdownComp.optionsList).toBeDefined();
+        results$.subscribe((results) => {
+          expect(scrollableDropdownComp.optionsList).toEqual(results.payload);
+        })
+      });
+
+      it('should display dropdown menu entries', () => {
+        const de = scrollableDropdownFixture.debugElement.query(By.css('button.ds-form-input-btn'));
+        const btnEl = de.nativeElement;
+
+        const deMenu = scrollableDropdownFixture.debugElement.query(By.css('div.scrollable-dropdown-menu'));
+        const menuEl = deMenu.nativeElement;
+
+        btnEl.click();
+        scrollableDropdownFixture.detectChanges();
+
+        expect(hasClass(menuEl, 'show')).toBeTruthy();
+      });
+
+      it('should fetch the next set of results when the user scroll to the end of the list', fakeAsync(() => {
+        scrollableDropdownComp.pageInfo.currentPage = 1;
+        scrollableDropdownComp.pageInfo.totalPages = 2;
+
+        scrollableDropdownFixture.detectChanges();
+
+        scrollableDropdownComp.onScroll();
+        tick();
+
+        expect(scrollableDropdownComp.optionsList.length).toBe(4);
+      }));
+
+      it('should select a results entry properly', fakeAsync(() => {
+        const selectedValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1});
+
+        let de: any = scrollableDropdownFixture.debugElement.query(By.css('button.ds-form-input-btn'));
+        let btnEl = de.nativeElement;
+
+        de = scrollableDropdownFixture.debugElement.query(By.css('div.scrollable-dropdown-menu'));
+        const menuEl = de.nativeElement;
+
+        btnEl.click();
+        scrollableDropdownFixture.detectChanges();
+
+        de = scrollableDropdownFixture.debugElement.queryAll(By.css('button.dropdown-item'));
+        btnEl = de[0].nativeElement;
+
+        btnEl.click();
+
+        scrollableDropdownFixture.detectChanges();
+
+        expect((scrollableDropdownComp.model as any).value).toEqual(selectedValue);
+      }));
+
+      it('should emit blur Event onBlur', () => {
+        spyOn(scrollableDropdownComp.blur, 'emit');
+        scrollableDropdownComp.onBlur(new Event('blur'));
+        expect(scrollableDropdownComp.blur.emit).toHaveBeenCalled();
+      });
+
+      it('should emit focus Event onFocus', () => {
+        spyOn(scrollableDropdownComp.focus, 'emit');
+        scrollableDropdownComp.onFocus(new Event('focus'));
+        expect(scrollableDropdownComp.focus.emit).toHaveBeenCalled();
+      });
+
+    });
+
+    describe('when init model value is not empty', () => {
+      beforeEach(() => {
+
+        scrollableDropdownFixture = TestBed.createComponent(DsDynamicScrollableDropdownComponent);
+        scrollableDropdownComp = scrollableDropdownFixture.componentInstance; // FormComponent test instance
+        scrollableDropdownComp.group = SD_TEST_GROUP;
+        modelValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1});
+        scrollableDropdownComp.model = new DynamicScrollableDropdownModel(SD_TEST_MODEL_CONFIG);
+        scrollableDropdownComp.model.value = modelValue;
+        scrollableDropdownFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        scrollableDropdownFixture.destroy();
+        scrollableDropdownComp = null;
+      });
+
+      it('should init component properly', () => {
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+        expect(scrollableDropdownComp.optionsList).toBeDefined();
+        results$.subscribe((results) => {
+          expect(scrollableDropdownComp.optionsList).toEqual(results.payload);
+          expect(scrollableDropdownComp.model.value).toEqual(modelValue);
+        })
+      });
+    });
+  });
 });
 
 // declare a test component
@@ -88,31 +240,9 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
 })
 class TestComponent {
 
-  group: FormGroup = new FormGroup({
-    lookup: new FormControl(),
-  });
+  group: FormGroup = SD_TEST_GROUP;
 
-  inputDropdownModelConfig = {
-    authorityOptions: {
-      closed: false,
-      metadata: 'lookup',
-      name: 'common_iso_languages',
-      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
-    } as AuthorityOptions,
-    disabled: false,
-    errorMessages: {required: 'Required field.'},
-    id: 'dropdown',
-    label: 'Language',
-    maxOptions: 10,
-    name: 'dropdown',
-    placeholder: 'Language',
-    readOnly: false,
-    required: false,
-    repeatable: false,
-    value: undefined
-  };
-
-  model = new DynamicScrollableDropdownModel(this.inputDropdownModelConfig);
+  model = new DynamicScrollableDropdownModel(SD_TEST_MODEL_CONFIG);
 
   showErrorMessages = false;
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index 91aad741b6..1c8bf15f1a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -76,19 +76,17 @@ export class DsDynamicScrollableDropdownComponent implements OnInit {
     }
   }
 
-  onBlurEvent(event: Event) {
+  onBlur(event: Event) {
     this.blur.emit(event);
   }
 
-  onFocusEvent(event) {
+  onFocus(event) {
     this.focus.emit(event);
   }
 
   onSelect(event) {
     this.group.markAsDirty();
-    // (this.model as DynamicScrollableDropdownModel).parent as
-    // this.group.get(this.model.id).setValue(event);
-    this.model.valueUpdates.next(event)
+    this.model.valueUpdates.next(event);
     this.change.emit(event);
   }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index 5c7a2b9713..9a6ec43a40 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -12,7 +12,7 @@
          [placeholder]="model.label"
          [readonly]="model.readOnly"
          [(ngModel)]="currentValue"
-         (blur)="onBlurEvent($event)"
+         (blur)="onBlur($event)"
          (keypress)="preventEventsPropagation($event)"
          (keydown)="preventEventsPropagation($event)"
          (keyup)="onKeyUp($event)" />
@@ -33,8 +33,8 @@
          [readonly]="model.readOnly"
          [resultTemplate]="rt"
          [type]="model.inputType"
-         (blur)="onBlurEvent($event)"
-         (focus)="onFocusEvent($event)"
+         (blur)="onBlur($event)"
+         (focus)="onFocus($event)"
          (change)="$event.stopPropagation()"
          (input)="onInput($event)"
          (selectItem)="onSelectItem($event)"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
index f08b317833..5788c00062 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
@@ -1,18 +1,24 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, flush, inject, TestBed, } from '@angular/core/testing';
 
-import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
 import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { NgbModule, NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of'
+
+import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
 import { DsDynamicTagComponent } from './dynamic-tag.component';
 import { DynamicTagModel } from './dynamic-tag.model';
 import { GlobalConfig } from '../../../../../../../config/global-config.interface';
 import { GLOBAL_CONFIG } from '../../../../../../../config';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { Chips } from '../../../../../chips/models/chips.model';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -24,11 +30,50 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Dynamic Dynamic Tag component', () => {
+function createKeyUpEvent(key: number) {
+  /* tslint:disable:no-empty */
+  const event = {
+    keyCode: key, preventDefault: () => {
+    }, stopPropagation: () => {
+    }
+  };
+  /* tslint:enable:no-empty */
+  spyOn(event, 'preventDefault');
+  spyOn(event, 'stopPropagation');
+  return event;
+}
+
+export const TAG_TEST_GROUP = new FormGroup({
+  tag: new FormControl(),
+});
+
+export const TAG_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'tag',
+    name: 'common_iso_languages',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  id: 'tag',
+  label: 'Keywords',
+  minChars: 3,
+  name: 'tag',
+  placeholder: 'Keywords',
+  readOnly: false,
+  required: false,
+  repeatable: false
+};
+
+describe('DsDynamicTagComponent test suite', () => {
 
   let testComp: TestComponent;
+  let tagComp: DsDynamicTagComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let tagFixture: ComponentFixture<DsDynamicTagComponent>;
   let html;
+  let chips: Chips;
+  let modelValue: any;
 
   // async beforeEach
   beforeEach(async(() => {
@@ -57,9 +102,10 @@ describe('Dynamic Dynamic Tag component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
       <ds-dynamic-tag [bindId]="bindId"
                       [group]="group"
                       [model]="model"
@@ -68,15 +114,176 @@ describe('Dynamic Dynamic Tag component', () => {
                       (change)="onValueChange($event)"
                       (focus)="onFocus($event)"></ds-dynamic-tag>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicTagComponent', inject([DsDynamicTagComponent], (app: DsDynamicTagComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicTagComponent', inject([DsDynamicTagComponent], (app: DsDynamicTagComponent) => {
+  describe('when authorityOptions are setted', () => {
+    describe('and init model value is empty', () => {
+      beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+        tagFixture = TestBed.createComponent(DsDynamicTagComponent);
+        tagComp = tagFixture.componentInstance; // FormComponent test instance
+        tagComp.group = TAG_TEST_GROUP;
+        tagComp.model = new DynamicTagModel(TAG_TEST_MODEL_CONFIG);
+        tagFixture.detectChanges();
+      });
 
+      afterEach(() => {
+        tagFixture.destroy();
+        tagComp = null;
+      });
+
+      it('should init component properly', () => {
+        chips = new Chips([], 'display');
+        expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+        expect(tagComp.searchOptions).toBeDefined();
+      });
+
+      it('should search when 3+ characters typed', fakeAsync(() => {
+        spyOn((tagComp as any).authorityService, 'getEntriesByName').and.callThrough();
+
+        tagComp.search(Observable.of('test')).subscribe(() => {
+          expect((tagComp as any).authorityService.getEntriesByName).toHaveBeenCalled();
+        });
+      }));
+
+      it('should select a results entry properly', fakeAsync(() => {
+        modelValue = [
+          Object.assign(new AuthorityValueModel(), {id: 1, display: 'Name, Lastname', value: 1})
+        ];
+        const event: NgbTypeaheadSelectItemEvent = {
+          item: Object.assign(new AuthorityValueModel(), {id: 1, display: 'Name, Lastname', value: 1}),
+          preventDefault: () => {
+            return;
+          }
+        };
+        spyOn(tagComp.change, 'emit');
+
+        tagComp.onSelectItem(event);
+
+        tagFixture.detectChanges();
+        flush();
+
+        expect(tagComp.chips.getChipsItems()).toEqual(modelValue);
+        expect(tagComp.model.value).toEqual(modelValue);
+        expect(tagComp.currentValue).toBeNull();
+        expect(tagComp.change.emit).toHaveBeenCalled();
+      }));
+
+      it('should emit blur Event onBlur', () => {
+        spyOn(tagComp.blur, 'emit');
+        tagComp.onBlur(new Event('blur'));
+        expect(tagComp.blur.emit).toHaveBeenCalled();
+      });
+
+      it('should emit focus Event onFocus', () => {
+        spyOn(tagComp.focus, 'emit');
+        tagComp.onFocus(new Event('focus'));
+        expect(tagComp.focus.emit).toHaveBeenCalled();
+      });
+
+      it('should emit change Event onBlur when currentValue is not empty', fakeAsync(() => {
+        tagComp.currentValue = 'test value';
+        tagFixture.detectChanges();
+        spyOn(tagComp.blur, 'emit');
+        spyOn(tagComp.change, 'emit');
+        tagComp.onBlur(new Event('blur'));
+
+        tagFixture.detectChanges();
+        flush();
+
+        expect(tagComp.change.emit).toHaveBeenCalled();
+        expect(tagComp.blur.emit).toHaveBeenCalled();
+      }));
+    });
+
+    describe('and init model value is not empty', () => {
+      beforeEach(() => {
+
+        tagFixture = TestBed.createComponent(DsDynamicTagComponent);
+        tagComp = tagFixture.componentInstance; // FormComponent test instance
+        tagComp.group = TAG_TEST_GROUP;
+        tagComp.model = new DynamicTagModel(TAG_TEST_MODEL_CONFIG);
+        modelValue = [
+          new FormFieldMetadataValueObject('a', null, 'test001'),
+          new FormFieldMetadataValueObject('b', null, 'test002'),
+          new FormFieldMetadataValueObject('c', null, 'test003'),
+        ];
+        tagComp.model.value = modelValue;
+        tagFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        tagFixture.destroy();
+        tagComp = null;
+      });
+
+      it('should init component properly', () => {
+        chips = new Chips(modelValue, 'display');
+        expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+        expect(tagComp.searchOptions).toBeDefined();
+      });
+    });
+
+  });
+
+  describe('when authorityOptions are not setted', () => {
+    describe('and init model value is empty', () => {
+      beforeEach(() => {
+
+        tagFixture = TestBed.createComponent(DsDynamicTagComponent);
+        tagComp = tagFixture.componentInstance; // FormComponent test instance
+        tagComp.group = TAG_TEST_GROUP;
+        const config = TAG_TEST_MODEL_CONFIG;
+        config.authorityOptions = null;
+        tagComp.model = new DynamicTagModel(config);
+        tagFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        tagFixture.destroy();
+        tagComp = null;
+      });
+
+      it('should init component properly', () => {
+        chips = new Chips([], 'display');
+        expect(tagComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+        expect(tagComp.searchOptions).not.toBeDefined();
+      });
+
+      it('should add an item on ENTER or key press is \',\' or \';\'', fakeAsync(() => {
+        let event = createKeyUpEvent(13);
+        tagComp.currentValue = 'test value';
+
+        tagFixture.detectChanges();
+        tagComp.onKeyUp(event);
+
+        flush();
+
+        expect(tagComp.model.value).toEqual(['test value']);
+        expect(tagComp.currentValue).toBeNull();
+
+        event = createKeyUpEvent(188);
+        tagComp.currentValue = 'test value';
+
+        tagFixture.detectChanges();
+        tagComp.onKeyUp(event);
+
+        flush();
+
+        expect(tagComp.model.value).toEqual(['test value']);
+        expect(tagComp.currentValue).toBeNull();
+      }));
+
+    });
+  });
 });
 
 // declare a test component
@@ -86,29 +293,9 @@ describe('Dynamic Dynamic Tag component', () => {
 })
 class TestComponent {
 
-  group: FormGroup = new FormGroup({
-    lookup: new FormControl(),
-  });
+  group: FormGroup = TAG_TEST_GROUP;
 
-  inputTagModelConfig = {
-    authorityOptions: {
-      closed: false,
-      metadata: 'tag',
-      name: 'common_iso_languages',
-      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
-    } as AuthorityOptions,
-    disabled: false,
-    id: 'tag',
-    label: 'Keywords',
-    minChars: 3,
-    name: 'tag',
-    placeholder: 'Keywords',
-    readOnly: false,
-    required: false,
-    repeatable: false
-  };
-
-  model = new DynamicTagModel(this.inputTagModelConfig);
+  model = new DynamicTagModel(TAG_TEST_MODEL_CONFIG);
 
   showErrorMessages = false;
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
index e2b951d4e9..ac23e665d0 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.ts
@@ -8,7 +8,7 @@ import { AuthorityService } from '../../../../../../core/integration/authority.s
 import { DynamicTagModel } from './dynamic-tag.model';
 import { IntegrationSearchOptions } from '../../../../../../core/integration/models/integration-options.model';
 import { Chips } from '../../../../../chips/models/chips.model';
-import { hasValue, isEmpty, isNotEmpty } from '../../../../../empty.util';
+import { hasValue, isNotEmpty } from '../../../../../empty.util';
 import { isEqual } from 'lodash';
 import { GlobalConfig } from '../../../../../../../config/global-config.interface';
 import { GLOBAL_CONFIG } from '../../../../../../../config';
@@ -107,14 +107,14 @@ export class DsDynamicTagComponent implements OnInit {
     this.cdr.detectChanges();
   }
 
-  onBlurEvent(event: Event) {
+  onBlur(event: Event) {
     if (isNotEmpty(this.currentValue)) {
-        this.addTagsToChips();
+      this.addTagsToChips();
     }
     this.blur.emit(event);
   }
 
-  onFocusEvent($event) {
+  onFocus(event) {
     this.focus.emit(event);
   }
 
@@ -138,7 +138,7 @@ export class DsDynamicTagComponent implements OnInit {
   onKeyUp(event) {
     if (event.keyCode === 13 || event.keyCode === 188) {
       event.preventDefault();
-      // Key: Enter or , or ;
+      // Key: Enter or ',' or ';'
       this.addTagsToChips();
       event.stopPropagation();
     }
@@ -147,7 +147,6 @@ export class DsDynamicTagComponent implements OnInit {
   preventEventsPropagation(event) {
     event.stopPropagation();
     if (event.keyCode === 13) {
-      // Key: Enter or , or ;
       event.preventDefault();
     }
   }
@@ -180,15 +179,4 @@ export class DsDynamicTagComponent implements OnInit {
       this.updateModel(event);
     }
   }
-
-  removeChips(event) {
-    // console.log("Removed chips index: "+event);
-    this.model.valueUpdates.next(this.chips.getChipsItems());
-    this.change.emit(event);
-  }
-
-  changeChips(event) {
-    this.model.valueUpdates.next(this.chips.getChipsItems());
-    this.change.emit(event);
-  }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
index 354c3d7532..27f031c83d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
@@ -15,9 +15,9 @@
          [resultTemplate]="rt"
          [type]="model.inputType"
          [(ngModel)]="currentValue"
-         (blur)="onBlurEvent($event)"
-         (focus)="onFocusEvent($event)"
-         (change)="onChangeEvent($event)"
+         (blur)="onBlur($event)"
+         (focus)="onFocus($event)"
+         (change)="onChange($event)"
          (input)="onInput($event)"
          (selectItem)="onSelectItem($event)">
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
index f6332c3fcb..4429cfc574 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
@@ -1,7 +1,11 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, inject, TestBed, } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 
 import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model';
 import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core';
@@ -13,6 +17,7 @@ import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { DsDynamicTypeaheadComponent } from './dynamic-typeahead.component';
 import { DynamicTypeaheadModel } from './dynamic-typeahead.model';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -24,10 +29,35 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Dynamic Dynamic Typeahead component', () => {
+export const TYPEAHEAD_TEST_GROUP = new FormGroup({
+  typeahead: new FormControl(),
+});
+
+export const TYPEAHEAD_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'typeahead',
+    name: 'EVENTAuthority',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  id: 'typeahead',
+  label: 'Conference',
+  minChars: 3,
+  name: 'typeahead',
+  placeholder: 'Conference',
+  readOnly: false,
+  required: false,
+  repeatable: false,
+  value: undefined
+};
+
+describe('DsDynamicTypeaheadComponent test suite', () => {
 
   let testComp: TestComponent;
+  let typeaheadComp: DsDynamicTypeaheadComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let typeaheadFixture: ComponentFixture<DsDynamicTypeaheadComponent>;
   let html;
 
   // async beforeEach
@@ -57,9 +87,10 @@ describe('Dynamic Dynamic Typeahead component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
       <ds-dynamic-typeahead [bindId]="bindId"
                             [group]="group"
                             [model]="model"
@@ -68,15 +99,122 @@ describe('Dynamic Dynamic Typeahead component', () => {
                             (change)="onValueChange($event)"
                             (focus)="onFocus($event)"></ds-dynamic-typeahead>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicTypeaheadComponent', inject([DsDynamicTypeaheadComponent], (app: DsDynamicTypeaheadComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicTypeaheadComponent', inject([DsDynamicTypeaheadComponent], (app: DsDynamicTypeaheadComponent) => {
+  describe('', () => {
+    describe('when init model value is empty', () => {
+      beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+        typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent);
+        typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance
+        typeaheadComp.group = TYPEAHEAD_TEST_GROUP;
+        typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG);
+        typeaheadFixture.detectChanges();
+      });
 
+      afterEach(() => {
+        typeaheadFixture.destroy();
+        typeaheadComp = null;
+      });
+
+      it('should init component properly', () => {
+        expect(typeaheadComp.currentValue).not.toBeDefined();
+      });
+
+      it('should search when 3+ characters typed', fakeAsync(() => {
+        spyOn((typeaheadComp as any).authorityService, 'getEntriesByName').and.callThrough();
+
+        typeaheadComp.search(Observable.of('test')).subscribe(() => {
+          expect((typeaheadComp as any).authorityService.getEntriesByName).toHaveBeenCalled();
+        });
+
+      }));
+
+      it('should set model.value on input type when AuthorityOptions.closed is false', () => {
+        const inputDe = typeaheadFixture.debugElement.query(By.css('input.form-control'));
+        const inputElement = inputDe.nativeElement;
+
+        inputElement.value = 'test value';
+        inputElement.dispatchEvent(new Event('input'));
+
+        expect((typeaheadComp.model as any).value).toEqual(new FormFieldMetadataValueObject('test value'))
+
+      });
+
+      it('should not set model.value on input type when AuthorityOptions.closed is true', () => {
+        typeaheadComp.model.authorityOptions.closed = true;
+        typeaheadFixture.detectChanges();
+        const inputDe = typeaheadFixture.debugElement.query(By.css('input.form-control'));
+        const inputElement = inputDe.nativeElement;
+
+        inputElement.value = 'test value';
+        inputElement.dispatchEvent(new Event('input'));
+
+        expect(typeaheadComp.model.value).not.toBeDefined();
+
+      });
+
+      it('should emit blur Event onBlur', () => {
+        spyOn(typeaheadComp.blur, 'emit');
+        typeaheadComp.onBlur(new Event('blur'));
+        expect(typeaheadComp.blur.emit).toHaveBeenCalled();
+      });
+
+      it('should emit change Event onBlur when AuthorityOptions.closed is false', () => {
+        typeaheadComp.inputValue = 'test value';
+        typeaheadFixture.detectChanges();
+        spyOn(typeaheadComp.blur, 'emit');
+        spyOn(typeaheadComp.change, 'emit');
+        typeaheadComp.onBlur(new Event('blur'));
+        // expect(typeaheadComp.change.emit).toHaveBeenCalled();
+        expect(typeaheadComp.blur.emit).toHaveBeenCalled();
+      });
+
+      it('should emit focus Event onFocus', () => {
+        spyOn(typeaheadComp.focus, 'emit');
+        typeaheadComp.onFocus(new Event('focus'));
+        expect(typeaheadComp.focus.emit).toHaveBeenCalled();
+      });
+
+    });
+
+    describe('and init model value is not empty', () => {
+      beforeEach(() => {
+        typeaheadFixture = TestBed.createComponent(DsDynamicTypeaheadComponent);
+        typeaheadComp = typeaheadFixture.componentInstance; // FormComponent test instance
+        typeaheadComp.group = TYPEAHEAD_TEST_GROUP;
+        typeaheadComp.model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG);
+        (typeaheadComp.model as any).value = new FormFieldMetadataValueObject('test', null, 'test001');
+        typeaheadFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        typeaheadFixture.destroy();
+        typeaheadComp = null;
+      });
+
+      it('should init component properly', () => {
+        expect(typeaheadComp.currentValue).toEqual(new FormFieldMetadataValueObject('test', null, 'test001'));
+      });
+
+      it('should emit change Event onChange and currentValue is empty', () => {
+        typeaheadComp.currentValue = null;
+        spyOn(typeaheadComp.change, 'emit');
+        typeaheadComp.onChange(new Event('change'));
+        expect(typeaheadComp.change.emit).toHaveBeenCalled();
+        expect(typeaheadComp.model.value).toBeNull();
+      });
+    });
+
+  });
 });
 
 // declare a test component
@@ -86,30 +224,9 @@ describe('Dynamic Dynamic Typeahead component', () => {
 })
 class TestComponent {
 
-  group: FormGroup = new FormGroup({
-    typeahead: new FormControl(),
-  });
+  group: FormGroup = TYPEAHEAD_TEST_GROUP;
 
-  inputTypeaheadModelConfig = {
-    authorityOptions: {
-      closed: false,
-      metadata: 'typeahead',
-      name: 'EVENTAuthority',
-      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
-    } as AuthorityOptions,
-    disabled: false,
-    id: 'typeahead',
-    label: 'Conference',
-    minChars: 3,
-    name: 'typeahead',
-    placeholder: 'Conference',
-    readOnly: false,
-    required: false,
-    repeatable: false,
-    value: undefined
-  }
-
-  model = new DynamicTypeaheadModel(this.inputTypeaheadModelConfig);
+  model = new DynamicTypeaheadModel(TYPEAHEAD_TEST_MODEL_CONFIG);
 
   showErrorMessages = false;
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
index 1d31fc0968..dade5d037a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.ts
@@ -92,12 +92,9 @@ export class DsDynamicTypeaheadComponent implements OnInit {
       this.inputValue = valueObj;
       this.model.valueUpdates.next(this.inputValue);
     }
-    if (event.data) {
-      // this.group.markAsDirty();
-    }
   }
 
-  onBlurEvent(event: Event) {
+  onBlur(event: Event) {
     if (!this.model.authorityOptions.closed && isNotEmpty(this.inputValue)) {
       this.change.emit(this.inputValue);
       this.inputValue = null;
@@ -105,7 +102,7 @@ export class DsDynamicTypeaheadComponent implements OnInit {
     this.blur.emit(event);
   }
 
-  onChangeEvent(event: Event) {
+  onChange(event: Event) {
     event.stopPropagation();
     if (isEmpty(this.currentValue)) {
       this.model.valueUpdates.next(null);
@@ -113,7 +110,7 @@ export class DsDynamicTypeaheadComponent implements OnInit {
     }
   }
 
-  onFocusEvent(event) {
+  onFocus(event) {
     this.focus.emit(event);
   }
 
diff --git a/src/app/shared/testing/authority-service-stub.ts b/src/app/shared/testing/authority-service-stub.ts
index df1b98c787..0bc8179fe3 100644
--- a/src/app/shared/testing/authority-service-stub.ts
+++ b/src/app/shared/testing/authority-service-stub.ts
@@ -2,11 +2,20 @@ import { Observable } from 'rxjs/Observable';
 import { IntegrationSearchOptions } from '../../core/integration/models/integration-options.model';
 import { IntegrationData } from '../../core/integration/integration-data';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { AuthorityValueModel } from '../../core/integration/models/authority-value.model';
 
 export class AuthorityServiceStub {
 
+  private _payload = [
+    Object.assign(new AuthorityValueModel(),{id: 1, display: 'one', value: 1}),
+    Object.assign(new AuthorityValueModel(),{id: 2, display: 'two', value: 2}),
+  ];
+
+  setNewPayload(payload) {
+    this._payload = payload;
+  }
+
   getEntriesByName(options: IntegrationSearchOptions) {
-    const payload = [{id: 1, display: 'one', value: 1} as any, {id: 2, display: 'two', value: 2} as any];
-    return Observable.of(new IntegrationData(new PageInfo(), payload));
+    return Observable.of(new IntegrationData(new PageInfo(), this._payload));
   }
 }

From b74993413dfa12740fadbe53c9e4e388affdbc1b Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 2 Jul 2018 13:22:06 +0200
Subject: [PATCH 22/41] Added more test

---
 .../models/list/dynamic-list.component.html   |  12 +-
 .../list/dynamic-list.component.spec.ts       | 260 +++++++++++++++---
 .../models/list/dynamic-list.component.ts     |  14 +-
 3 files changed, 235 insertions(+), 51 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 97cfa39b2b..ad4608053c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -19,9 +19,9 @@
                  [name]="model.name"
                  [required]="model.required"
                  [value]="item.value"
-                 (blur)="onBlurEvent($event)"
-                 (change)="onChangeEvent($event)"
-                 (focus)="onFocusEvent($event)"/>
+                 (blur)="onBlur($event)"
+                 (change)="onChange($event)"
+                 (focus)="onFocus($event)"/>
         <label class="custom-control-label"
                [class.disabled]="model.disabled"
                [ngClass]="model.layout.element?.control"
@@ -40,7 +40,7 @@
        [attr.tabindex]="model.tabIndex"
        [dynamicId]="bindId && model.id"
        [ngClass]="model.layout.element?.control"
-       (change)="onChangeEvent($event)">
+       (change)="onChange($event)">
 
     <div *ngFor="let columnItems of items" class="col-sm ml-3">
 
@@ -54,8 +54,8 @@
                  [name]="model.id"
                  [required]="model.required"
                  [value]="item.index"
-                 (blur)="onBlurEvent($event)"
-                 (focus)="onFocusEvent($event)"/>
+                 (blur)="onBlur($event)"
+                 (focus)="onFocus($event)"/>
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
index c47060aa88..29babc2da9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
@@ -13,6 +13,9 @@ import { DynamicFormControlLayout, DynamicFormsCoreModule, DynamicFormValidation
 import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap';
 import { AuthorityService } from '../../../../../../core/integration/authority.service';
 import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub';
+import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
+import { By } from '@angular/platform-browser';
+import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -24,15 +27,64 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Dynamic List component', () => {
+export const LAYOUT_TEST = {
+  element: {
+    group: ''
+  }
+} as DynamicFormControlLayout;
+
+export const LIST_TEST_GROUP = new FormGroup({
+  listCheckbox: new FormGroup({}),
+  listRadio: new FormGroup({})
+});
+
+export const LIST_CHECKBOX_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'listCheckbox',
+    name: 'type_programme',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  id: 'listCheckbox',
+  label: 'Programme',
+  name: 'listCheckbox',
+  placeholder: 'Programme',
+  readOnly: false,
+  required: false,
+  repeatable: true
+};
+
+export const LIST_RADIO_TEST_MODEL_CONFIG = {
+  authorityOptions: {
+    closed: false,
+    metadata: 'listRadio',
+    name: 'type_programme',
+    scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
+  } as AuthorityOptions,
+  disabled: false,
+  id: 'listRadio',
+  label: 'Programme',
+  name: 'listRadio',
+  placeholder: 'Programme',
+  readOnly: false,
+  required: false,
+  repeatable: false
+};
+
+describe('DsDynamicListComponent test suite', () => {
 
   let testComp: TestComponent;
+  let listComp: DsDynamicListComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let listFixture: ComponentFixture<DsDynamicListComponent>;
   let html;
+  let modelValue;
+
+  const authorityServiceStub = new AuthorityServiceStub();
 
   // async beforeEach
   beforeEach(async(() => {
-    const authorityServiceStub = new AuthorityServiceStub();
 
     TestBed.configureTestingModule({
       imports: [
@@ -59,9 +111,10 @@ describe('Dynamic List component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
       <ds-dynamic-list
         [bindId]="bindId"
         [group]="group"
@@ -71,15 +124,172 @@ describe('Dynamic List component', () => {
         (change)="onValueChange($event)"
         (focus)="onFocus($event)"></ds-dynamic-list>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicListComponent', inject([DsDynamicListComponent], (app: DsDynamicListComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicListComponent', inject([DsDynamicListComponent], (app: DsDynamicListComponent) => {
+  describe('when model is a DynamicListCheckboxGroupModel', () => {
+    describe('and init model value is empty', () => {
+      beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+        listFixture = TestBed.createComponent(DsDynamicListComponent);
+        listComp = listFixture.componentInstance; // FormComponent test instance
+        listComp.group = LIST_TEST_GROUP;
+        listComp.model = new DynamicListCheckboxGroupModel(LIST_CHECKBOX_TEST_MODEL_CONFIG, LAYOUT_TEST);
+        listFixture.detectChanges();
+      });
 
+      afterEach(() => {
+        listFixture.destroy();
+        listComp = null;
+      });
+
+      it('should init component properly', () => {
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+
+        results$.subscribe((results) => {
+          expect((listComp as any).optionsList).toEqual(results.payload);
+          expect(listComp.items.length).toBe(1);
+          expect(listComp.items[0].length).toBe(2);
+        })
+      });
+
+      it('should set model value properly when a checkbox option is selected', () => {
+        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
+        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const item = items[0];
+        modelValue = [Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1})];
+
+        item.nativeElement.click();
+
+        expect(listComp.model.value).toEqual(modelValue)
+      });
+
+      it('should emit blur Event onBlur', () => {
+        spyOn(listComp.blur, 'emit');
+        listComp.onBlur(new Event('blur'));
+        expect(listComp.blur.emit).toHaveBeenCalled();
+      });
+
+      it('should emit focus Event onFocus', () => {
+        spyOn(listComp.focus, 'emit');
+        listComp.onFocus(new Event('focus'));
+        expect(listComp.focus.emit).toHaveBeenCalled();
+      });
+    });
+
+    describe('and init model value is not empty', () => {
+      beforeEach(() => {
+
+        listFixture = TestBed.createComponent(DsDynamicListComponent);
+        listComp = listFixture.componentInstance; // FormComponent test instance
+        listComp.group = LIST_TEST_GROUP;
+        listComp.model = new DynamicListCheckboxGroupModel(LIST_CHECKBOX_TEST_MODEL_CONFIG, LAYOUT_TEST);
+        modelValue = [Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1})];
+        listComp.model.value = modelValue;
+        listFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        listFixture.destroy();
+        listComp = null;
+      });
+
+      it('should init component properly', () => {
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+
+        results$.subscribe((results) => {
+          expect((listComp as any).optionsList).toEqual(results.payload);
+          expect(listComp.model.value).toEqual(modelValue);
+          expect((listComp.model as DynamicListCheckboxGroupModel).group[0].value).toBeTruthy();
+        })
+      });
+
+      it('should set model value properly when a checkbox option is deselected', () => {
+        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
+        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const item = items[0];
+        modelValue = [];
+
+        item.nativeElement.click();
+
+        expect(listComp.model.value).toEqual(modelValue)
+      });
+    });
+  });
+
+  describe('when model is a DynamicListRadioGroupModel', () => {
+    describe('and init model value is empty', () => {
+      beforeEach(() => {
+
+        listFixture = TestBed.createComponent(DsDynamicListComponent);
+        listComp = listFixture.componentInstance; // FormComponent test instance
+        listComp.group = LIST_TEST_GROUP;
+        listComp.model = new DynamicListRadioGroupModel(LIST_RADIO_TEST_MODEL_CONFIG, LAYOUT_TEST);
+        listFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        listFixture.destroy();
+        listComp = null;
+      });
+
+      it('should init component properly', () => {
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+
+        results$.subscribe((results) => {
+          expect((listComp as any).optionsList).toEqual(results.payload);
+          expect(listComp.items.length).toBe(1);
+          expect(listComp.items[0].length).toBe(2);
+        })
+      });
+
+      it('should set model value when a radio option is selected', () => {
+        const de = listFixture.debugElement.queryAll(By.css('div.custom-radio'));
+        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const item = items[0];
+        modelValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1});
+
+        item.nativeElement.click();
+
+        expect(listComp.model.value).toEqual(modelValue)
+      });
+    });
+
+    describe('and init model value is not empty', () => {
+      beforeEach(() => {
+
+        listFixture = TestBed.createComponent(DsDynamicListComponent);
+        listComp = listFixture.componentInstance; // FormComponent test instance
+        listComp.group = LIST_TEST_GROUP;
+        listComp.model = new DynamicListRadioGroupModel(LIST_RADIO_TEST_MODEL_CONFIG, LAYOUT_TEST);
+        modelValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1});
+        listComp.model.value = modelValue;
+        listFixture.detectChanges();
+      });
+
+      afterEach(() => {
+        listFixture.destroy();
+        listComp = null;
+      });
+
+      it('should init component properly', () => {
+        const results$ = authorityServiceStub.getEntriesByName({} as  any);
+
+        results$.subscribe((results) => {
+          expect((listComp as any).optionsList).toEqual(results.payload);
+          expect(listComp.model.value).toEqual(modelValue);
+          expect((listComp.model as DynamicListRadioGroupModel).options[0].value).toBeTruthy();
+        })
+      });
+    });
+  });
 });
 
 // declare a test component
@@ -89,35 +299,9 @@ describe('Dynamic List component', () => {
 })
 class TestComponent {
 
-  group: FormGroup = new FormGroup({
-    list: new FormGroup({}),
-  });
+  group: FormGroup = LIST_TEST_GROUP;
 
-  inputListModelConfig = {
-    authorityOptions: {
-      closed: false,
-      metadata: 'list',
-      name: 'type_programme',
-      scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23'
-    } as AuthorityOptions,
-    disabled: false,
-    errorMessages: {required: 'You must enter at least the year.'},
-    id: 'list',
-    label: 'Programme',
-    name: 'list',
-    placeholder: 'Programme',
-    readOnly: false,
-    required: true,
-    repeatable: true
-  };
-
-  layout: DynamicFormControlLayout = {
-    element: {
-      group: ''
-    }
-  };
-
-  model = new DynamicListCheckboxGroupModel(this.inputListModelConfig, this.layout);
+  model = new DynamicListCheckboxGroupModel(LIST_CHECKBOX_TEST_MODEL_CONFIG, LAYOUT_TEST);
 
   showErrorMessages = false;
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index 91bd0275e7..ec0d3e343a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -36,7 +36,7 @@ export class DsDynamicListComponent implements OnInit {
   @Output() focus: EventEmitter<any> = new EventEmitter<any>();
 
   public items: ListItem[][] = [];
-  protected authorityList: AuthorityValueModel[];
+  protected optionsList: AuthorityValueModel[];
   protected searchOptions: IntegrationSearchOptions;
 
   constructor(private authorityService: AuthorityService,
@@ -58,19 +58,19 @@ export class DsDynamicListComponent implements OnInit {
     }
   }
 
-  onBlurEvent(event: Event) {
+  onBlur(event: Event) {
     this.blur.emit(event);
   }
 
-  onFocusEvent(event: Event) {
+  onFocus(event: Event) {
     this.focus.emit(event);
   }
 
-  onChangeEvent(event: Event) {
+  onChange(event: Event) {
     const target = event.target as any;
     if (this.model.repeatable) {
       // Target tabindex coincide with the array index of the value into the authority list
-      const authorityValue: AuthorityValueModel = this.authorityList[target.tabIndex];
+      const authorityValue: AuthorityValueModel = this.optionsList[target.tabIndex];
       if (target.checked) {
         this.model.valueUpdates.next(authorityValue);
       } else {
@@ -81,7 +81,7 @@ export class DsDynamicListComponent implements OnInit {
         this.model.valueUpdates.next(newValue);
       }
     } else {
-      (this.model as DynamicListRadioGroupModel).valueUpdates.next(this.authorityList[target.value]);
+      (this.model as DynamicListRadioGroupModel).valueUpdates.next(this.optionsList[target.value]);
     }
     this.change.emit(event);
   }
@@ -93,7 +93,7 @@ export class DsDynamicListComponent implements OnInit {
         let groupCounter = 0;
         let itemsPerGroup = 0;
         let tempList: ListItem[] = [];
-        this.authorityList = authorities.payload as AuthorityValueModel[];
+        this.optionsList = authorities.payload as AuthorityValueModel[];
         // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
         (authorities.payload as AuthorityValueModel[]).forEach((option, key) => {
           const value = option.id || option.value;

From ff41b80a3382d0b50afc2d28dc1194a57efcec90 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 3 Jul 2018 17:51:26 +0200
Subject: [PATCH 23/41] Renamed form.reducers.ts to form.reducer.ts Created
 custom sass variable Removed use of instanceof operator

---
 src/app/app.reducer.ts                        |   2 +-
 .../ds-dynamic-form-control.component.ts      |   4 +-
 .../models/ds-dynamic-concat.model.ts         |   1 +
 .../models/ds-dynamic-qualdrop.model.ts       |   1 +
 .../models/ds-dynamic-row-array-model.ts      |   3 +
 .../models/ds-dynamic-row-group-model.ts      |   2 +-
 .../dynamic-group/dynamic-group.components.ts |   4 +-
 .../dynamic-group/dynamic-group.model.ts      |   4 +-
 .../list/dynamic-list-checkbox-group.model.ts |   1 +
 .../list/dynamic-list-radio-group.model.ts    |   1 +
 .../lookup/dynamic-lookup.component.scss      |  27 ++--
 ...dynamic-scrollable-dropdown.component.scss |   8 +-
 .../models/tag/dynamic-tag.component.html     |   4 +-
 .../models/tag/dynamic-tag.component.scss     |   5 +-
 .../dynamic-typeahead.component.scss          |   2 +-
 .../form/builder/form-builder.service.spec.ts |  73 ++++++++-
 .../form/builder/form-builder.service.ts      | 138 ++++++++++--------
 .../shared/form/builder/parsers/row-parser.ts |  16 +-
 src/app/shared/form/form.component.spec.ts    |   2 +-
 src/app/shared/form/form.component.ts         |   2 +-
 src/app/shared/form/form.reducer.spec.ts      |   2 +-
 .../{form.reducers.ts => form.reducer.ts}     |   0
 src/app/shared/form/form.service.spec.ts      |   2 +-
 src/app/shared/form/selectors.ts              |   4 +-
 .../number-picker.component.scss              |   4 -
 src/app/shared/object.util.spec.ts            |  16 +-
 src/app/shared/object.util.ts                 |  20 +--
 .../shared/uploader/uploader.component.scss   |   6 +-
 src/styles/_custom_variables.scss             |   3 +
 29 files changed, 220 insertions(+), 137 deletions(-)
 rename src/app/shared/form/{form.reducers.ts => form.reducer.ts} (100%)

diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts
index c0fcb56954..77c8efcab2 100644
--- a/src/app/app.reducer.ts
+++ b/src/app/app.reducer.ts
@@ -3,7 +3,7 @@ import * as fromRouter from '@ngrx/router-store';
 
 import { headerReducer, HeaderState } from './header/header.reducer';
 import { hostWindowReducer, HostWindowState } from './shared/host-window.reducer';
-import { formReducer, FormState } from './shared/form/form.reducers';
+import { formReducer, FormState } from './shared/form/form.reducer';
 import {
   SearchSidebarState,
   sidebarReducer
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
index 660ae9c244..3a39d22bef 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.ts
@@ -33,7 +33,7 @@ import {
 import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './models/tag/dynamic-tag.model';
-import { DYNAMIC_FORM_CONTROL_TYPE_RELATION } from './models/dynamic-group/dynamic-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/dynamic-group/dynamic-group.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/date-picker.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP } from './models/lookup/dynamic-lookup.model';
 import { DynamicListCheckboxGroupModel } from './models/list/dynamic-list-checkbox-group.model';
@@ -137,7 +137,7 @@ export class DsDynamicFormControlComponent extends DynamicFormControlComponent i
       case DYNAMIC_FORM_CONTROL_TYPE_TAG:
         return NGBootstrapFormControlType.Tag;
 
-      case DYNAMIC_FORM_CONTROL_TYPE_RELATION:
+      case DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP:
         return NGBootstrapFormControlType.Relation;
 
       case DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER:
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
index 47d410f2ed..81f570b14c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-concat.model.ts
@@ -16,6 +16,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
 
   @serializable() separator: string;
   @serializable() hasLanguages = false;
+  isCustomGroup = true;
 
   constructor(config: DynamicConcatModelConfig, layout?: DynamicFormControlLayout) {
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts
index fa91c0ad6b..bae79cc348 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model.ts
@@ -20,6 +20,7 @@ export class DynamicQualdropModel extends DynamicFormGroupModel {
   @serializable() languageUpdates: Subject<string>;
   @serializable() hasLanguages = false;
   @serializable() readOnly: boolean;
+  isCustomGroup = true;
 
   constructor(config: DsDynamicQualdropModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
index 0a056b7d32..b38ea142f0 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts
@@ -1,7 +1,9 @@
 import {
+  DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
   DynamicFormArrayModel, DynamicFormArrayModelConfig, DynamicFormControlLayout,
   serializable
 } from '@ng-dynamic-forms/core';
+import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './tag/dynamic-tag.model';
 
 export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig {
   notRepeteable: boolean;
@@ -9,6 +11,7 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
 
 export class DynamicRowArrayModel extends DynamicFormArrayModel {
   @serializable() notRepeteable = false;
+  isRowArray = true;
 
   constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts
index 3e163f1f13..b6d76b4c55 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-group-model.ts
@@ -1,5 +1,5 @@
 import { DynamicFormGroupModel } from '@ng-dynamic-forms/core';
 
 export class DynamicRowGroupModel extends DynamicFormGroupModel {
-
+  isRowGroup = true;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index acb146c98c..92141a0077 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -27,7 +27,7 @@ import { GlobalConfig } from '../../../../../../../config/global-config.interfac
 import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
-import { isObjectEmpty } from '../../../../../object.util';
+import { hasOnlyEmptyProperties } from '../../../../../object.util';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 
@@ -70,7 +70,7 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
       this.formCollapsed = Observable.of(true);
     }
     this.model.valueUpdates.subscribe((value: any[]) => {
-      this.formCollapsed = (isNotEmpty(value) && !(value.length === 1 && isObjectEmpty(value[0]))) ? Observable.of(true) : Observable.of(false);
+      this.formCollapsed = (isNotEmpty(value) && !(value.length === 1 && hasOnlyEmptyProperties(value[0]))) ? Observable.of(true) : Observable.of(false);
     });
 
     this.formId = this.formService.getUniqueId(this.model.id);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
index f8f4c80385..570e4bd7ea 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
@@ -4,7 +4,7 @@ import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-in
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 import { isEmpty, isNull } from '../../../../../empty.util';
 
-export const DYNAMIC_FORM_CONTROL_TYPE_RELATION = 'RELATION';
+export const DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP = 'RELATION';
 export const PLACEHOLDER_PARENT_METADATA = '#PLACEHOLDER_PARENT_METADATA_VALUE#';
 
 /**
@@ -28,7 +28,7 @@ export class DynamicGroupModel extends DsDynamicInputModel {
   @serializable() scopeUUID: string;
   @serializable() submissionScope: string;
   @serializable() _value: any[];
-  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_RELATION;
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP;
 
   constructor(config: DynamicGroupModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
index 1537a02cd1..5fdc530ebd 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model.ts
@@ -22,6 +22,7 @@ export class DynamicListCheckboxGroupModel extends DynamicCheckboxGroupModel {
   @serializable() repeatable: boolean;
   @serializable() groupLength: number;
   @serializable() _value: AuthorityValueModel[];
+  isListGroup = true;
   valueUpdates: Subject<any>;
 
   constructor(config: DynamicListCheckboxGroupModelConfig, layout?: DynamicFormControlLayout) {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
index 984e3b3880..287c10f3fe 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model.ts
@@ -19,6 +19,7 @@ export class DynamicListRadioGroupModel extends DynamicRadioGroupModel<any> {
   @serializable() authorityOptions: AuthorityOptions;
   @serializable() repeatable: boolean;
   @serializable() groupLength: number;
+  isListGroup = true;
 
   constructor(config: DynamicListModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
index a697772020..6dec8c1f45 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -29,16 +29,16 @@
 
 /* add padding  */
 .left-addon input {
-  padding-left: 30px;
+  padding-left: $spacer * 2;
 }
 
 .right-addon input {
-  padding-right: 30px;
+  padding-right: $spacer * 2;
 }
 
 :host /deep/ .dropdown-menu {
   width: 100% !important;
-  max-height: 200px;
+  max-height: $dropdown-menu-max-height;
   overflow-y: auto !important;
   overflow-x: hidden;
 }
@@ -50,23 +50,16 @@
   color: $dropdown-link-hover-color !important;
   background-color: $dropdown-link-hover-bg !important;
 }
-
-.dropdown-menu {
-  margin-top: -10px;
-}
+//
+//.dropdown-menu {
+//  margin-top: -($spacer * 0.625);
+//}
 
 div {
   overflow: visible;
   //padding-right: 0 !important;
 }
-
-button {
-  margin-right: 10px;
-}
-
-//@media (min-width: $screen-sm-min) {
-//  .firstName {
-//    padding-left: 0 !important;
-//    margin-left: -5px !important;
-//  }
+//
+//button {
+//  margin-right: $spacer * 0.625;
 //}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
index 5b278312d3..34c5a84220 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss
@@ -2,7 +2,7 @@
 
 .scrollable-menu {
   height: auto;
-  max-height: 200px;
+  max-height: $dropdown-menu-max-height;
   overflow-x: hidden;
 }
 
@@ -13,14 +13,14 @@
 .scrollable-dropdown-loading {
   background-color: map-get($theme-colors, primary);
   color: white;
-  height: 2rem !important;
-  line-height: 2rem;
+  height: $spacer * 2 !important;
+  line-height: $spacer * 2;
   position: sticky;
   bottom: 0;
 }
 
 .scrollable-dropdown-menu {
   left: 0 !important;
-  margin-bottom: 1rem;
+  margin-bottom: $spacer;
   z-index: 1000;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index 9a6ec43a40..5522e0b43a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -6,7 +6,7 @@
   <ds-chips [chips]="chips" [wrapperClass]="'border-bottom border-light'">
 
   <input *ngIf="!searchOptions"
-         class="border-0 form-control-plaintext tag-input mt-1 mb-1 chips-sort-ignore"
+         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1 chips-sort-ignore"
          type="text"
          [class.pl-3]="chips.hasItems()"
          [placeholder]="model.label"
@@ -19,7 +19,7 @@
 
 
   <input *ngIf="searchOptions"
-         class="border-0 form-control-plaintext tag-input mt-1 mb-1 chips-sort-ignore"
+         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1 chips-sort-ignore"
          type="text"
          [(ngModel)]="currentValue"
          [attr.autoComplete]="model.autoComplete"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
index 15cc0dc5da..9527558bbf 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
@@ -12,11 +12,11 @@
 
 :host /deep/ .dropdown-menu {
   width: 100% !important;
-  max-height: 200px;
+  max-height: $dropdown-menu-max-height;
   overflow-y: scroll;
   overflow-x: hidden;
   left: 0 !important;
-  margin-top: 15px !important;
+  margin-top: $spacer !important;
 }
 
 :host /deep/ .dropdown-item.active,
@@ -28,7 +28,6 @@
 }
 
 .tag-input {
-  flex-grow: 1;
   outline: none;
   width: auto !important;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
index e4f6722c65..84691364f2 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
@@ -11,7 +11,7 @@
 
 :host /deep/ .dropdown-menu {
   width: 100% !important;
-  max-height: 200px;
+  max-height: $dropdown-menu-max-height;
   overflow-y: auto !important;
   overflow-x: hidden;
 }
diff --git a/src/app/shared/form/builder/form-builder.service.spec.ts b/src/app/shared/form/builder/form-builder.service.spec.ts
index 26d2ac73e3..12f51166b5 100644
--- a/src/app/shared/form/builder/form-builder.service.spec.ts
+++ b/src/app/shared/form/builder/form-builder.service.spec.ts
@@ -13,7 +13,7 @@ import {
   DynamicColorPickerModel,
   DynamicDatePickerModel,
   DynamicEditorModel,
-  DynamicFileUploadModel,
+  DynamicFileUploadModel, DynamicFormArrayGroupModel,
   DynamicFormArrayModel,
   DynamicFormControlModel,
   DynamicFormControlValue,
@@ -48,6 +48,7 @@ import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-inpu
 import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
 import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { DynamicLookupNameModel } from './ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model';
+import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
 
 describe('FormBuilderService test suite', () => {
 
@@ -248,7 +249,20 @@ describe('FormBuilderService test suite', () => {
 
       new DynamicLookupNameModel({id: 'testLookupName'}),
 
-      new DynamicQualdropModel({id: 'testCombobox', readOnly: false})
+      new DynamicQualdropModel({id: 'testCombobox', readOnly: false}),
+
+      new DynamicRowArrayModel(
+        {
+          id: 'testFormRowArray',
+          initialCount: 5,
+          notRepeteable: false,
+          groupFactory: () => {
+            return [
+              new DynamicInputModel({id: 'testFormRowArrayGroupInput'})
+            ];
+          },
+        }
+      ),
     ];
 
     testFormConfiguration = {
@@ -388,6 +402,8 @@ describe('FormBuilderService test suite', () => {
     expect(service.findById('testCheckboxGroup1', testModel) instanceof DynamicFormControlModel).toBe(true);
     expect(service.findById('testCheckboxGroup2', testModel) instanceof DynamicFormControlModel).toBe(true);
     expect(service.findById('nestedTestInput', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testFormRowArrayGroupInput', testModel) instanceof DynamicFormControlModel).toBe(true);
+    expect(service.findById('testFormRowArrayGroupInput', testModel, 2) instanceof DynamicFormControlModel).toBe(true);
   });
 
   it('should create an array of form models', () => {
@@ -484,9 +500,32 @@ describe('FormBuilderService test suite', () => {
 
   it('should return true when model is a Qualdrop Group', () => {
     const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
-    const model = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
+    let model = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
 
     expect(service.isQualdropGroup(model)).toBe(true);
+
+    model = service.findById('name_CONCAT_GROUP', formModel);
+
+    expect(service.isQualdropGroup(model)).toBe(false);
+  });
+
+  it('should return true when model is a Custom or List Group', () => {
+    const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID');
+    let model = service.findById('dc_identifier_QUALDROP_GROUP', formModel);
+
+    expect(service.isCustomOrListGroup(model)).toBe(true);
+
+    model = service.findById('name_CONCAT_GROUP', formModel);
+
+    expect(service.isCustomOrListGroup(model)).toBe(true);
+
+    model = service.findById('testCheckboxList', testModel);
+
+    expect(service.isCustomOrListGroup(model)).toBe(true);
+
+    model = service.findById('testRadioList', testModel);
+
+    expect(service.isCustomOrListGroup(model)).toBe(true);
   });
 
   it('should return true when model is a Custom Group', () => {
@@ -498,6 +537,14 @@ describe('FormBuilderService test suite', () => {
     model = service.findById('name_CONCAT_GROUP', formModel);
 
     expect(service.isCustomGroup(model)).toBe(true);
+
+    model = service.findById('testCheckboxList', testModel);
+
+    expect(service.isCustomGroup(model)).toBe(false);
+
+    model = service.findById('testRadioList', testModel);
+
+    expect(service.isCustomGroup(model)).toBe(false);
   });
 
   it('should return true when model is a List Group', () => {
@@ -516,6 +563,26 @@ describe('FormBuilderService test suite', () => {
     expect(service.isRelationGroup(model)).toBe(true);
   });
 
+  it('should return true when model is a Array Row Group', () => {
+    let model = service.findById('testFormRowArray', testModel, null);
+
+    expect(service.isRowArrayGroup(model)).toBe(true);
+
+    model = service.findById('testFormArray', testModel);
+
+    expect(service.isRowArrayGroup(model)).toBe(false);
+  });
+
+  it('should return true when model is a Array Group', () => {
+    let model = service.findById('testFormRowArray', testModel) as DynamicFormArrayModel;
+
+    expect(service.isArrayGroup(model)).toBe(true);
+
+    model = service.findById('testFormArray', testModel) as DynamicFormArrayModel;
+
+    expect(service.isArrayGroup(model)).toBe(true);
+  });
+
   it('should return properly form control by field id', () => {
     const group = service.createFormGroup(testModel);
     const control = group.controls.testLookup;
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index a58061e448..0fb8f9ef11 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -1,8 +1,11 @@
 import { Injectable } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { AbstractControl, FormGroup } from '@angular/forms';
 
 import {
-  DynamicFormArrayGroupModel,
+  DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
+  DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP,
+  DYNAMIC_FORM_CONTROL_TYPE_GROUP,
+  DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
   DynamicFormArrayModel,
   DynamicFormControlModel,
   DynamicFormGroupModel,
@@ -10,26 +13,18 @@ import {
   DynamicPathable,
   JSONUtils,
 } from '@ng-dynamic-forms/core';
-import { mergeWith, isObject } from 'lodash';
+import { isObject, isString, mergeWith } from 'lodash';
 
-import { isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
+import { hasValue, isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
 import { DynamicQualdropModel } from './ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
-import { DynamicConcatModel } from './ds-dynamic-form-ui/models/ds-dynamic-concat.model';
-import { DynamicListCheckboxGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
-import {
-  DYNAMIC_FORM_CONTROL_TYPE_RELATION,
-  DynamicGroupModel
-} from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
-import { DYNAMIC_FORM_CONTROL_TYPE_TAG, DynamicTagModel } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
-import { DynamicListRadioGroupModel } from './ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
 import { RowParser } from './parsers/row-parser';
 
 import { DynamicRowArrayModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-array-model';
-import { DynamicRowGroupModel } from './ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
 import { DsDynamicInputModel } from './ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { FormFieldMetadataValueObject } from './models/form-field-metadata-value.model';
-import { AuthorityValueModel } from '../../../core/integration/models/authority-value.model';
 
 @Injectable()
 export class FormBuilderService extends DynamicFormService {
@@ -37,31 +32,33 @@ export class FormBuilderService extends DynamicFormService {
   findById(id: string, groupModel: DynamicFormControlModel[], arrayIndex = null): DynamicFormControlModel | null {
 
     let result = null;
-    const findByIdFn = (findId: string, findGroupModel: DynamicFormControlModel[]): void => {
+    const findByIdFn = (findId: string, findGroupModel: DynamicFormControlModel[], findArrayIndex): void => {
 
       for (const controlModel of findGroupModel) {
 
         if (controlModel.id === findId) {
-          if (controlModel instanceof DynamicFormArrayModel && isNotNull(arrayIndex)) {
-            result = controlModel.get(arrayIndex);
+
+          if (this.isArrayGroup(controlModel) && isNotNull(findArrayIndex)) {
+            result = (controlModel as DynamicFormArrayModel).get(findArrayIndex);
           } else {
             result = controlModel;
           }
           break;
         }
 
-        if (controlModel instanceof DynamicFormGroupModel) {
-          findByIdFn(findId, (controlModel as DynamicFormGroupModel).group);
+        if (this.isGroup(controlModel)) {
+          findByIdFn(findId, (controlModel as DynamicFormGroupModel).group, findArrayIndex);
         }
 
-        if (controlModel instanceof DynamicFormArrayModel && (isNull(arrayIndex) || controlModel.size > (arrayIndex))) {
-          arrayIndex = (isNull(arrayIndex)) ? 0 : arrayIndex;
-          findByIdFn(findId, controlModel.get(arrayIndex).group);
+        if (this.isArrayGroup(controlModel)
+          && (isNull(findArrayIndex) || (controlModel as DynamicFormArrayModel).size > (findArrayIndex))) {
+          const index = (isNull(findArrayIndex)) ? 0 : findArrayIndex;
+          findByIdFn(findId, (controlModel as DynamicFormArrayModel).get(index).group, index);
         }
       }
     };
 
-    findByIdFn(id, groupModel);
+    findByIdFn(id, groupModel, arrayIndex);
 
     return result;
   }
@@ -72,13 +69,13 @@ export class FormBuilderService extends DynamicFormService {
 
       for (const controlModel of findGroupModel) {
 
-        if (controlModel instanceof DynamicFormGroupModel) {
+        if (this.isGroup(controlModel)) {
           iterateControlModels((controlModel as DynamicFormGroupModel).group);
           continue;
         }
 
-        if (controlModel instanceof DynamicFormArrayModel) {
-          iterateControlModels(controlModel.groupFactory());
+        if (this.isArrayGroup(controlModel)) {
+          iterateControlModels((controlModel as DynamicFormArrayModel).groupFactory());
           continue;
         }
 
@@ -103,13 +100,12 @@ export class FormBuilderService extends DynamicFormService {
 
     const normalizeValue = (controlModel, controlValue, controlModelIndex) => {
       const controlLanguage = (controlModel as DsDynamicInputModel).hasLanguages ? (controlModel as DsDynamicInputModel).language : null;
-      if (((isObject(controlValue) && controlValue.id) || controlValue instanceof AuthorityValueModel)) {
-        return new FormFieldMetadataValueObject(controlValue.value, controlLanguage, controlValue.id, controlValue.display, controlModelIndex);
-      } else if (!(controlValue instanceof FormFieldMetadataValueObject)) {
+      if (isString(controlValue)) {
         return new FormFieldMetadataValueObject(controlValue, controlLanguage, null, null, controlModelIndex);
-      } else {
+      } else if (isObject(controlValue)) {
+        const authority = controlValue.authority || controlValue.id || null;
         const place = controlModelIndex || controlValue.place;
-        return Object.assign(new FormFieldMetadataValueObject(), controlValue, {place});
+        return new FormFieldMetadataValueObject(controlValue.value, controlLanguage, authority, controlValue.display, place);
       }
     };
 
@@ -118,29 +114,27 @@ export class FormBuilderService extends DynamicFormService {
 
       // Iterate over all group's controls
       for (const controlModel of findGroupModel) {
-      /* tslint:disable-next-line:no-shadowed-variable */
-      // for (const {controlModel, controlModelIndex} of findGroupModel.map((controlModel, controlModelIndex) => ({ controlModel, controlModelIndex }))) {
 
-        if (controlModel instanceof DynamicRowGroupModel && !this.isCustomGroup(controlModel)) {
+        if (this.isRowGroup(controlModel) && !this.isCustomOrListGroup(controlModel)) {
           iterateResult = mergeWith(iterateResult, iterateControlModels((controlModel as DynamicFormGroupModel).group), customizer);
           continue;
         }
 
-        if (controlModel instanceof DynamicFormGroupModel && !this.isCustomGroup(controlModel)) {
+        if (this.isGroup(controlModel) && !this.isCustomOrListGroup(controlModel)) {
           iterateResult[controlModel.name] = iterateControlModels((controlModel as DynamicFormGroupModel).group);
           continue;
         }
 
-        if (controlModel instanceof DynamicRowArrayModel) {
-          for (const arrayItemModel of controlModel.groups) {
+        if (this.isRowArrayGroup(controlModel)) {
+          for (const arrayItemModel of (controlModel as DynamicRowArrayModel).groups) {
             iterateResult = mergeWith(iterateResult, iterateControlModels(arrayItemModel.group, arrayItemModel.index), customizer);
           }
           continue;
         }
 
-        if (controlModel instanceof DynamicFormArrayModel) {
+        if (this.isArrayGroup(controlModel)) {
           iterateResult[controlModel.name] = [];
-          for (const arrayItemModel of controlModel.groups) {
+          for (const arrayItemModel of (controlModel as DynamicFormArrayModel).groups) {
             iterateResult[controlModel.name].push(iterateControlModels(arrayItemModel.group, arrayItemModel.index));
           }
           continue;
@@ -148,14 +142,14 @@ export class FormBuilderService extends DynamicFormService {
 
         let controlId;
         // Get the field's name
-        if (controlModel instanceof DynamicQualdropModel) {
+        if (this.isQualdropGroup(controlModel)) {
           // If is instance of DynamicQualdropModel take the qualdrop id as field's name
-          controlId = controlModel.qualdropId;
+          controlId = (controlModel as DynamicQualdropModel).qualdropId;
         } else {
           controlId = controlModel.name;
         }
 
-        if (controlModel instanceof DynamicGroupModel) {
+        if (this.isRelationGroup(controlModel)) {
           const values = (controlModel as any).value;
           values.forEach((groupValue, groupIndex) => {
             const newGroupValue = Object.create({});
@@ -170,7 +164,6 @@ export class FormBuilderService extends DynamicFormService {
                   }
                 }
               });
-            // controlArrayValue.push(newGroupValue);
           })
         } else if (isNotUndefined((controlModel as any).value) && isNotEmpty((controlModel as any).value)) {
           const controlArrayValue = [];
@@ -217,49 +210,66 @@ export class FormBuilderService extends DynamicFormService {
     return rows;
   }
 
-  isModelInCustomGroup(model: DynamicFormControlModel) {
-    return model.parent &&
-      (model.parent instanceof DynamicConcatModel
-        || model.parent instanceof DynamicQualdropModel);
+  isModelInCustomGroup(model: DynamicFormControlModel): boolean {
+    return this.isCustomGroup((model as any).parent);
   }
 
-  hasArrayGroupValue(model: DynamicFormControlModel) {
+  hasArrayGroupValue(model: DynamicFormControlModel): boolean {
     return model && (this.isListGroup(model) || model.type === DYNAMIC_FORM_CONTROL_TYPE_TAG);
   }
 
-  hasMappedGroupValue(model: DynamicFormControlModel) {
-    return ((model.parent && model.parent instanceof DynamicQualdropModel)
-      || model.parent instanceof DynamicGroupModel);
+  hasMappedGroupValue(model: DynamicFormControlModel): boolean {
+    return (this.isQualdropGroup((model as any).parent)
+      || this.isRelationGroup((model as any).parent));
   }
 
-  isQualdropGroup(model: DynamicFormControlModel) {
-    return model && model instanceof DynamicQualdropModel;
+  isGroup(model: DynamicFormControlModel): boolean {
+    return model && (model.type === DYNAMIC_FORM_CONTROL_TYPE_GROUP || model.type === DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP);
   }
 
-  isCustomGroup(model: DynamicFormControlModel) {
+  isQualdropGroup(model: DynamicFormControlModel): boolean {
+    return (model && model.type === DYNAMIC_FORM_CONTROL_TYPE_GROUP && hasValue((model as any).qualdropId));
+  }
+
+  isCustomGroup(model: DynamicFormControlModel): boolean {
+    return model && ((model as any).type === DYNAMIC_FORM_CONTROL_TYPE_GROUP && (model as any).isCustomGroup === true);
+  }
+
+  isRowGroup(model: DynamicFormControlModel): boolean {
+    return model && ((model as any).type === DYNAMIC_FORM_CONTROL_TYPE_GROUP && (model as any).isRowGroup === true);
+  }
+
+  isCustomOrListGroup(model: DynamicFormControlModel): boolean {
     return model &&
-      (model instanceof DynamicConcatModel
-        || this.isQualdropGroup(model)
+      (this.isCustomGroup(model)
         || this.isListGroup(model));
   }
 
-  isListGroup(model: DynamicFormControlModel) {
+  isListGroup(model: DynamicFormControlModel): boolean {
     return model &&
-      (model instanceof DynamicListCheckboxGroupModel
-        || model instanceof DynamicListRadioGroupModel);
+      ((model.type === DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP && (model as any).isListGroup === true)
+        || (model.type === DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP && (model as any).isListGroup === true));
   }
 
-  isRelationGroup(model: DynamicFormControlModel) {
-    return model && model.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION;
+  isRelationGroup(model: DynamicFormControlModel): boolean {
+    return model && model.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP;
   }
 
-  getFormControlById(id: string, formGroup: FormGroup, groupModel: DynamicFormControlModel[], index = 0) {
+  isRowArrayGroup(model: DynamicFormControlModel): boolean {
+    return model.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY && (model as any).isRowArray === true;
+  }
+
+  isArrayGroup(model: DynamicFormControlModel): boolean {
+    return model.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY;
+  }
+
+  getFormControlById(id: string, formGroup: FormGroup, groupModel: DynamicFormControlModel[], index = 0): AbstractControl {
     const fieldModel = this.findById(id, groupModel, index);
     return isNotEmpty(fieldModel) ? formGroup.get(this.getPath(fieldModel)) : null;
   }
 
-  getId(model: DynamicPathable) {
-    if (model instanceof DynamicFormArrayGroupModel) {
+  getId(model: DynamicPathable): string {
+    if (this.isArrayGroup(model as DynamicFormControlModel)) {
       return model.index.toString();
     } else {
       return ((model as DynamicFormControlModel).id !== (model as DynamicFormControlModel).name) ?
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
index d21799c584..5d707e1cd4 100644
--- a/src/app/shared/form/builder/parsers/row-parser.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -1,4 +1,9 @@
-import { DynamicFormArrayModel, DynamicFormControlModel, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core';
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
+  DynamicFormArrayModel,
+  DynamicFormControlModel,
+  DynamicFormGroupModelConfig
+} from '@ng-dynamic-forms/core';
 import { uniqueId } from 'lodash';
 
 import { DateFieldParser } from './date-field-parser';
@@ -11,7 +16,10 @@ import { TagFieldParser } from './tag-field-parser';
 import { TextareaFieldParser } from './textarea-field-parser';
 import { GroupFieldParser } from './group-field-parser';
 import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model';
-import { DynamicGroupModel } from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP,
+  DynamicGroupModel
+} from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
 import { isEmpty } from '../../../empty.util';
 import { LookupFieldParser } from './lookup-field-parser';
@@ -98,7 +106,7 @@ export class RowParser {
       }
 
       if (fieldModel) {
-        if (fieldModel instanceof DynamicFormArrayModel || fieldModel instanceof DynamicGroupModel) {
+        if (fieldModel.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY || fieldModel.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP) {
           if (this.rowData.fields.length > 1) {
             setLayout(fieldModel, 'grid', 'host', layoutGridClass);
             config.group.push(fieldModel);
@@ -111,7 +119,7 @@ export class RowParser {
           }
           return;
         } else {
-          if (fieldModel instanceof Array) {
+          if (Array.isArray(fieldModel)) {
             fieldModel.forEach((model) => {
               parsedResult = model;
               return;
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index 155e009fb1..ccffe920d1 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -18,7 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { FormComponent } from './form.component';
 import { FormService } from './form.service';
 import { FormBuilderService } from './builder/form-builder.service';
-import { FormState } from './form.reducers';
+import { FormState } from './form.reducer';
 import { FormChangeAction, FormStatusChangeAction } from './form.actions';
 import { MockStore } from '../testing/mock-store';
 import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index 922f2e40f8..5958bfeeba 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -24,7 +24,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
 import { FormService } from './form.service';
 import { formObjectFromIdSelector } from './selectors';
-import { FormEntry, FormError } from './form.reducers';
+import { FormEntry, FormError } from './form.reducer';
 import { isEmpty } from 'lodash';
 
 /**
diff --git a/src/app/shared/form/form.reducer.spec.ts b/src/app/shared/form/form.reducer.spec.ts
index a76bfa5c03..ddd5f96ecd 100644
--- a/src/app/shared/form/form.reducer.spec.ts
+++ b/src/app/shared/form/form.reducer.spec.ts
@@ -1,4 +1,4 @@
-import { FormEntry, formReducer } from './form.reducers';
+import { FormEntry, formReducer } from './form.reducer';
 import {
   FormAddError,
   FormChangeAction, FormClearErrorsAction,
diff --git a/src/app/shared/form/form.reducers.ts b/src/app/shared/form/form.reducer.ts
similarity index 100%
rename from src/app/shared/form/form.reducers.ts
rename to src/app/shared/form/form.reducer.ts
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
index 4c7e84b4f2..dda6e018c6 100644
--- a/src/app/shared/form/form.service.spec.ts
+++ b/src/app/shared/form/form.service.spec.ts
@@ -12,7 +12,7 @@ import {
 import { FormService } from './form.service';
 import { FormBuilderService } from './builder/form-builder.service';
 import { AppState } from '../../app.reducer';
-import { formReducer } from './form.reducers';
+import { formReducer } from './form.reducer';
 
 describe('FormService test suite', () => {
   const formId = 'testForm';
diff --git a/src/app/shared/form/selectors.ts b/src/app/shared/form/selectors.ts
index a4f27945ef..aeefb5f984 100644
--- a/src/app/shared/form/selectors.ts
+++ b/src/app/shared/form/selectors.ts
@@ -1,7 +1,7 @@
-import { createSelector, MemoizedSelector, Selector } from '@ngrx/store';
+import { createSelector, MemoizedSelector } from '@ngrx/store';
 
 import { AppState } from '../../app.reducer';
-import { FormEntry, FormState } from './form.reducers';
+import { FormEntry, FormState } from './form.reducer';
 
 export const formStateSelector = (state: AppState) => state.forms;
 
diff --git a/src/app/shared/number-picker/number-picker.component.scss b/src/app/shared/number-picker/number-picker.component.scss
index 4fa2f3ac21..0f7c4067ac 100644
--- a/src/app/shared/number-picker/number-picker.component.scss
+++ b/src/app/shared/number-picker/number-picker.component.scss
@@ -12,15 +12,11 @@
   position: relative;
   top: 0.15em;
   transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
   vertical-align: middle;
   width: 0.71em;
 }
 .chevron.bottom:before {
   top: -.3em;
-  -webkit-transform: rotate(135deg);
-  -ms-transform: rotate(135deg);
   transform: rotate(135deg);
 }
 
diff --git a/src/app/shared/object.util.spec.ts b/src/app/shared/object.util.spec.ts
index 9f0e687dc1..c910e59e97 100644
--- a/src/app/shared/object.util.spec.ts
+++ b/src/app/shared/object.util.spec.ts
@@ -1,4 +1,4 @@
-import { deleteProperty, difference, isObjectEmpty } from './object.util';
+import { deleteProperty, difference, hasOnlyEmptyProperties } from './object.util';
 
 describe('Object Utils', () => {
   let object: any = {};
@@ -19,36 +19,36 @@ describe('Object Utils', () => {
 
   });
 
-  describe('isObjectEmpty', () => {
+  describe('hasOnlyEmptyProperties', () => {
 
     it('should return true when object is empty', () => {
       object = {};
-      expect(isObjectEmpty(object)).toBe(true);
+      expect(hasOnlyEmptyProperties(object)).toBe(true);
     });
 
     it('should return true when object has a null property', () => {
       object = {a: null};
-      expect(isObjectEmpty(object)).toBe(true);
+      expect(hasOnlyEmptyProperties(object)).toBe(true);
     });
 
     it('should return true when object property has an empty array as value', () => {
       object = {a: []};
-      expect(isObjectEmpty(object)).toBe(true);
+      expect(hasOnlyEmptyProperties(object)).toBe(true);
     });
 
     it('should return true when object property has an empty object as value', () => {
       object = {a: {}};
-      expect(isObjectEmpty(object)).toBe(true);
+      expect(hasOnlyEmptyProperties(object)).toBe(true);
     });
 
     it('should return false when object is not empty', () => {
       object = {a: 'a', b: 'b'};
-      expect(isObjectEmpty(object)).toBe(false);
+      expect(hasOnlyEmptyProperties(object)).toBe(false);
     });
 
     it('should return false when object has at least a valued property', () => {
       object = {a: [], b: 'b'};
-      expect(isObjectEmpty(object)).toBe(false);
+      expect(hasOnlyEmptyProperties(object)).toBe(false);
     });
 
   });
diff --git a/src/app/shared/object.util.ts b/src/app/shared/object.util.ts
index 1dccd2070a..60ed71096a 100644
--- a/src/app/shared/object.util.ts
+++ b/src/app/shared/object.util.ts
@@ -4,21 +4,21 @@ import { isEqual, isObject, transform } from 'lodash';
 /**
  * Returns passed object without specified property
  */
-export function deleteProperty(object, key): object {
+export function deleteProperty(object: object, key: string): object {
   const {[key]: deletedKey, ...otherKeys} = object;
   return otherKeys;
 }
 
 /**
  * Returns true if the passed object is empty or has only empty property.
- * isObjectEmpty({});               // true
- * isObjectEmpty({a: null});        // true
- * isObjectEmpty({a: []});          // true
- * isObjectEmpty({a: [], b: {});    // true
- * isObjectEmpty({a: 'a', b: 'b'}); // false
- * isObjectEmpty({a: [], b: 'b'});  // false
+ * hasOnlyEmptyProperties({});               // true
+ * hasOnlyEmptyProperties({a: null});        // true
+ * hasOnlyEmptyProperties({a: []});          // true
+ * hasOnlyEmptyProperties({a: [], b: {});    // true
+ * hasOnlyEmptyProperties({a: 'a', b: 'b'}); // false
+ * hasOnlyEmptyProperties({a: [], b: 'b'});  // false
  */
-export function isObjectEmpty(obj: any): boolean {
+export function hasOnlyEmptyProperties(obj: object): boolean {
   const objectType = typeof obj;
   if (objectType === 'object') {
     if (Object.keys(obj).length === 0) {
@@ -43,12 +43,12 @@ export function isObjectEmpty(obj: any): boolean {
  * difference({a: 'a', b: {}}, {a: 'a'});   // {}
  * difference({a: 'a'}, {a: 'a', b: 'b'});  // {}
  */
-export function difference(object, base) {
+export function difference(object: object, base: object) {
   const changes = (o, b) => {
     return transform(o, (result, value, key) => {
       if (!isEqual(value, b[key]) && isNotEmpty(value)) {
         const resultValue = (isObject(value) && isObject(b[key])) ? changes(value, b[key]) : value;
-        if (!isObjectEmpty(resultValue)) {
+        if (!hasOnlyEmptyProperties(resultValue)) {
           result[key] = resultValue;
         }
       }
diff --git a/src/app/shared/uploader/uploader.component.scss b/src/app/shared/uploader/uploader.component.scss
index f0b54bfe15..7e0f6fdd23 100644
--- a/src/app/shared/uploader/uploader.component.scss
+++ b/src/app/shared/uploader/uploader.component.scss
@@ -20,19 +20,19 @@
 }
 
 .ds-document-drop-zone-active {
-  z-index: 1025 !important;
+  z-index: $drop-zone-area-z-index !important;
 }
 
 .ds-document-drop-zone-inner {
   background-color: rgba($white, 0.7);
-  z-index: 1021;
+  z-index: $drop-zone-area-inner-z-index;
   top: 0;
   left: 0;
 }
 
 .ds-document-drop-zone-inner-content {
   border: 4px dashed map-get($theme-colors, primary);
-  z-index: 1021;
+  z-index: $drop-zone-area-inner-z-index;
 }
 
 .ds-document-drop-zone-inner-content p {
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 4dcc161cc4..8372aa934d 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -3,4 +3,7 @@ $content-spacing: $spacer * 1.5;
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
 $card-height-percentage:98%;
 $card-thumbnail-height:240px;
+$dropdown-menu-max-height: 200px;
+$drop-zone-area-z-index: 1025;
+$drop-zone-area-inner-z-index: 1021;
 

From 5554d4828b21f6e54a950ba9850e478ee94b15d8 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 3 Jul 2018 18:43:18 +0200
Subject: [PATCH 24/41] Updated the node version requirements to v8.x.x

---
 .travis.yml  | 2 +-
 README.md    | 2 +-
 package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index ce1213f483..91eaaaa99b 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,8 +10,8 @@ addons:
 language: node_js
 
 node_js:
-  - "6"
   - "8"
+  - "10"
 
 cache:
   yarn: true
diff --git a/README.md b/README.md
index 466e736de2..285f8829fd 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ If you're looking for the 2016 Angular 2 DSpace UI prototype, you can find it [h
 Quick start
 -----------
 
-**Ensure you're running [Node](https://nodejs.org) >= `v6.9.x`, [npm](https://www.npmjs.com/) >= `v3.x` and [yarn](https://yarnpkg.com) >= `v0.20.x`**
+**Ensure you're running [Node](https://nodejs.org) >= `v8.0.x`, [npm](https://www.npmjs.com/) >= `v3.x` and [yarn](https://yarnpkg.com) >= `v0.20.x`**
 
 ```bash
 # clone the repo
diff --git a/package.json b/package.json
index dcc22c6d71..c2b78815bf 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   },
   "license": "BSD-2-Clause",
   "engines": {
-    "node": ">=6.0.0"
+    "node": ">=8.0.0"
   },
   "scripts": {
     "global": "npm install -g @angular/cli marked node-gyp nodemon node-nightly npm-check-updates npm-run-all rimraf typescript ts-node typedoc webpack webpack-bundle-analyzer pm2 rollup",

From 635128d43920607beb6886722f81351b4f9ba2f5 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 4 Jul 2018 10:00:15 +0200
Subject: [PATCH 25/41] replaced travis build for node v10 with v9

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 91eaaaa99b..c35e903d0e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,7 +11,7 @@ language: node_js
 
 node_js:
   - "8"
-  - "10"
+  - "9"
 
 cache:
   yarn: true

From f627c9443eb91ac0bd46515b060f5068ef2973b8 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 4 Jul 2018 12:14:11 +0200
Subject: [PATCH 26/41] Upgraded @nguniversal/express-engine

---
 package.json | 4 ++--
 yarn.lock    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c2b78815bf..69744b9729 100644
--- a/package.json
+++ b/package.json
@@ -85,14 +85,14 @@
     "@ngrx/effects": "^5.1.0",
     "@ngrx/router-store": "^5.0.1",
     "@ngrx/store": "^5.1.0",
-    "@nguniversal/express-engine": "5.0.0-beta.5",
+    "@nguniversal/express-engine": "5.0.0",
     "@ngx-translate/core": "9.1.1",
     "@ngx-translate/http-loader": "2.0.1",
     "@nicky-lenaers/ngx-scroll-to": "^0.6.0",
     "angular-idle-preload": "2.0.4",
     "angular-sortablejs": "^2.5.0",
-    "angulartics2": "^5.2.0",
     "angular2-text-mask": "8.0.4",
+    "angulartics2": "^5.2.0",
     "body-parser": "1.18.2",
     "bootstrap": "^4.0.0",
     "cerialize": "0.1.18",
diff --git a/yarn.lock b/yarn.lock
index 77cd9b1e71..8c2d39acd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -118,9 +118,9 @@
     tree-kill "^1.0.0"
     webpack-sources "^1.1.0"
 
-"@nguniversal/express-engine@5.0.0-beta.5":
-  version "5.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@nguniversal/express-engine/-/express-engine-5.0.0-beta.5.tgz#3cbc0fb7f928012d61240681631581fb0ad327f5"
+"@nguniversal/express-engine@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@nguniversal/express-engine/-/express-engine-5.0.0.tgz#e218fa9fbc7b47379bc106f69ada274e05631243"
 
 "@ngx-translate/core@9.1.1":
   version "9.1.1"

From 8dd11c9a3ca4b94555ee8f990e834dd8abdf7e3c Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 4 Jul 2018 16:01:53 +0200
Subject: [PATCH 27/41] Added form field parser factory to remove switch in
 row-parser.ts

---
 .../builder/parsers/concat-field-parser.ts    | 20 ++---
 .../builder/parsers/date-field-parser.spec.ts | 13 ++-
 .../parsers/dropdown-field-parser.spec.ts     | 14 +--
 .../builder/parsers/dropdown-field-parser.ts  | 10 +--
 .../form/builder/parsers/field-parser.ts      |  7 +-
 .../parsers/group-field-parser.spec.ts        | 17 ++--
 .../builder/parsers/group-field-parser.ts     | 15 +---
 .../builder/parsers/list-field-parser.spec.ts | 16 ++--
 .../form/builder/parsers/list-field-parser.ts | 10 +--
 .../parsers/lookup-field-parser.spec.ts       | 14 +--
 .../builder/parsers/lookup-field-parser.ts    | 10 +--
 .../parsers/lookup-name-field-parser.spec.ts  | 14 +--
 .../parsers/lookup-name-field-parser.ts       | 10 +--
 .../builder/parsers/name-field-parser.spec.ts | 15 ++--
 .../form/builder/parsers/name-field-parser.ts |  6 +-
 .../parsers/onebox-field-parser.spec.ts       | 16 ++--
 .../builder/parsers/onebox-field-parser.ts    | 16 +---
 .../form/builder/parsers/parser-factory.ts    | 58 +++++++++++++
 .../form/builder/parsers/parser-options.ts    |  5 ++
 .../form/builder/parsers/parser-type.ts       | 13 +++
 .../shared/form/builder/parsers/row-parser.ts | 85 ++++---------------
 .../parsers/series-field-parser.spec.ts       | 15 ++--
 .../builder/parsers/series-field-parser.ts    |  6 +-
 .../builder/parsers/tag-field-parser.spec.ts  | 14 +--
 .../form/builder/parsers/tag-field-parser.ts  | 11 +--
 .../parsers/textarea-field-parser.spec.ts     | 14 +--
 .../builder/parsers/textarea-field-parser.ts  |  6 +-
 27 files changed, 230 insertions(+), 220 deletions(-)
 create mode 100644 src/app/shared/form/builder/parsers/parser-factory.ts
 create mode 100644 src/app/shared/form/builder/parsers/parser-options.ts
 create mode 100644 src/app/shared/form/builder/parsers/parser-type.ts

diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index 68d34f7bbe..f430a6e6cb 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -1,26 +1,26 @@
 import { FieldParser } from './field-parser';
 import { FormFieldModel } from '../models/form-field.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
-import {
-  DynamicFormControlLayout, DynamicInputModel,
-  DynamicInputModelConfig
-} from '@ng-dynamic-forms/core';
+import { DynamicFormControlLayout, DynamicInputModel, DynamicInputModelConfig } from '@ng-dynamic-forms/core';
 import {
   CONCAT_FIRST_INPUT_SUFFIX,
-  CONCAT_GROUP_SUFFIX, CONCAT_SECOND_INPUT_SUFFIX,
-  DynamicConcatModel, DynamicConcatModelConfig
+  CONCAT_GROUP_SUFFIX,
+  CONCAT_SECOND_INPUT_SUFFIX,
+  DynamicConcatModel,
+  DynamicConcatModelConfig
 } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { isNotEmpty } from '../../../empty.util';
+import { ParserOptions } from './parser-options';
 
 export class ConcatFieldParser extends FieldParser {
 
   constructor(protected configData: FormFieldModel,
               protected initFormValues,
-              protected readOnly: boolean,
-              private separator: string,
+              protected parserOptions: ParserOptions,
+              protected separator: string,
               protected firstPlaceholder: string = null,
               protected secondPlaceholder: string = null) {
-    super(configData, initFormValues, readOnly);
+    super(configData, initFormValues, parserOptions);
 
     this.separator = separator;
     this.firstPlaceholder = firstPlaceholder;
@@ -71,7 +71,7 @@ export class ConcatFieldParser extends FieldParser {
 
     // Init values
     if (isNotEmpty(fieldValue)) {
-      const  values = fieldValue.value.split(this.separator);
+      const values = fieldValue.value.split(this.separator);
 
       if (values.length > 1) {
         input1ModelConfig.value = values[0].trim();
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
index a103b53b35..bbcfa60621 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts
@@ -4,12 +4,17 @@ import { SeriesFieldParser } from './series-field-parser';
 import { DateFieldParser } from './date-field-parser';
 import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { ParserOptions } from './parser-options';
 
 describe('DateFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues: any = {};
 
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: null,
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -32,13 +37,13 @@ describe('DateFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new DateFieldParser(field, initFormValues, readOnly);
+    const parser = new DateFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof DateFieldParser).toBe(true);
   });
 
   it('should return a DynamicDsDatePickerModel object when repeatable option is false', () => {
-    const parser = new DateFieldParser(field, initFormValues, readOnly);
+    const parser = new DateFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -51,7 +56,7 @@ describe('DateFieldParser test suite', () => {
     };
     const expectedValue = '1983-11-18';
 
-    const parser = new DateFieldParser(field, initFormValues, readOnly);
+    const parser = new DateFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
index 52d886d405..5dfdcfa5ce 100644
--- a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts
@@ -1,13 +1,17 @@
 import { FormFieldModel } from '../models/form-field.model';
 import { DropdownFieldParser } from './dropdown-field-parser';
 import { DynamicScrollableDropdownModel } from '../ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
+import { ParserOptions } from './parser-options';
 
 describe('DropdownFieldParser test suite', () => {
   let field: FormFieldModel;
 
-  const authorityUuid = 'testScopeUUID';
   const initFormValues = {};
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -31,13 +35,13 @@ describe('DropdownFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new DropdownFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof DropdownFieldParser).toBe(true);
   });
 
   it('should return a DynamicScrollableDropdownModel object when repeatable option is false', () => {
-    const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new DropdownFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -46,7 +50,7 @@ describe('DropdownFieldParser test suite', () => {
 
   it('should throw when authority is not passed', () => {
     field.selectableMetadata[0].authority = null;
-    const parser = new DropdownFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new DropdownFieldParser(field, initFormValues, parserOptions);
 
     expect(() => parser.parse())
       .toThrow();
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
index 45d14bea69..d36bedd7a5 100644
--- a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
@@ -4,25 +4,17 @@ import {
   DynamicScrollableDropdownModel,
   DynamicScrollableDropdownModelConfig
 } from '../ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
-import { FormFieldModel } from '../models/form-field.model';
 import { isNotEmpty } from '../../../empty.util';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 export class DropdownFieldParser extends FieldParser {
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
     const dropdownModelConfig: DynamicScrollableDropdownModelConfig = this.initModel();
     let layout: DynamicFormControlLayout;
 
     if (isNotEmpty(this.configData.selectableMetadata[0].authority)) {
-      this.setAuthorityOptions(dropdownModelConfig, this.authorityUuid);
+      this.setAuthorityOptions(dropdownModelConfig, this.parserOptions.authorityUuid);
       if (isNotEmpty(fieldValue)) {
         dropdownModelConfig.value = fieldValue;
       }
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 409726ebe9..0ff38b80cd 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -11,12 +11,13 @@ import { DsDynamicInputModel, DsDynamicInputModelConfig } from '../ds-dynamic-fo
 import { DynamicFormControlLayout } from '@ng-dynamic-forms/core';
 import { setLayout } from './parser.utils';
 import { AuthorityOptions } from '../../../../core/integration/models/authority-options.model';
+import { ParserOptions } from './parser-options';
 
 export abstract class FieldParser {
 
   protected fieldId: string;
 
-  constructor(protected configData: FormFieldModel, protected initFormValues, protected readOnly: boolean) {
+  constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) {
   }
 
   public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject): any;
@@ -175,8 +176,8 @@ export abstract class FieldParser {
     controlModel.id = (this.fieldId).replace(/\./g, '_');
 
     // Set read only option
-    controlModel.readOnly = this.readOnly;
-    controlModel.disabled = this.readOnly;
+    controlModel.readOnly = this.parserOptions.readOnly;
+    controlModel.disabled = this.parserOptions.readOnly;
 
     if (label) {
       controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.spec.ts b/src/app/shared/form/builder/parsers/group-field-parser.spec.ts
index 43cf72b61c..abda8d7169 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.spec.ts
@@ -2,14 +2,17 @@ import { FormFieldModel } from '../models/form-field.model';
 import { GroupFieldParser } from './group-field-parser';
 import { DynamicGroupModel } from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { ParserOptions } from './parser-options';
 
 describe('GroupFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues = {};
 
-  const authorityUuid = 'testScopeUUID';
-  const readOnly = false;
-  const submissionScope = 'WORKSPACE';
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: 'WORKSPACE'
+  };
 
   beforeEach(() => {
     field = {
@@ -68,13 +71,13 @@ describe('GroupFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+    const parser = new GroupFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof GroupFieldParser).toBe(true);
   });
 
   it('should return a DynamicGroupModel object', () => {
-    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+    const parser = new GroupFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -83,7 +86,7 @@ describe('GroupFieldParser test suite', () => {
 
   it('should throw when rows configuration is empty', () => {
     field.rows = null;
-    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+    const parser = new GroupFieldParser(field, initFormValues, parserOptions);
 
     expect(() => parser.parse())
       .toThrow();
@@ -94,7 +97,7 @@ describe('GroupFieldParser test suite', () => {
       author: [new FormFieldMetadataValueObject('test author')],
       affiliation: [new FormFieldMetadataValueObject('test affiliation')]
     };
-    const parser = new GroupFieldParser(field, initFormValues, readOnly, submissionScope, authorityUuid);
+    const parser = new GroupFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
     const expectedValue = [{
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
index 6c9ce6606a..c724e46e2f 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -3,26 +3,19 @@ import { FormFieldMetadataValueObject } from '../models/form-field-metadata-valu
 import { FormFieldModel } from '../models/form-field.model';
 import {
   DynamicGroupModel,
-  DynamicGroupModelConfig, PLACEHOLDER_PARENT_METADATA
+  DynamicGroupModelConfig,
+  PLACEHOLDER_PARENT_METADATA
 } from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { isNotEmpty } from '../../../empty.util';
 import { FormRowModel } from '../../../../core/shared/config/config-submission-forms.model';
 
 export class GroupFieldParser extends FieldParser {
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected submissionScope: string,
-              protected authorityUuid: string,) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: FormFieldMetadataValueObject) {
     const modelConfiguration: DynamicGroupModelConfig = this.initModel();
 
-    modelConfiguration.scopeUUID = this.authorityUuid;
-    modelConfiguration.submissionScope = this.submissionScope;
+    modelConfiguration.scopeUUID = this.parserOptions.authorityUuid;
+    modelConfiguration.submissionScope = this.parserOptions.submissionScope;
     if (this.configData && this.configData.rows && this.configData.rows.length > 0) {
       modelConfiguration.formConfiguration = this.configData.rows;
       modelConfiguration.relationFields = [];
diff --git a/src/app/shared/form/builder/parsers/list-field-parser.spec.ts b/src/app/shared/form/builder/parsers/list-field-parser.spec.ts
index 65184e5433..b2fa0b2089 100644
--- a/src/app/shared/form/builder/parsers/list-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/list-field-parser.spec.ts
@@ -3,13 +3,17 @@ import { FormFieldMetadataValueObject } from '../models/form-field-metadata-valu
 import { ListFieldParser } from './list-field-parser';
 import { DynamicListCheckboxGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from '../ds-dynamic-form-ui/models/list/dynamic-list-radio-group.model';
+import { ParserOptions } from './parser-options';
 
 describe('ListFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues = {};
 
-  const authorityUuid = 'testScopeUUID';
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -33,13 +37,13 @@ describe('ListFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new ListFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof ListFieldParser).toBe(true);
   });
 
   it('should return a DynamicListCheckboxGroupModel object when repeatable option is true', () => {
-    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new ListFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -48,7 +52,7 @@ describe('ListFieldParser test suite', () => {
 
   it('should return a DynamicListRadioGroupModel object when repeatable option is false', () => {
     field.repeatable = false;
-    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new ListFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -61,7 +65,7 @@ describe('ListFieldParser test suite', () => {
     };
     const expectedValue = [new FormFieldMetadataValueObject('test type')];
 
-    const parser = new ListFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new ListFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/list-field-parser.ts b/src/app/shared/form/builder/parsers/list-field-parser.ts
index a502918a02..7fa062ad79 100644
--- a/src/app/shared/form/builder/parsers/list-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/list-field-parser.ts
@@ -1,5 +1,4 @@
 import { FieldParser } from './field-parser';
-import { FormFieldModel } from '../models/form-field.model';
 import { isNotEmpty } from '../../../empty.util';
 import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
@@ -9,13 +8,6 @@ import { DynamicListRadioGroupModel } from '../ds-dynamic-form-ui/models/list/dy
 export class ListFieldParser extends FieldParser {
   searchOptions: IntegrationSearchOptions;
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
     const listModelConfig = this.initModel();
     listModelConfig.repeatable = this.configData.repeatable;
@@ -34,7 +26,7 @@ export class ListFieldParser extends FieldParser {
           }
         });
       }
-      this.setAuthorityOptions(listModelConfig, this.authorityUuid);
+      this.setAuthorityOptions(listModelConfig, this.parserOptions.authorityUuid);
     }
 
     let listModel;
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts
index 209ff318ea..c45d39d5bb 100644
--- a/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts
@@ -2,13 +2,17 @@ import { FormFieldModel } from '../models/form-field.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import { LookupFieldParser } from './lookup-field-parser';
 import { DynamicLookupModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+import { ParserOptions } from './parser-options';
 
 describe('LookupFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues = {};
 
-  const authorityUuid = 'testScopeUUID';
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -32,13 +36,13 @@ describe('LookupFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new LookupFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new LookupFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof LookupFieldParser).toBe(true);
   });
 
   it('should return a DynamicLookupModel object when repeatable option is false', () => {
-    const parser = new LookupFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new LookupFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -51,7 +55,7 @@ describe('LookupFieldParser test suite', () => {
     };
     const expectedValue = new FormFieldMetadataValueObject('test journal');
 
-    const parser = new LookupFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new LookupFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
index 1962c3928e..08c0eb5830 100644
--- a/src/app/shared/form/builder/parsers/lookup-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
@@ -1,21 +1,13 @@
 import { FieldParser } from './field-parser';
-import { FormFieldModel } from '../models/form-field.model';
 import { DynamicLookupModel, DynamicLookupModelConfig } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
 
 export class LookupFieldParser extends FieldParser {
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: any): any {
     if (this.configData.selectableMetadata[0].authority) {
       const lookupModelConfig: DynamicLookupModelConfig = this.initModel();
 
-      this.setAuthorityOptions(lookupModelConfig, this.authorityUuid);
+      this.setAuthorityOptions(lookupModelConfig, this.parserOptions.authorityUuid);
 
       this.setValues(lookupModelConfig, fieldValue, true);
 
diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts
index e5d1df7dc1..b324ba7a7e 100644
--- a/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts
@@ -4,13 +4,17 @@ import { LookupFieldParser } from './lookup-field-parser';
 import { DynamicLookupModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
 import { LookupNameFieldParser } from './lookup-name-field-parser';
 import { DynamicLookupNameModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model';
+import { ParserOptions } from './parser-options';
 
 describe('LookupNameFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues = {};
 
-  const authorityUuid = 'testScopeUUID';
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -34,13 +38,13 @@ describe('LookupNameFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new LookupNameFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new LookupNameFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof LookupNameFieldParser).toBe(true);
   });
 
   it('should return a DynamicLookupNameModel object when repeatable option is false', () => {
-    const parser = new LookupNameFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new LookupNameFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -53,7 +57,7 @@ describe('LookupNameFieldParser test suite', () => {
     };
     const expectedValue = new FormFieldMetadataValueObject('test author');
 
-    const parser = new LookupNameFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new LookupNameFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
index d687ddf0c4..05e26b0522 100644
--- a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
@@ -1,4 +1,3 @@
-import { FormFieldModel } from '../models/form-field.model';
 import { FieldParser } from './field-parser';
 import {
   DynamicLookupNameModel,
@@ -7,18 +6,11 @@ import {
 
 export class LookupNameFieldParser extends FieldParser {
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: any): any {
     if (this.configData.selectableMetadata[0].authority) {
       const lookupModelConfig: DynamicLookupNameModelConfig = this.initModel();
 
-      this.setAuthorityOptions(lookupModelConfig, this.authorityUuid);
+      this.setAuthorityOptions(lookupModelConfig, this.parserOptions.authorityUuid);
 
       this.setValues(lookupModelConfig, fieldValue, true);
 
diff --git a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
index a72dacd909..889244e8f2 100644
--- a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts
@@ -2,6 +2,7 @@ import { FormFieldModel } from '../models/form-field.model';
 import { NameFieldParser } from './name-field-parser';
 import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { ParserOptions } from './parser-options';
 
 describe('NameFieldParser test suite', () => {
   let field1: FormFieldModel;
@@ -9,7 +10,11 @@ describe('NameFieldParser test suite', () => {
   let field3: FormFieldModel;
   let initFormValues: any = {};
 
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field1 = {
@@ -64,13 +69,13 @@ describe('NameFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new NameFieldParser(field1, initFormValues, readOnly);
+    const parser = new NameFieldParser(field1, initFormValues, parserOptions);
 
     expect(parser instanceof NameFieldParser).toBe(true);
   });
 
   it('should return a DynamicConcatModel object when repeatable option is false', () => {
-    const parser = new NameFieldParser(field2, initFormValues, readOnly);
+    const parser = new NameFieldParser(field2, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -78,7 +83,7 @@ describe('NameFieldParser test suite', () => {
   });
 
   it('should return a DynamicConcatModel object with the correct separator', () => {
-    const parser = new NameFieldParser(field2, initFormValues, readOnly);
+    const parser = new NameFieldParser(field2, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -91,7 +96,7 @@ describe('NameFieldParser test suite', () => {
     };
     const expectedValue = new FormFieldMetadataValueObject('test, name');
 
-    const parser = new NameFieldParser(field1, initFormValues, readOnly);
+    const parser = new NameFieldParser(field1, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/name-field-parser.ts b/src/app/shared/form/builder/parsers/name-field-parser.ts
index dbc9d45f86..896b3cc478 100644
--- a/src/app/shared/form/builder/parsers/name-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/name-field-parser.ts
@@ -1,10 +1,10 @@
 import { FormFieldModel } from '../models/form-field.model';
-
 import { ConcatFieldParser } from './concat-field-parser';
+import { ParserOptions } from './parser-options';
 
 export class NameFieldParser extends ConcatFieldParser {
 
-  constructor(protected configData: FormFieldModel, protected initFormValues, protected readOnly: boolean) {
-    super(configData, initFormValues, readOnly, ',', 'form.last-name', 'form.first-name');
+  constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) {
+    super(configData, initFormValues, parserOptions, ',', 'form.last-name', 'form.first-name');
   }
 }
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts
index 4e764a3b36..89c576bf3a 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts
@@ -3,15 +3,19 @@ import { OneboxFieldParser } from './onebox-field-parser';
 import { DynamicQualdropModel } from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { DynamicTypeaheadModel } from '../ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.model';
 import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
+import { ParserOptions } from './parser-options';
 
 describe('OneboxFieldParser test suite', () => {
   let field1: FormFieldModel;
   let field2: FormFieldModel;
   let field3: FormFieldModel;
 
-  const authorityUuid = 'testScopeUUID';
   const initFormValues = {};
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field1 = {
@@ -66,13 +70,13 @@ describe('OneboxFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new OneboxFieldParser(field1, initFormValues, readOnly, authorityUuid);
+    const parser = new OneboxFieldParser(field1, initFormValues, parserOptions);
 
     expect(parser instanceof OneboxFieldParser).toBe(true);
   });
 
   it('should return a DynamicQualdropModel object when selectableMetadata is multiple', () => {
-    const parser = new OneboxFieldParser(field2, initFormValues, readOnly, authorityUuid);
+    const parser = new OneboxFieldParser(field2, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -80,7 +84,7 @@ describe('OneboxFieldParser test suite', () => {
   });
 
   it('should return a DsDynamicInputModel object when selectableMetadata is not multiple', () => {
-    const parser = new OneboxFieldParser(field3, initFormValues, readOnly, authorityUuid);
+    const parser = new OneboxFieldParser(field3, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -88,7 +92,7 @@ describe('OneboxFieldParser test suite', () => {
   });
 
   it('should return a DynamicTypeaheadModel object when selectableMetadata has authority', () => {
-    const parser = new OneboxFieldParser(field1, initFormValues, readOnly, authorityUuid);
+    const parser = new OneboxFieldParser(field1, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index 703e79bf56..8af01961ad 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -1,13 +1,12 @@
 import { DynamicSelectModel, DynamicSelectModelConfig } from '@ng-dynamic-forms/core';
 
 import { FieldParser } from './field-parser';
-import { FormFieldModel } from '../models/form-field.model';
 import {
+  DsDynamicQualdropModelConfig,
+  DynamicQualdropModel,
   QUALDROP_GROUP_SUFFIX,
   QUALDROP_METADATA_SUFFIX,
-  QUALDROP_VALUE_SUFFIX,
-  DsDynamicQualdropModelConfig,
-  DynamicQualdropModel
+  QUALDROP_VALUE_SUFFIX
 } from '../ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import { isNotEmpty } from '../../../empty.util';
@@ -19,13 +18,6 @@ import {
 
 export class OneboxFieldParser extends FieldParser {
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
     if (this.configData.selectableMetadata.length > 1) {
       // Case ComboBox
@@ -79,7 +71,7 @@ export class OneboxFieldParser extends FieldParser {
       return new DynamicQualdropModel(inputSelectGroup, clsGroup);
     } else if (this.configData.selectableMetadata[0].authority) {
       const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel();
-      this.setAuthorityOptions(typeaheadModelConfig, this.authorityUuid);
+      this.setAuthorityOptions(typeaheadModelConfig, this.parserOptions.authorityUuid);
       this.setValues(typeaheadModelConfig, fieldValue, true);
       const typeaheadModel = new DynamicTypeaheadModel(typeaheadModelConfig);
       return typeaheadModel;
diff --git a/src/app/shared/form/builder/parsers/parser-factory.ts b/src/app/shared/form/builder/parsers/parser-factory.ts
new file mode 100644
index 0000000000..da5bee0be2
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/parser-factory.ts
@@ -0,0 +1,58 @@
+import { ParserType } from './parser-type';
+import { GenericConstructor } from '../../../../core/shared/generic-constructor';
+import { FieldParser } from './field-parser';
+import { DateFieldParser } from './date-field-parser';
+import { DropdownFieldParser } from './dropdown-field-parser';
+import { GroupFieldParser } from './group-field-parser';
+import { ListFieldParser } from './list-field-parser';
+import { LookupFieldParser } from './lookup-field-parser';
+import { LookupNameFieldParser } from './lookup-name-field-parser';
+import { OneboxFieldParser } from './onebox-field-parser';
+import { NameFieldParser } from './name-field-parser';
+import { SeriesFieldParser } from './series-field-parser';
+import { TagFieldParser } from './tag-field-parser';
+import { TextareaFieldParser } from './textarea-field-parser';
+
+export class ParserFactory {
+  public static getConstructor(type: ParserType): GenericConstructor<FieldParser> {
+    switch (type) {
+      case ParserType.Date: {
+        return DateFieldParser
+      }
+      case ParserType.Dropdown: {
+        return DropdownFieldParser
+      }
+      case ParserType.Group: {
+        return GroupFieldParser
+      }
+      case ParserType.List: {
+        return ListFieldParser
+      }
+      case ParserType.Lookup: {
+        return LookupFieldParser
+      }
+      case ParserType.LookupName: {
+        return LookupNameFieldParser
+      }
+      case ParserType.Onebox: {
+        return OneboxFieldParser
+      }
+      case ParserType.Name: {
+        return NameFieldParser
+      }
+      case ParserType.Series: {
+        return SeriesFieldParser
+      }
+      case ParserType.Tag: {
+        return TagFieldParser
+      }
+      case ParserType.Textarea: {
+        return TextareaFieldParser
+      }
+
+      default: {
+        return undefined;
+      }
+    }
+  }
+}
diff --git a/src/app/shared/form/builder/parsers/parser-options.ts b/src/app/shared/form/builder/parsers/parser-options.ts
new file mode 100644
index 0000000000..f96ce0f2f3
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/parser-options.ts
@@ -0,0 +1,5 @@
+export interface ParserOptions {
+  readOnly: boolean;
+  submissionScope: string;
+  authorityUuid: string
+}
diff --git a/src/app/shared/form/builder/parsers/parser-type.ts b/src/app/shared/form/builder/parsers/parser-type.ts
new file mode 100644
index 0000000000..d6bddf867c
--- /dev/null
+++ b/src/app/shared/form/builder/parsers/parser-type.ts
@@ -0,0 +1,13 @@
+export enum ParserType {
+  Date = 'date',
+  Dropdown = 'dropdown',
+  Group = 'group',
+  List = 'list',
+  Lookup = 'lookup',
+  LookupName = 'lookup-name',
+  Onebox = 'onebox',
+  Name = 'name',
+  Series = 'series',
+  Tag = 'tag',
+  Textarea = 'textarea'
+}
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
index 5d707e1cd4..f315be451e 100644
--- a/src/app/shared/form/builder/parsers/row-parser.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -1,32 +1,15 @@
-import {
-  DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
-  DynamicFormArrayModel,
-  DynamicFormControlModel,
-  DynamicFormGroupModelConfig
-} from '@ng-dynamic-forms/core';
+import { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core';
 import { uniqueId } from 'lodash';
 
-import { DateFieldParser } from './date-field-parser';
-import { DropdownFieldParser } from './dropdown-field-parser';
-import { ListFieldParser } from './list-field-parser';
-import { OneboxFieldParser } from './onebox-field-parser';
-import { NameFieldParser } from './name-field-parser';
-import { SeriesFieldParser } from './series-field-parser';
-import { TagFieldParser } from './tag-field-parser';
-import { TextareaFieldParser } from './textarea-field-parser';
-import { GroupFieldParser } from './group-field-parser';
 import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model';
-import {
-  DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP,
-  DynamicGroupModel
-} from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from '../ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model';
 import { isEmpty } from '../../../empty.util';
-import { LookupFieldParser } from './lookup-field-parser';
-import { LookupNameFieldParser } from './lookup-name-field-parser';
-import { DsDynamicInputModel } from '../ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { setLayout } from './parser.utils';
 import { FormFieldModel } from '../models/form-field.model';
+import { ParserType } from './parser-type';
+import { ParserOptions } from './parser-options';
+import { ParserFactory } from './parser-factory';
 
 export const ROW_ID_PREFIX = 'df-row-group-config-';
 
@@ -53,56 +36,20 @@ export class RowParser {
 
     const layoutGridClass = ' col-sm-' + Math.trunc(12 / scopedFields.length) + ' d-flex flex-column justify-content-start';
 
+    const parserOptions: ParserOptions = {
+      readOnly: this.readOnly,
+      submissionScope: this.submissionScope,
+      authorityUuid: this.authorityOptions.uuid
+    };
+
     // Iterate over row's fields
     scopedFields.forEach((fieldData: FormFieldModel) => {
 
-      switch (fieldData.input.type) {
-        case 'date':
-          fieldModel = (new DateFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
-          break;
-
-        case 'dropdown':
-          fieldModel = (new DropdownFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
-          break;
-
-        case 'list':
-          fieldModel = (new ListFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
-          break;
-
-        case 'lookup':
-          fieldModel = (new LookupFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
-          break;
-
-        case 'onebox':
-          fieldModel = (new OneboxFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
-          break;
-
-        case 'lookup-name':
-          fieldModel = (new LookupNameFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
-          break;
-
-        case 'name':
-          fieldModel = (new NameFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
-          break;
-
-        case 'series':
-          fieldModel = (new SeriesFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
-          break;
-
-        case 'tag':
-          fieldModel = (new TagFieldParser(fieldData, this.initFormValues, this.readOnly, this.authorityOptions.uuid).parse());
-          break;
-
-        case 'textarea':
-          fieldModel = (new TextareaFieldParser(fieldData, this.initFormValues, this.readOnly).parse());
-          break;
-
-        case 'group':
-          fieldModel = new GroupFieldParser(fieldData, this.initFormValues, this.readOnly, this.submissionScope, this.authorityOptions.uuid).parse();
-          break;
-
-        default:
-          throw new Error(`unknown form control model type defined on JSON object with label "${fieldData.label}"`);
+      const parserCo = ParserFactory.getConstructor(fieldData.input.type as ParserType);
+      if (parserCo) {
+        fieldModel = new parserCo(fieldData, this.initFormValues, parserOptions).parse();
+      } else {
+        throw new Error(`unknown form control model type defined with label "${fieldData.label}"`);
       }
 
       if (fieldModel) {
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
index af228ea488..95351d027f 100644
--- a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts
@@ -2,12 +2,17 @@ import { FormFieldModel } from '../models/form-field.model';
 import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
 import { SeriesFieldParser } from './series-field-parser';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { ParserOptions } from './parser-options';
 
 describe('SeriesFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues: any = {};
 
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -27,13 +32,13 @@ describe('SeriesFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+    const parser = new SeriesFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof SeriesFieldParser).toBe(true);
   });
 
   it('should return a DynamicConcatModel object when repeatable option is false', () => {
-    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+    const parser = new SeriesFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -41,7 +46,7 @@ describe('SeriesFieldParser test suite', () => {
   });
 
   it('should return a DynamicConcatModel object with the correct separator', () => {
-    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+    const parser = new SeriesFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -54,7 +59,7 @@ describe('SeriesFieldParser test suite', () => {
     };
     const expectedValue = new FormFieldMetadataValueObject('test; series');
 
-    const parser = new SeriesFieldParser(field, initFormValues, readOnly);
+    const parser = new SeriesFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/series-field-parser.ts b/src/app/shared/form/builder/parsers/series-field-parser.ts
index dd0b406e8e..9857b4e993 100644
--- a/src/app/shared/form/builder/parsers/series-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/series-field-parser.ts
@@ -1,10 +1,10 @@
 import { FormFieldModel } from '../models/form-field.model';
-
 import { ConcatFieldParser } from './concat-field-parser';
+import { ParserOptions } from './parser-options';
 
 export class SeriesFieldParser extends ConcatFieldParser {
 
-  constructor(protected configData: FormFieldModel, protected initFormValues, protected readOnly: boolean) {
-    super(configData, initFormValues, readOnly, ';');
+  constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) {
+    super(configData, initFormValues, parserOptions, ';');
   }
 }
diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts b/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts
index d71681b32d..3051dc6395 100644
--- a/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts
@@ -2,13 +2,17 @@ import { FormFieldModel } from '../models/form-field.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import { TagFieldParser } from './tag-field-parser';
 import { DynamicTagModel } from '../ds-dynamic-form-ui/models/tag/dynamic-tag.model';
+import { ParserOptions } from './parser-options';
 
 describe('TagFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues: any = {};
 
-  const authorityUuid = 'testScopeUUID';
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: 'testScopeUUID',
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -32,13 +36,13 @@ describe('TagFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new TagFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new TagFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof TagFieldParser).toBe(true);
   });
 
   it('should return a DynamicTagModel object when repeatable option is false', () => {
-    const parser = new TagFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new TagFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -53,7 +57,7 @@ describe('TagFieldParser test suite', () => {
       ],
     };
 
-    const parser = new TagFieldParser(field, initFormValues, readOnly, authorityUuid);
+    const parser = new TagFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.ts b/src/app/shared/form/builder/parsers/tag-field-parser.ts
index 9520589f51..91fafd5a58 100644
--- a/src/app/shared/form/builder/parsers/tag-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/tag-field-parser.ts
@@ -1,23 +1,14 @@
 import { FieldParser } from './field-parser';
-import { FormFieldModel } from '../models/form-field.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
-import { isNotEmpty } from '../../../empty.util';
 import { DynamicTagModel, DynamicTagModelConfig } from '../ds-dynamic-form-ui/models/tag/dynamic-tag.model';
 
 export class TagFieldParser extends FieldParser {
 
-  constructor(protected configData: FormFieldModel,
-              protected initFormValues,
-              protected readOnly: boolean,
-              protected authorityUuid: string) {
-    super(configData, initFormValues, readOnly);
-  }
-
   public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
     const tagModelConfig: DynamicTagModelConfig = this.initModel();
     if (this.configData.selectableMetadata[0].authority
       && this.configData.selectableMetadata[0].authority.length > 0) {
-      this.setAuthorityOptions(tagModelConfig, this.authorityUuid);
+      this.setAuthorityOptions(tagModelConfig, this.parserOptions.authorityUuid);
     }
 
     this.setValues(tagModelConfig, fieldValue, null, true);
diff --git a/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts b/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts
index 3dbc9c0814..c26d758e48 100644
--- a/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts
@@ -2,13 +2,17 @@ import { FormFieldModel } from '../models/form-field.model';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 import { TextareaFieldParser } from './textarea-field-parser';
 import { DsDynamicTextAreaModel } from '../ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
+import { ParserOptions } from './parser-options';
 
 describe('TextareaFieldParser test suite', () => {
   let field: FormFieldModel;
   let initFormValues: any = {};
 
-  const authorityUuid = 'testScopeUUID';
-  const readOnly = false;
+  const parserOptions: ParserOptions = {
+    readOnly: false,
+    submissionScope: null,
+    authorityUuid: null
+  };
 
   beforeEach(() => {
     field = {
@@ -30,13 +34,13 @@ describe('TextareaFieldParser test suite', () => {
   });
 
   it('should init parser properly', () => {
-    const parser = new TextareaFieldParser(field, initFormValues, readOnly);
+    const parser = new TextareaFieldParser(field, initFormValues, parserOptions);
 
     expect(parser instanceof TextareaFieldParser).toBe(true);
   });
 
   it('should return a DsDynamicTextAreaModel object when repeatable option is false', () => {
-    const parser = new TextareaFieldParser(field, initFormValues, readOnly);
+    const parser = new TextareaFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
@@ -51,7 +55,7 @@ describe('TextareaFieldParser test suite', () => {
     };
     const expectedValue ='test description';
 
-    const parser = new TextareaFieldParser(field, initFormValues, readOnly);
+    const parser = new TextareaFieldParser(field, initFormValues, parserOptions);
 
     const fieldModel = parser.parse();
 
diff --git a/src/app/shared/form/builder/parsers/textarea-field-parser.ts b/src/app/shared/form/builder/parsers/textarea-field-parser.ts
index 4596bb18ce..de3728b2b5 100644
--- a/src/app/shared/form/builder/parsers/textarea-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/textarea-field-parser.ts
@@ -1,10 +1,6 @@
 import { FieldParser } from './field-parser';
-import {
-  DynamicFormControlLayout, DynamicTextAreaModel, DynamicTextAreaModelConfig
-} from '@ng-dynamic-forms/core';
-import { FormFieldModel } from '../models/form-field.model';
+import { DynamicFormControlLayout } from '@ng-dynamic-forms/core';
 import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
-import { isNotEmpty } from '../../../empty.util';
 import {
   DsDynamicTextAreaModel,
   DsDynamicTextAreaModelConfig

From 0c63fe469be46c9c95a923bf23b2f8958e31fb18 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 5 Jul 2018 14:54:39 +0200
Subject: [PATCH 28/41] Fixes

---
 src/app/core/integration/integration-data.ts                  | 2 +-
 src/app/shared/chips/chips.component.spec.ts                  | 4 +---
 .../ds-dynamic-form-ui/ds-dynamic-form-control.component.html | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/core/integration/integration-data.ts b/src/app/core/integration/integration-data.ts
index cdcec605da..b93ce36dad 100644
--- a/src/app/core/integration/integration-data.ts
+++ b/src/app/core/integration/integration-data.ts
@@ -2,7 +2,7 @@ import { PageInfo } from '../shared/page-info.model';
 import { IntegrationModel } from './models/integration.model';
 
 /**
- * A class to represent the data retrieved by a Eperson service
+ * A class to represent the data retrieved by an Integration service
  */
 export class IntegrationData {
   constructor(
diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts
index b060b93012..256c29ed86 100644
--- a/src/app/shared/chips/chips.component.spec.ts
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -6,11 +6,9 @@ import 'rxjs/add/observable/of';
 import { Chips } from './models/chips.model';
 import { UploaderService } from '../uploader/uploader.service';
 import { ChipsComponent } from './chips.component';
-import { NgbModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SortablejsModule } from 'angular-sortablejs';
 import { By } from '@angular/platform-browser';
-import { PaginationComponent } from '../pagination/pagination.component';
-import { TruncatableComponent } from '../truncatable/truncatable.component';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
index 7b8501e7af..a6b17de5ed 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -329,7 +329,7 @@
           ></ds-dynamic-lookup>
         </ng-container>
 
-        <small *ngIf="showHint" class="text-muted" [innerHTML]="model.hint"
+        <small *ngIf="model.hint" class="text-muted" [innerHTML]="model.hint"
                [ngClass]="getClass('element', 'hint')"></small>
 
         <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">

From 7315337c64270123156484d55314e3cf0d618eb4 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 5 Jul 2018 16:43:07 +0200
Subject: [PATCH 29/41] adjusted parser methods

---
 .../builder/parsers/concat-field-parser.ts    |  2 +-
 .../form/builder/parsers/field-parser.ts      | 19 ++++++++++++-------
 .../builder/parsers/group-field-parser.ts     |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index f430a6e6cb..14a722b776 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -97,7 +97,7 @@ export class ConcatFieldParser extends FieldParser {
       }
     };
     const concatModel = new DynamicConcatModel(concatGroup, clsGroup);
-    concatModel.name = this.getFieldId()[0];
+    concatModel.name = this.getFieldId();
 
     return concatModel;
   }
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 0ff38b80cd..52a7252bcf 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -62,7 +62,7 @@ export abstract class FieldParser {
 
       const layout: DynamicFormControlLayout = {
         grid: {
-          group: 'dsgridgroup form-row'
+          group: 'form-row'
         }
       };
 
@@ -78,7 +78,7 @@ export abstract class FieldParser {
   }
 
   protected getInitValueCount(index = 0, fieldId?): number {
-    const fieldIds = fieldId || this.getFieldId();
+    const fieldIds = fieldId || this.getAllFieldIds();
     if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds[0])) {
       return this.initFormValues[fieldIds[0]].length;
     } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
@@ -95,7 +95,7 @@ export abstract class FieldParser {
   }
 
   protected getInitGroupValues(): FormFieldMetadataValueObject[] {
-    const fieldIds = this.getFieldId();
+    const fieldIds = this.getAllFieldIds();
     if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds[0])) {
       return this.initFormValues[fieldIds[0]];
     }
@@ -108,7 +108,7 @@ export abstract class FieldParser {
   }
 
   protected getInitFieldValue(outerIndex = 0, innerIndex = 0, fieldId?): FormFieldMetadataValueObject {
-    const fieldIds = fieldId || this.getFieldId();
+    const fieldIds = fieldId || this.getAllFieldIds();
     if (isNotEmpty(this.initFormValues)
       && isNotNull(fieldIds)
       && fieldIds.length === 1
@@ -132,7 +132,7 @@ export abstract class FieldParser {
   }
 
   protected getInitArrayIndex() {
-    const fieldIds: any = this.getFieldId();
+    const fieldIds: any = this.getAllFieldIds();
     if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length === 1 && this.initFormValues.hasOwnProperty(fieldIds)) {
       return this.initFormValues[fieldIds].length;
     } else if (isNotEmpty(this.initFormValues) && isNotNull(fieldIds) && fieldIds.length > 1) {
@@ -148,7 +148,12 @@ export abstract class FieldParser {
     }
   }
 
-  protected getFieldId(): string[] {
+  protected getFieldId(): string {
+    const ids = this.getAllFieldIds();
+    return isNotNull(ids) ? ids[0] : null;
+  }
+
+  protected getAllFieldIds(): string[] {
     if (Array.isArray(this.configData.selectableMetadata)) {
       if (this.configData.selectableMetadata.length === 1) {
         return [this.configData.selectableMetadata[0].metadata];
@@ -167,7 +172,7 @@ export abstract class FieldParser {
     const controlModel = Object.create(null);
 
     // Sets input ID
-    this.fieldId = id ? id : this.getFieldId()[0];
+    this.fieldId = id ? id : this.getFieldId();
 
     // Sets input name (with the original field's id value)
     controlModel.name = this.fieldId;
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
index c724e46e2f..11bf425ae6 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -55,7 +55,7 @@ export class GroupFieldParser extends FieldParser {
     };
 
     const model = new DynamicGroupModel(modelConfiguration, cls);
-    model.name = this.getFieldId()[0];
+    model.name = this.getFieldId();
     return model;
   }
 

From ccb50f69d6f6c9f8ab7d346f08f9d13dff7e6389 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Fri, 6 Jul 2018 14:20:09 +0200
Subject: [PATCH 30/41] Added support for regex validation

---
 resources/i18n/en.json                        |  7 ++++++-
 .../ds-dynamic-form-control.component.html    |  2 +-
 .../form/builder/form-builder.service.ts      |  2 +-
 .../form/builder/models/form-field.model.ts   |  1 +
 .../form/builder/parsers/field-parser.ts      | 19 +++++++++++++++++++
 .../form/builder/parsers/row-parser.spec.ts   |  5 ++++-
 .../number-picker/number-picker.component.ts  |  8 +-------
 7 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index dc316af0bf..e24ece36ee 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -168,6 +168,11 @@
     "group-collapse": "Collapse",
     "group-expand": "Expand",
     "group-collapse-help": "Click here to collapse",
-    "group-expand-help": "Click here to expand and add more element"
+    "group-expand-help": "Click here to expand and add more element",
+    "error": {
+      "validation": {
+        "pattern": "This input is restricted by the current pattern: {{ pattern }}."
+      }
+    }
   }
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
index a6b17de5ed..db5bc92574 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control.component.html
@@ -333,7 +333,7 @@
                [ngClass]="getClass('element', 'hint')"></small>
 
         <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message }}</small>
+            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate:model.validators }}</small>
         </div>
 
       </ng-container>
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index 0fb8f9ef11..b87b9e4381 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -156,7 +156,7 @@ export class FormBuilderService extends DynamicFormService {
             Object.keys(groupValue)
               .forEach((key) => {
                 const normValue = normalizeValue(controlModel, groupValue[key], groupIndex);
-                if (normValue.hasValue()) {
+                if (isNotEmpty(normValue) && normValue.hasValue()) {
                   if (iterateResult.hasOwnProperty(key)) {
                     iterateResult[key].push(normValue);
                   } else {
diff --git a/src/app/shared/form/builder/models/form-field.model.ts b/src/app/shared/form/builder/models/form-field.model.ts
index faf51f14d3..95b8798d5f 100644
--- a/src/app/shared/form/builder/models/form-field.model.ts
+++ b/src/app/shared/form/builder/models/form-field.model.ts
@@ -26,6 +26,7 @@ export class FormFieldModel {
   @autoserialize
   input: {
     type: string;
+    regex?: string;
   };
 
   @autoserialize
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 52a7252bcf..638fe5ea59 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -194,6 +194,11 @@ export abstract class FieldParser {
       this.markAsRequired(controlModel);
     }
 
+    if (this.hasRegex()) {
+      console.log(this.configData.input.regex);
+      this.addPatternValidator(controlModel);
+    }
+
     // Available Languages
     if (this.configData.languageCodes && this.configData.languageCodes.length > 0) {
       (controlModel as DsDynamicInputModel).languageCodes = this.configData.languageCodes;
@@ -202,6 +207,20 @@ export abstract class FieldParser {
     return controlModel;
   }
 
+  protected hasRegex() {
+    return hasValue(this.configData.input.regex);
+  }
+
+  protected addPatternValidator(controlModel) {
+    const regex = new RegExp(this.configData.input.regex);
+    controlModel.validators = Object.assign({}, controlModel.validators, {pattern: regex});
+    controlModel.errorMessages = Object.assign(
+      {},
+      controlModel.errorMessages,
+      {pattern: 'form.error.validation.pattern', regex: 'form.error.validation.pattern'});
+
+  }
+
   protected markAsRequired(controlModel) {
     controlModel.required = true;
     controlModel.validators = Object.assign({}, controlModel.validators, {required: null});
diff --git a/src/app/shared/form/builder/parsers/row-parser.spec.ts b/src/app/shared/form/builder/parsers/row-parser.spec.ts
index b7bb083de7..54a6bc6a27 100644
--- a/src/app/shared/form/builder/parsers/row-parser.spec.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.spec.ts
@@ -71,7 +71,10 @@ describe('RowParser test suite', () => {
     row2 = {
       fields: [
         {
-          input: {type: 'onebox'},
+          input: {
+            type: 'onebox',
+            regex: '^[a-zA-Z0-9]+$'
+          },
           label: 'Title',
           mandatory: 'false',
           repeatable: true,
diff --git a/src/app/shared/number-picker/number-picker.component.ts b/src/app/shared/number-picker/number-picker.component.ts
index 56be174055..99cc138d8c 100644
--- a/src/app/shared/number-picker/number-picker.component.ts
+++ b/src/app/shared/number-picker/number-picker.component.ts
@@ -122,13 +122,7 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
   }
 
   writeValue(value) {
-    if (this.startValue) {
-      this.startValue = this.value;
-      this.value = value;
-    } else {
-      // First init
-      this.startValue = value || this.min;
-    }
+    this.startValue = value || this.min;
   }
 
   registerOnChange(fn) {

From 499b5bf51be97a59d96591a47d988bb2c1673a8b Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 9 Jul 2018 10:05:52 +0200
Subject: [PATCH 31/41] Removed console.log

---
 src/app/shared/form/builder/parsers/field-parser.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 638fe5ea59..ce41e3e9a7 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -195,7 +195,6 @@ export abstract class FieldParser {
     }
 
     if (this.hasRegex()) {
-      console.log(this.configData.input.regex);
       this.addPatternValidator(controlModel);
     }
 

From 4d89674cda3997095baec23ba5880a02f27ea999 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 9 Jul 2018 19:02:09 +0200
Subject: [PATCH 32/41] Fixed server side form validation

---
 config/environment.default.js                 |  8 ++
 src/app/shared/form/form.component.spec.ts    | 12 ++-
 src/app/shared/form/form.service.spec.ts      | 11 ++-
 src/app/shared/form/form.service.ts           | 83 +++++++++++--------
 .../number-picker.component.html              |  1 +
 .../number-picker/number-picker.component.ts  |  5 ++
 src/config/form-config.interfaces.ts          |  9 ++
 src/config/global-config.interface.ts         |  2 +
 8 files changed, 95 insertions(+), 36 deletions(-)
 create mode 100644 src/config/form-config.interfaces.ts

diff --git a/config/environment.default.js b/config/environment.default.js
index 4f3aee5f0e..a6ef738f41 100644
--- a/config/environment.default.js
+++ b/config/environment.default.js
@@ -22,6 +22,14 @@ module.exports = {
     // msToLive: 1000, // 15 minutes
     control: 'max-age=60' // revalidate browser
   },
+  // Form settings
+  form: {
+    // NOTE: Map server-side validators to comparative Angular form validators
+    validatorMap: {
+      required: 'required',
+      regex: 'pattern'
+    }
+  },
   // Notifications
   notifications: {
     rtl: false,
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index ccffe920d1..576af76141 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -22,6 +22,7 @@ import { FormState } from './form.reducer';
 import { FormChangeAction, FormStatusChangeAction } from './form.actions';
 import { MockStore } from '../testing/mock-store';
 import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
+import { GLOBAL_CONFIG } from '../../../config';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -102,11 +103,19 @@ export const TEST_FORM_MODEL_WITH_ARRAY = [
 ];
 
 describe('FormComponent test suite', () => {
-
   let testComp: TestComponent;
   let formComp: FormComponent;
   let testFixture: ComponentFixture<TestComponent>;
   let formFixture: ComponentFixture<FormComponent>;
+
+  const config = {
+    form: {
+      validatorMap: {
+        required: 'required',
+        regex: 'pattern'
+      }
+    }
+  } as any;
   const formState: FormState = {
     testForm: {
       data: {
@@ -146,6 +155,7 @@ describe('FormComponent test suite', () => {
         FormBuilderService,
         FormComponent,
         FormService,
+        {provide: GLOBAL_CONFIG, useValue: config},
         {
           provide: Store, useValue: store
         }
diff --git a/src/app/shared/form/form.service.spec.ts b/src/app/shared/form/form.service.spec.ts
index dda6e018c6..06125c9034 100644
--- a/src/app/shared/form/form.service.spec.ts
+++ b/src/app/shared/form/form.service.spec.ts
@@ -13,8 +13,17 @@ import { FormService } from './form.service';
 import { FormBuilderService } from './builder/form-builder.service';
 import { AppState } from '../../app.reducer';
 import { formReducer } from './form.reducer';
+import { GlobalConfig } from '../../../config/global-config.interface';
 
 describe('FormService test suite', () => {
+  const config = {
+    form: {
+      validatorMap: {
+        required: 'required',
+          regex: 'pattern'
+      }
+    }
+  } as any;
   const formId = 'testForm';
   let service: FormService;
   let builderService: FormBuilderService;
@@ -98,7 +107,7 @@ describe('FormService test suite', () => {
       });
     builderService = formBuilderService;
     formGroup = builderService.createFormGroup(formModel);
-    service = new FormService(formBuilderService, store);
+    service = new FormService(config, formBuilderService, store);
   }));
 
   it('should check whether form state is init', () => {
diff --git a/src/app/shared/form/form.service.ts b/src/app/shared/form/form.service.ts
index 823b00d69b..d3f6c984ba 100644
--- a/src/app/shared/form/form.service.ts
+++ b/src/app/shared/form/form.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
@@ -6,16 +6,19 @@ import { Store } from '@ngrx/store';
 import { AppState } from '../../app.reducer';
 import { formObjectFromIdSelector } from './selectors';
 import { FormBuilderService } from './builder/form-builder.service';
-import { DynamicFormControlModel, DynamicFormGroupModel } from '@ng-dynamic-forms/core';
-import { isEmpty, isNotEmpty, isNotUndefined } from '../empty.util';
-import { find, uniqueId } from 'lodash';
-import { FormChangeAction, FormRemoveErrorAction } from './form.actions';
+import { DynamicFormControlModel } from '@ng-dynamic-forms/core';
+import { isEmpty, isNotUndefined } from '../empty.util';
+import { uniqueId } from 'lodash';
+import { FormChangeAction } from './form.actions';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
 
 @Injectable()
 export class FormService {
 
-  constructor(private formBuilderService: FormBuilderService,
-              private store: Store<AppState>) {
+  constructor(
+    @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+    private formBuilderService: FormBuilderService,
+    private store: Store<AppState>) {
   }
 
   /**
@@ -38,6 +41,16 @@ export class FormService {
       .distinctUntilChanged();
   }
 
+  /**
+   * Method to retrieve form's errors from state
+   */
+  public getFormErrors(formId: string): Observable<any> {
+    return this.store.select(formObjectFromIdSelector(formId))
+      .filter((state) => isNotUndefined(state))
+      .map((state) => state.errors)
+      .distinctUntilChanged();
+  }
+
   /**
    * Method to retrieve form's data from state
    */
@@ -66,50 +79,42 @@ export class FormService {
   }
 
   public addErrorToField(field: AbstractControl, model: DynamicFormControlModel, message: string) {
-
     const error = {}; // create the error object
+    const errorKey = this.getValidatorNameFromMap(message);
+    let errorMsg = message;
 
     // if form control model has not errorMessages object, create it
     if (!model.errorMessages) {
       model.errorMessages = {};
     }
 
-    // Use correct error messages from the model
-    const lastArray = message.split('.');
-    if (lastArray && lastArray.length > 0) {
-      // check if error code is already present in the set of model's validators
-      const last = lastArray[lastArray.length - 1];
-      const modelMsg = model.errorMessages[last];
-      if (isEmpty(modelMsg)) {
-        const errorKey = uniqueId('error-'); // create a single key for the error
-        error[errorKey] = true;
-        // put the error message in the form control model
-        model.errorMessages[errorKey] = message;
-      } else {
-        error[last] = modelMsg;
-      }
+    // check if error code is already present in the set of model's validators
+    if (isEmpty(model.errorMessages[errorKey])) {
+      // put the error message in the form control model
+      model.errorMessages[errorKey] = message;
+    } else {
+      // Use correct error messages from the model
+      errorMsg = model.errorMessages[errorKey];
+    }
+
+    if (!field.hasError(errorKey)) {
+      error[errorKey] = true;
+      // add the error in the form control
+      field.setErrors(error);
     }
 
-    // add the error in the form control
-    field.setErrors(error);
     field.markAsTouched();
   }
 
   public removeErrorFromField(field: AbstractControl, model: DynamicFormControlModel, messageKey: string) {
     const error = {};
+    const errorKey = this.getValidatorNameFromMap(messageKey);
 
-    if (messageKey.includes('.')) {
-      // Use correct error messages from the model
-      const lastArray = messageKey.split('.');
-      if (lastArray && lastArray.length > 0) {
-        const last = lastArray[lastArray.length - 1];
-        error[last] = null;
-      }
-    } else {
-      error[messageKey] = null;
+    if (field.hasError(errorKey)) {
+      error[errorKey] = null;
+      field.setErrors(error);
     }
 
-    field.setErrors(error);
     field.markAsUntouched();
   }
 
@@ -118,4 +123,14 @@ export class FormService {
     formGroup.reset();
     this.store.dispatch(new FormChangeAction(formId, formGroup.value));
   }
+
+  private getValidatorNameFromMap(validator): string {
+    if (validator.includes('.')) {
+      const splitArray = validator.split('.');
+      if (splitArray && splitArray.length > 0) {
+        validator = this.getValidatorNameFromMap(splitArray[splitArray.length - 1]);
+      }
+    }
+    return (this.config.form.validatorMap.hasOwnProperty(validator)) ? this.config.form.validatorMap[validator] : validator;
+  }
 }
diff --git a/src/app/shared/number-picker/number-picker.component.html b/src/app/shared/number-picker/number-picker.component.html
index e1e559c535..e2007f0f28 100644
--- a/src/app/shared/number-picker/number-picker.component.html
+++ b/src/app/shared/number-picker/number-picker.component.html
@@ -16,6 +16,7 @@
       placeholder="{{placeholder}}"
       [name]="name"
       [(ngModel)]="value"
+      (blur)="onBlur($event); $event.stopPropagation();"
       (change)="update($event); $event.stopPropagation();"
       (focus)="onFocus($event); $event.stopPropagation();"
       [readonly]="disabled"
diff --git a/src/app/shared/number-picker/number-picker.component.ts b/src/app/shared/number-picker/number-picker.component.ts
index 99cc138d8c..0bc47e9438 100644
--- a/src/app/shared/number-picker/number-picker.component.ts
+++ b/src/app/shared/number-picker/number-picker.component.ts
@@ -25,6 +25,7 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
 
   @Output() selected = new EventEmitter<number>();
   @Output() remove = new EventEmitter<number>();
+  @Output() blur = new EventEmitter<any>();
   @Output() change = new EventEmitter<any>();
   @Output() focus = new EventEmitter<any>();
 
@@ -114,6 +115,10 @@ export class NumberPickerComponent implements OnInit, ControlValueAccessor {
     }
   }
 
+  onBlur(event) {
+    this.blur.emit(event);
+  }
+
   onFocus(event) {
     if (this.value) {
       this.startValue = this.value;
diff --git a/src/config/form-config.interfaces.ts b/src/config/form-config.interfaces.ts
new file mode 100644
index 0000000000..e13fdc1c60
--- /dev/null
+++ b/src/config/form-config.interfaces.ts
@@ -0,0 +1,9 @@
+import { Config } from './config.interface';
+
+export interface ValidatorMap {
+  [validator: string]: string;
+}
+
+export interface FormConfig extends Config {
+  validatorMap: ValidatorMap;
+}
diff --git a/src/config/global-config.interface.ts b/src/config/global-config.interface.ts
index 7c05b78fa5..b623a4bf8c 100644
--- a/src/config/global-config.interface.ts
+++ b/src/config/global-config.interface.ts
@@ -3,12 +3,14 @@ import { ServerConfig } from './server-config.interface';
 import { CacheConfig } from './cache-config.interface';
 import { UniversalConfig } from './universal-config.interface';
 import { INotificationBoardOptions } from './notifications-config.interfaces';
+import { FormConfig } from './form-config.interfaces';
 
 export interface GlobalConfig extends Config {
   ui: ServerConfig;
   rest: ServerConfig;
   production: boolean;
   cache: CacheConfig;
+  form: FormConfig;
   notifications: INotificationBoardOptions;
   universal: UniversalConfig;
   gaTrackingId: string;

From 1f02a4cb5b8b95e0b538fec1b4e2814509d7613b Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 9 Jul 2018 19:09:41 +0200
Subject: [PATCH 33/41] Removed label of a repeatable field when is added a new
 value.

---
 .../dynamic-group.component.spec.ts           | 11 +++++--
 .../dynamic-group/dynamic-group.components.ts | 11 +++++--
 .../models/tag/dynamic-tag.component.html     |  4 +--
 .../dynamic-typeahead.component.html          |  2 +-
 .../builder/parsers/concat-field-parser.ts    |  6 ++--
 .../form/builder/parsers/date-field-parser.ts |  4 +--
 .../builder/parsers/dropdown-field-parser.ts  |  4 +--
 .../form/builder/parsers/field-parser.ts      | 18 +++++++----
 .../builder/parsers/group-field-parser.ts     |  4 +--
 .../form/builder/parsers/list-field-parser.ts |  4 +--
 .../builder/parsers/lookup-field-parser.ts    |  5 +--
 .../parsers/lookup-name-field-parser.ts       |  5 +--
 .../builder/parsers/onebox-field-parser.ts    | 10 +++---
 .../form/builder/parsers/tag-field-parser.ts  |  4 +--
 .../builder/parsers/textarea-field-parser.ts  |  4 +--
 src/app/shared/form/form.component.html       |  4 +--
 src/app/shared/form/form.component.ts         | 32 +++++++++----------
 17 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
index 55f98df8ac..9b3d9f8342 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -86,7 +86,14 @@ export const FORM_GROUP_TEST_GROUP = new FormGroup({
 });
 
 describe('DsDynamicGroupComponent test suite', () => {
-
+  const config = {
+    form: {
+      validatorMap: {
+        required: 'required',
+        regex: 'pattern'
+      }
+    }
+  } as any;
   let testComp: TestComponent;
   let groupComp: DsDynamicGroupComponent;
   let testFixture: ComponentFixture<TestComponent>;
@@ -126,7 +133,7 @@ describe('DsDynamicGroupComponent test suite', () => {
         FormBuilderService,
         FormComponent,
         FormService,
-        {provide: GLOBAL_CONFIG, useValue: {} as GlobalConfig},
+        {provide: GLOBAL_CONFIG, useValue: config},
         {provide: Store, useValue: store},
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index 92141a0077..6fe4686974 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -70,7 +70,12 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
       this.formCollapsed = Observable.of(true);
     }
     this.model.valueUpdates.subscribe((value: any[]) => {
-      this.formCollapsed = (isNotEmpty(value) && !(value.length === 1 && hasOnlyEmptyProperties(value[0]))) ? Observable.of(true) : Observable.of(false);
+      if ((isNotEmpty(value) && !(value.length === 1 && hasOnlyEmptyProperties(value[0])))) {
+        this.collapseForm();
+      } else {
+        this.expandForm();
+      }
+      // this.formCollapsed = (isNotEmpty(value) && !(value.length === 1 && hasOnlyEmptyProperties(value[0]))) ? Observable.of(true) : Observable.of(false);
     });
 
     this.formId = this.formService.getUniqueId(this.model.id);
@@ -213,7 +218,9 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
   }
 
   private resetForm() {
-    this.formService.resetForm(this.formRef.formGroup, this.formModel, this.formId);
+    if (this.formRef) {
+      this.formService.resetForm(this.formRef.formGroup, this.formModel, this.formId);
+    }
   }
 
   ngOnDestroy(): void {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index 5522e0b43a..c01716b674 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -9,7 +9,7 @@
          class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1 chips-sort-ignore"
          type="text"
          [class.pl-3]="chips.hasItems()"
-         [placeholder]="model.label"
+         [placeholder]="model.placeholder"
          [readonly]="model.readOnly"
          [(ngModel)]="currentValue"
          (blur)="onBlur($event)"
@@ -29,7 +29,7 @@
          [inputFormatter]="formatter"
          [name]="model.name"
          [ngbTypeahead]="search"
-         [placeholder]="model.label"
+         [placeholder]="model.placeholder"
          [readonly]="model.readOnly"
          [resultTemplate]="rt"
          [type]="model.inputType"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
index 27f031c83d..2d5eca2f16 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.html
@@ -10,7 +10,7 @@
          [inputFormatter]="formatter"
          [name]="model.name"
          [ngbTypeahead]="search"
-         [placeholder]="model.label"
+         [placeholder]="model.placeholder"
          [readonly]="model.readOnly"
          [resultTemplate]="rt"
          [type]="model.inputType"
diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index 14a722b776..802d866ad7 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -27,7 +27,7 @@ export class ConcatFieldParser extends FieldParser {
     this.secondPlaceholder = secondPlaceholder;
   }
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject | any): any {
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
 
     let clsGroup: DynamicFormControlLayout;
     let clsInput: DynamicFormControlLayout;
@@ -54,8 +54,8 @@ export class ConcatFieldParser extends FieldParser {
     concatGroup.group = [];
     concatGroup.separator = this.separator;
 
-    const input1ModelConfig: DynamicInputModelConfig = this.initModel(newId + CONCAT_FIRST_INPUT_SUFFIX, true, false, false);
-    const input2ModelConfig: DynamicInputModelConfig = this.initModel(newId + CONCAT_SECOND_INPUT_SUFFIX, true, true, false);
+    const input1ModelConfig: DynamicInputModelConfig = this.initModel(newId + CONCAT_FIRST_INPUT_SUFFIX, label, false, false);
+    const input2ModelConfig: DynamicInputModelConfig = this.initModel(newId + CONCAT_SECOND_INPUT_SUFFIX, label, true, false);
 
     if (this.configData.mandatory) {
       input1ModelConfig.required = true;
diff --git a/src/app/shared/form/builder/parsers/date-field-parser.ts b/src/app/shared/form/builder/parsers/date-field-parser.ts
index 842036db6c..ae83c5a032 100644
--- a/src/app/shared/form/builder/parsers/date-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/date-field-parser.ts
@@ -7,9 +7,9 @@ import { FormFieldMetadataValueObject } from '../models/form-field-metadata-valu
 
 export class DateFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
     let malformedDate = false;
-    const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel();
+    const inputDateModelConfig: DynamicDatePickerModelConfig = this.initModel(null, label);
 
     inputDateModelConfig.toggleIcon = 'fa fa-calendar';
     this.setValues(inputDateModelConfig as any, fieldValue);
diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
index d36bedd7a5..279f78f721 100644
--- a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts
@@ -9,8 +9,8 @@ import { FormFieldMetadataValueObject } from '../models/form-field-metadata-valu
 
 export class DropdownFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
-    const dropdownModelConfig: DynamicScrollableDropdownModelConfig = this.initModel();
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
+    const dropdownModelConfig: DynamicScrollableDropdownModelConfig = this.initModel(null, label);
     let layout: DynamicFormControlLayout;
 
     if (isNotEmpty(this.configData.selectableMetadata[0].authority)) {
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index ce41e3e9a7..855ef8109b 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -20,7 +20,7 @@ export abstract class FieldParser {
   constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) {
   }
 
-  public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject): any;
+  public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject, label?: boolean): any;
 
   public parse() {
     if (((this.getInitValueCount() > 1 && !this.configData.repeatable) || (this.configData.repeatable))
@@ -33,6 +33,7 @@ export abstract class FieldParser {
 
       const config = {
         id: uniqueId() + '_array',
+        label: this.configData.label,
         initialCount: this.getInitArrayIndex(),
         notRepeteable: !this.configData.repeatable,
         groupFactory: () => {
@@ -50,7 +51,7 @@ export abstract class FieldParser {
                 arrayCounter++;
               }
             }
-            model = this.modelFactory(fieldValue);
+            model = this.modelFactory(fieldValue, false);
           }
           setLayout(model, 'element', 'host', 'col');
           if (model.hasLanguages) {
@@ -184,9 +185,8 @@ export abstract class FieldParser {
     controlModel.readOnly = this.parserOptions.readOnly;
     controlModel.disabled = this.parserOptions.readOnly;
 
-    if (label) {
-      controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;
-    }
+    // Set label
+    this.setLabel(controlModel, label, labelEmpty);
 
     controlModel.placeholder = this.configData.label;
 
@@ -216,7 +216,7 @@ export abstract class FieldParser {
     controlModel.errorMessages = Object.assign(
       {},
       controlModel.errorMessages,
-      {pattern: 'form.error.validation.pattern', regex: 'form.error.validation.pattern'});
+      {pattern: 'form.error.validation.pattern'});
 
   }
 
@@ -229,6 +229,12 @@ export abstract class FieldParser {
       {required: this.configData.mandatoryMessage});
   }
 
+  protected setLabel(controlModel, label = true, labelEmpty = false) {
+    if (label) {
+      controlModel.label = (labelEmpty) ? '&nbsp;' : this.configData.label;
+    }
+  }
+
   protected setOptions(controlModel) {
     // Checks if field has multiple values and sets options available
     if (isNotUndefined(this.configData.selectableMetadata) && this.configData.selectableMetadata.length > 1) {
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
index 11bf425ae6..82f2668420 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -11,8 +11,8 @@ import { FormRowModel } from '../../../../core/shared/config/config-submission-f
 
 export class GroupFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject) {
-    const modelConfiguration: DynamicGroupModelConfig = this.initModel();
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean) {
+    const modelConfiguration: DynamicGroupModelConfig = this.initModel(null, label);
 
     modelConfiguration.scopeUUID = this.parserOptions.authorityUuid;
     modelConfiguration.submissionScope = this.parserOptions.submissionScope;
diff --git a/src/app/shared/form/builder/parsers/list-field-parser.ts b/src/app/shared/form/builder/parsers/list-field-parser.ts
index 7fa062ad79..273c9d1665 100644
--- a/src/app/shared/form/builder/parsers/list-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/list-field-parser.ts
@@ -8,8 +8,8 @@ import { DynamicListRadioGroupModel } from '../ds-dynamic-form-ui/models/list/dy
 export class ListFieldParser extends FieldParser {
   searchOptions: IntegrationSearchOptions;
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
-    const listModelConfig = this.initModel();
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
+    const listModelConfig = this.initModel(null, label);
     listModelConfig.repeatable = this.configData.repeatable;
 
     if (this.configData.selectableMetadata[0].authority
diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
index 08c0eb5830..9e9c434c4f 100644
--- a/src/app/shared/form/builder/parsers/lookup-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-field-parser.ts
@@ -1,11 +1,12 @@
 import { FieldParser } from './field-parser';
 import { DynamicLookupModel, DynamicLookupModelConfig } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 export class LookupFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: any): any {
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
     if (this.configData.selectableMetadata[0].authority) {
-      const lookupModelConfig: DynamicLookupModelConfig = this.initModel();
+      const lookupModelConfig: DynamicLookupModelConfig = this.initModel(null, label);
 
       this.setAuthorityOptions(lookupModelConfig, this.parserOptions.authorityUuid);
 
diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
index 05e26b0522..684e06bcb6 100644
--- a/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.ts
@@ -3,12 +3,13 @@ import {
   DynamicLookupNameModel,
   DynamicLookupNameModelConfig
 } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
 
 export class LookupNameFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: any): any {
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
     if (this.configData.selectableMetadata[0].authority) {
-      const lookupModelConfig: DynamicLookupNameModelConfig = this.initModel();
+      const lookupModelConfig: DynamicLookupNameModelConfig = this.initModel(null, label);
 
       this.setAuthorityOptions(lookupModelConfig, this.parserOptions.authorityUuid);
 
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index 8af01961ad..8949972918 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -18,7 +18,7 @@ import {
 
 export class OneboxFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
     if (this.configData.selectableMetadata.length > 1) {
       // Case ComboBox
       const clsGroup = {
@@ -55,14 +55,14 @@ export class OneboxFieldParser extends FieldParser {
       inputSelectGroup.group = [];
       inputSelectGroup.legend = this.configData.label;
 
-      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX);
+      const selectModelConfig: DynamicSelectModelConfig<any> = this.initModel(newId + QUALDROP_METADATA_SUFFIX, label);
       this.setOptions(selectModelConfig);
       if (isNotEmpty(fieldValue)) {
         selectModelConfig.value = fieldValue.metadata;
       }
       inputSelectGroup.group.push(new DynamicSelectModel(selectModelConfig, clsSelect));
 
-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, true, true);
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(newId + QUALDROP_VALUE_SUFFIX, label, true);
       this.setValues(inputModelConfig, fieldValue);
 
       inputSelectGroup.readOnly = selectModelConfig.disabled && inputModelConfig.readOnly;
@@ -70,13 +70,13 @@ export class OneboxFieldParser extends FieldParser {
 
       return new DynamicQualdropModel(inputSelectGroup, clsGroup);
     } else if (this.configData.selectableMetadata[0].authority) {
-      const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel();
+      const typeaheadModelConfig: DsDynamicTypeaheadModelConfig = this.initModel(null, label);
       this.setAuthorityOptions(typeaheadModelConfig, this.parserOptions.authorityUuid);
       this.setValues(typeaheadModelConfig, fieldValue, true);
       const typeaheadModel = new DynamicTypeaheadModel(typeaheadModelConfig);
       return typeaheadModel;
     } else {
-      const inputModelConfig: DsDynamicInputModelConfig = this.initModel();
+      const inputModelConfig: DsDynamicInputModelConfig = this.initModel(null, label);
       this.setValues(inputModelConfig, fieldValue);
       const inputModel = new DsDynamicInputModel(inputModelConfig);
       return inputModel;
diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.ts b/src/app/shared/form/builder/parsers/tag-field-parser.ts
index 91fafd5a58..c1c39feb2b 100644
--- a/src/app/shared/form/builder/parsers/tag-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/tag-field-parser.ts
@@ -4,8 +4,8 @@ import { DynamicTagModel, DynamicTagModelConfig } from '../ds-dynamic-form-ui/mo
 
 export class TagFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject): any {
-    const tagModelConfig: DynamicTagModelConfig = this.initModel();
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
+    const tagModelConfig: DynamicTagModelConfig = this.initModel(null, label);
     if (this.configData.selectableMetadata[0].authority
       && this.configData.selectableMetadata[0].authority.length > 0) {
       this.setAuthorityOptions(tagModelConfig, this.parserOptions.authorityUuid);
diff --git a/src/app/shared/form/builder/parsers/textarea-field-parser.ts b/src/app/shared/form/builder/parsers/textarea-field-parser.ts
index de3728b2b5..740e94721f 100644
--- a/src/app/shared/form/builder/parsers/textarea-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/textarea-field-parser.ts
@@ -8,8 +8,8 @@ import {
 
 export class TextareaFieldParser extends FieldParser {
 
-  public modelFactory(fieldValue: FormFieldMetadataValueObject | any): any {
-    const textAreaModelConfig: DsDynamicTextAreaModelConfig = this.initModel();
+  public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any {
+    const textAreaModelConfig: DsDynamicTextAreaModelConfig = this.initModel(null, label);
 
     let layout: DynamicFormControlLayout;
 
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index 5dfaa4bec1..1b5f2ef72f 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -15,7 +15,7 @@
 
         <!--Array with repeteable items-->
         <div *ngIf="!context.notRepeteable"
-             class="col-xs-2 d-flex flex-column justify-content-sm-center align-items-end mt-3">
+             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
           <div class="btn-group" role="group" aria-label="Basic example">
             <button type="button" class="btn btn-secondary"
                     [disabled]="isItemReadOnly(context, index)"
@@ -32,7 +32,7 @@
 
         <!--Array with non repeteable items - Only delete button-->
         <div *ngIf="context.notRepeteable && group.context.groups.length > 1"
-             class="col-xs-2 d-flex flex-column justify-content-sm-center align-items-end mt-3">
+             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
           <div class="btn-group" role="group" aria-label="Basic example">
             <button type="button" class="btn btn-secondary"
                     (click)="removeItem($event, context, index)"
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index 5958bfeeba..bca87b9429 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -5,7 +5,8 @@ import {
   DynamicFormArrayModel,
   DynamicFormControlEvent,
   DynamicFormControlModel,
-  DynamicFormGroupModel, DynamicFormLayout,
+  DynamicFormGroupModel,
+  DynamicFormLayout,
 } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 import { findIndex } from 'lodash';
@@ -25,7 +26,6 @@ import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
 import { FormService } from './form.service';
 import { formObjectFromIdSelector } from './selectors';
 import { FormEntry, FormError } from './form.reducer';
-import { isEmpty } from 'lodash';
 
 /**
  * The default form component.
@@ -164,21 +164,21 @@ export class FormComponent implements OnDestroy, OnInit {
           errors
             .filter((error: FormError) => findIndex(this.formErrors, {fieldId: error.fieldId}) === -1)
             .forEach((error: FormError) => {
-            const {fieldId} = error;
-            let field: AbstractControl;
-            if (!!this.parentFormModel) {
-              field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel);
-            } else {
-              field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel);
-            }
+              const {fieldId} = error;
+              let field: AbstractControl;
+              if (!!this.parentFormModel) {
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel);
+              } else {
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel);
+              }
 
-            if (field) {
-              const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
-              this.formService.addErrorToField(field, model, error.message);
-              // this.formService.validateAllFormFields(formGroup);
-              this.changeDetectorRef.detectChanges();
-            }
-          });
+              if (field) {
+                const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
+                this.formService.addErrorToField(field, model, error.message);
+                // this.formService.validateAllFormFields(formGroup);
+                this.changeDetectorRef.detectChanges();
+              }
+            });
 
           this.formErrors
             .filter((error: FormError) => findIndex(errors, {fieldId: error.fieldId}) === -1)

From 9b249f00df5e278035ebdb448c53bdde1c0a9fe8 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 10 Jul 2018 15:25:36 +0200
Subject: [PATCH 34/41] Fixed form error handler

---
 .../dynamic-group.component.spec.ts           | 10 ++++-----
 .../dynamic-group/dynamic-group.model.ts      | 21 ++++++++++++-------
 .../form/builder/form-builder.service.ts      |  7 +++++--
 src/app/shared/form/form.actions.ts           | 12 ++++++-----
 src/app/shared/form/form.component.ts         | 17 ++++++++-------
 src/app/shared/form/form.reducer.spec.ts      | 20 +++++++++++++-----
 src/app/shared/form/form.reducer.ts           |  5 ++++-
 7 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
index 9b3d9f8342..5dbd456bea 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -85,7 +85,7 @@ export const FORM_GROUP_TEST_GROUP = new FormGroup({
   dc_contributor_author: new FormControl(),
 });
 
-describe('DsDynamicGroupComponent test suite', () => {
+fdescribe('DsDynamicGroupComponent test suite', () => {
   const config = {
     form: {
       validatorMap: {
@@ -188,8 +188,8 @@ describe('DsDynamicGroupComponent test suite', () => {
     });
 
     it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => {
-      const config = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
-      const formModel = service.modelFromConfiguration(config, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
+      const formConfig = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
+      const formModel = service.modelFromConfiguration(formConfig, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
       const chips = new Chips([], 'value', 'dc.contributor.author');
 
       expect(groupComp.formCollapsed).toEqual(Observable.of(false));
@@ -258,8 +258,8 @@ describe('DsDynamicGroupComponent test suite', () => {
     });
 
     it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => {
-      const config = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
-      const formModel = service.modelFromConfiguration(config, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
+      const formConfig = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
+      const formModel = service.modelFromConfiguration(formConfig, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
       const chips = new Chips(modelValue, 'value', 'dc.contributor.author');
 
       expect(groupComp.formCollapsed).toEqual(Observable.of(true));
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
index 570e4bd7ea..2048c41df8 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts
@@ -43,6 +43,19 @@ export class DynamicGroupModel extends DsDynamicInputModel {
   }
 
   get value() {
+    return this._value
+  }
+
+  set value(value) {
+    this._value = (isEmpty(value)) ? null : value;
+  }
+
+  isEmpty() {
+    const value = this.getGroupValue();
+    return (value.length === 1 && isNull(value[0][this.mandatoryField]));
+  }
+
+  getGroupValue(): any[] {
     if (isEmpty(this._value)) {
       // If items is empty, last element has been removed
       // so emit an empty value that allows to dispatch
@@ -57,12 +70,4 @@ export class DynamicGroupModel extends DsDynamicInputModel {
     }
     return this._value
   }
-
-  set value(value) {
-    this._value = value;
-  }
-
-  isEmpty() {
-    return (this.value.length === 1 && isNull(this.value[0][this.mandatoryField]));
-  }
 }
diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts
index b87b9e4381..ec78225274 100644
--- a/src/app/shared/form/builder/form-builder.service.ts
+++ b/src/app/shared/form/builder/form-builder.service.ts
@@ -18,7 +18,10 @@ import { isObject, isString, mergeWith } from 'lodash';
 import { hasValue, isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
 import { DynamicQualdropModel } from './ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { SubmissionFormsModel } from '../../../core/shared/config/config-submission-forms.model';
-import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
+import {
+  DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP,
+  DynamicGroupModel
+} from './ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
 import { RowParser } from './parsers/row-parser';
 
@@ -150,7 +153,7 @@ export class FormBuilderService extends DynamicFormService {
         }
 
         if (this.isRelationGroup(controlModel)) {
-          const values = (controlModel as any).value;
+          const values = (controlModel as DynamicGroupModel).getGroupValue();
           values.forEach((groupValue, groupIndex) => {
             const newGroupValue = Object.create({});
             Object.keys(groupValue)
diff --git a/src/app/shared/form/form.actions.ts b/src/app/shared/form/form.actions.ts
index 7023d6bba1..3eb3fb2716 100644
--- a/src/app/shared/form/form.actions.ts
+++ b/src/app/shared/form/form.actions.ts
@@ -106,11 +106,12 @@ export class FormAddError implements Action {
   payload: {
     formId: string,
     fieldId: string,
+    fieldIndex: number,
     errorMessage: string,
   };
 
-  constructor(formId: string, fieldId: string, errorMessage: string) {
-    this.payload = {formId, fieldId, errorMessage};
+  constructor(formId: string, fieldId: string, fieldIndex: number, errorMessage: string) {
+    this.payload = {formId, fieldId, fieldIndex, errorMessage};
   }
 }
 
@@ -118,11 +119,12 @@ export class FormRemoveErrorAction implements Action {
   type = FormActionTypes.FORM_REMOVE_ERROR;
   payload: {
     formId: string,
-    fieldId: string
+    fieldId: string,
+    fieldIndex: number,
   };
 
-  constructor(formId: string, fieldId: string) {
-    this.payload = {formId, fieldId};
+  constructor(formId: string, fieldId: string, fieldIndex: number,) {
+    this.payload = {formId, fieldId, fieldIndex};
   }
 }
 
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index bca87b9429..54a39a80fa 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -162,14 +162,15 @@ export class FormComponent implements OnDestroy, OnInit {
           const {formGroup, formModel} = this;
 
           errors
-            .filter((error: FormError) => findIndex(this.formErrors, {fieldId: error.fieldId}) === -1)
+            .filter((error: FormError) => findIndex(this.formErrors, {fieldId: error.fieldId, fieldIndex: error.fieldIndex}) === -1)
             .forEach((error: FormError) => {
               const {fieldId} = error;
+              const {fieldIndex} = error;
               let field: AbstractControl;
               if (!!this.parentFormModel) {
-                field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel);
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel, fieldIndex);
               } else {
-                field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel);
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel, fieldIndex);
               }
 
               if (field) {
@@ -181,14 +182,15 @@ export class FormComponent implements OnDestroy, OnInit {
             });
 
           this.formErrors
-            .filter((error: FormError) => findIndex(errors, {fieldId: error.fieldId}) === -1)
+            .filter((error: FormError) => findIndex(errors, {fieldId: error.fieldId, fieldIndex: error.fieldIndex}) === -1)
             .forEach((error: FormError) => {
               const {fieldId} = error;
+              const {fieldIndex} = error;
               let field: AbstractControl;
               if (!!this.parentFormModel) {
-                field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel);
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel, fieldIndex);
               } else {
-                field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel);
+                field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel, fieldIndex);
               }
 
               if (field) {
@@ -251,8 +253,9 @@ export class FormComponent implements OnDestroy, OnInit {
     }
 
     const control: FormControl = event.control;
+    const fieldIndex: number = (event.context && event.context.index) ? event.context.index : 0;
     if (control.valid) {
-      this.store.dispatch(new FormRemoveErrorAction(this.formId, event.model.id));
+      this.store.dispatch(new FormRemoveErrorAction(this.formId, event.model.id, fieldIndex));
     }
   }
 
diff --git a/src/app/shared/form/form.reducer.spec.ts b/src/app/shared/form/form.reducer.spec.ts
index ddd5f96ecd..01e3e6b1ba 100644
--- a/src/app/shared/form/form.reducer.spec.ts
+++ b/src/app/shared/form/form.reducer.spec.ts
@@ -1,9 +1,11 @@
-import { FormEntry, formReducer } from './form.reducer';
+import { formReducer } from './form.reducer';
 import {
   FormAddError,
-  FormChangeAction, FormClearErrorsAction,
+  FormChangeAction,
+  FormClearErrorsAction,
   FormInitAction,
-  FormRemoveAction, FormRemoveErrorAction,
+  FormRemoveAction,
+  FormRemoveErrorAction,
   FormStatusChangeAction
 } from './form.actions';
 
@@ -165,15 +167,17 @@ describe('formReducer', () => {
     const expectedErrors = [
       {
         fieldId: 'title',
+        fieldIndex: 0,
         message: 'Not valid'
       }
     ];
 
     const formId = 'testForm';
     const fieldId = 'title';
+    const fieldIndex = 0;
     const message = 'Not valid';
 
-    const action = new FormAddError(formId, fieldId, message);
+    const action = new FormAddError(formId, fieldId, fieldIndex, message);
     const newState = formReducer(initState, action);
 
     expect(newState.testForm.errors).toEqual(expectedErrors);
@@ -192,10 +196,12 @@ describe('formReducer', () => {
         errors: [
           {
             fieldId: 'author',
+            fieldIndex: 0,
             message: 'error.validation.required'
           },
           {
             fieldId: 'title',
+            fieldIndex: 0,
             message: 'error.validation.required'
           }
         ]
@@ -205,13 +211,16 @@ describe('formReducer', () => {
     const expectedErrors = [
       {
         fieldId: 'title',
+        fieldIndex: 0,
         message: 'error.validation.required'
       }
     ];
 
     const formId = 'testForm';
+    const fieldId = 'author';
+    const fieldIndex = 0;
 
-    const action = new FormRemoveErrorAction(formId, 'author');
+    const action = new FormRemoveErrorAction(formId, fieldId, fieldIndex);
     const newState = formReducer(initState, action);
 
     expect(newState.testForm.errors).toEqual(expectedErrors);
@@ -252,6 +261,7 @@ describe('formReducer', () => {
         errors: [
           {
             fieldId: 'author',
+            fieldIndex: 0,
             message: 'error.validation.required'
           }
         ]
diff --git a/src/app/shared/form/form.reducer.ts b/src/app/shared/form/form.reducer.ts
index 69f84978f7..1d44375c0d 100644
--- a/src/app/shared/form/form.reducer.ts
+++ b/src/app/shared/form/form.reducer.ts
@@ -14,6 +14,7 @@ import { isEqual, uniqWith } from 'lodash';
 export interface FormError {
   message: string;
   fieldId: string;
+  fieldIndex: number;
 }
 
 export interface FormEntry {
@@ -70,6 +71,7 @@ function addFormErrors(state: FormState, action: FormAddError) {
   if (hasValue(state[formId])) {
     const error: FormError = {
       fieldId: action.payload.fieldId,
+      fieldIndex: action.payload.fieldIndex,
       message: action.payload.errorMessage
     };
 
@@ -88,8 +90,9 @@ function addFormErrors(state: FormState, action: FormAddError) {
 function removeFormError(state: FormState, action: FormRemoveErrorAction) {
   const formId = action.payload.formId;
   const fieldId = action.payload.fieldId;
+  const fieldIndex = action.payload.fieldIndex;
   if (hasValue(state[formId])) {
-    const errors = state[formId].errors.filter((error) => error.fieldId !== fieldId);
+    const errors = state[formId].errors.filter((error) => error.fieldId !== fieldId || error.fieldIndex !== fieldIndex);
     const newState = Object.assign({}, state);
     newState[formId] = Object.assign({}, state[formId], {errors});
     return newState;

From 10144971f933b517c04879ff53df910113ec6023 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 10 Jul 2018 15:30:58 +0200
Subject: [PATCH 35/41] Removed fdescribe from test

---
 .../models/dynamic-group/dynamic-group.component.spec.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
index 5dbd456bea..4d8ff006fb 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -85,7 +85,7 @@ export const FORM_GROUP_TEST_GROUP = new FormGroup({
   dc_contributor_author: new FormControl(),
 });
 
-fdescribe('DsDynamicGroupComponent test suite', () => {
+describe('DsDynamicGroupComponent test suite', () => {
   const config = {
     form: {
       validatorMap: {

From 683c2f2f6bce5996d307da68f541241ec77d7dfb Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 11 Jul 2018 18:42:45 +0200
Subject: [PATCH 36/41] Added testing utils functions

---
 .../date-picker/date-picker.component.spec.ts | 11 +------
 .../dynamic-group.component.spec.ts           | 12 +------
 .../dynamic-group/dynamic-group.components.ts | 12 +++++--
 .../list/dynamic-list.component.spec.ts       | 11 +------
 .../lookup/dynamic-lookup.component.spec.ts   | 11 +------
 ...amic-scrollable-dropdown.component.spec.ts | 16 +---------
 .../models/tag/dynamic-tag.component.spec.ts  | 11 +------
 .../dynamic-typeahead.component.spec.ts       | 11 +------
 src/app/shared/form/form.component.spec.ts    | 14 ++------
 .../number-picker.component.spec.ts           | 12 +------
 .../pagination/pagination.component.spec.ts   | 11 +------
 src/app/shared/testing/utils.ts               | 32 +++++++++++++++++++
 .../uploader/uploader.component.spec.ts       | 11 +------
 13 files changed, 55 insertions(+), 120 deletions(-)
 create mode 100644 src/app/shared/testing/utils.ts

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
index 76cd0947bb..02f1415e99 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -12,16 +12,7 @@ import { FormBuilderService } from '../../../form-builder.service';
 
 import { FormComponent } from '../../../../form.component';
 import { FormService } from '../../../../form.service';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../../../../../testing/utils';
 
 export const DATE_TEST_GROUP = new FormGroup({
   date: new FormControl()
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
index 4d8ff006fb..d1e6f67287 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts
@@ -16,7 +16,6 @@ import { FormRowModel, SubmissionFormsModel } from '../../../../../../core/share
 import { FormFieldModel } from '../../../models/form-field.model';
 import { FormBuilderService } from '../../../form-builder.service';
 import { FormService } from '../../../../form.service';
-import { GlobalConfig } from '../../../../../../../config/global-config.interface';
 import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { FormComponent } from '../../../../form.component';
 import { AppState } from '../../../../../../app.reducer';
@@ -24,16 +23,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Chips } from '../../../../../chips/models/chips.model';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { DsDynamicInputModel } from '../ds-dynamic-input.model';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../../../../../testing/utils';
 
 export const FORM_GROUP_TEST_MODEL_CONFIG = {
   disabled: false,
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
index 6fe4686974..a55e7aff9d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts
@@ -79,9 +79,17 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
     });
 
     this.formId = this.formService.getUniqueId(this.model.id);
-    this.formModel = this.formBuilderService.modelFromConfiguration(config, this.model.scopeUUID, {}, this.model.submissionScope, this.model.readOnly);
+    this.formModel = this.formBuilderService.modelFromConfiguration(
+      config,
+      this.model.scopeUUID,
+      {},
+      this.model.submissionScope,
+      this.model.readOnly);
     const initChipsValue = this.model.isEmpty() ? [] : this.model.value;
-    this.chips = new Chips(initChipsValue, 'value', this.model.mandatoryField);
+    this.chips = new Chips(
+      initChipsValue,
+      'value',
+      this.model.mandatoryField);
     this.subs.push(
       this.chips.chipsItems
         .subscribe((subItems: any[]) => {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
index 29babc2da9..6a765eba4a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
@@ -16,16 +16,7 @@ import { AuthorityServiceStub } from '../../../../../testing/authority-service-s
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
 import { By } from '@angular/platform-browser';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../../../../../testing/utils';
 
 export const LAYOUT_TEST = {
   element: {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
index b2cce76be6..ce45453bee 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
@@ -21,16 +21,7 @@ import { FormFieldMetadataValueObject } from '../../../models/form-field-metadat
 import { By } from '@angular/platform-browser';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
 import { DynamicLookupNameModel } from './dynamic-lookup-name.model';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../../../../../testing/utils';
 
 export const LOOKUP_TEST_MODEL_CONFIG = {
   authorityOptions: {
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
index de35d300f5..49cdb5d890 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -19,21 +19,7 @@ import { DynamicTypeaheadModel } from '../typeahead/dynamic-typeahead.model';
 import { TYPEAHEAD_TEST_GROUP, TYPEAHEAD_TEST_MODEL_CONFIG } from '../typeahead/dynamic-typeahead.component.spec';
 import { By } from '@angular/platform-browser';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
-
-function hasClass(element: any, className: string): boolean {
-  const classes = element.getAttribute('class');
-  return classes.split(' ').indexOf(className) !== -1;
-}
+import { hasClass, createTestComponent } from '../../../../../testing/utils';
 
 export const SD_TEST_GROUP = new FormGroup({
   dropdown: new FormControl(),
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
index 5788c00062..24959f4be4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.spec.ts
@@ -19,16 +19,7 @@ import { GLOBAL_CONFIG } from '../../../../../../../config';
 import { Chips } from '../../../../../chips/models/chips.model';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../../../../../testing/utils';
 
 function createKeyUpEvent(key: number) {
   /* tslint:disable:no-empty */
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
index 4429cfc574..2ed145b03a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.spec.ts
@@ -18,16 +18,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { DsDynamicTypeaheadComponent } from './dynamic-typeahead.component';
 import { DynamicTypeaheadModel } from './dynamic-typeahead.model';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../../../../../testing/utils';
 
 export const TYPEAHEAD_TEST_GROUP = new FormGroup({
   typeahead: new FormControl(),
diff --git a/src/app/shared/form/form.component.spec.ts b/src/app/shared/form/form.component.spec.ts
index 576af76141..53cc1d7736 100644
--- a/src/app/shared/form/form.component.spec.ts
+++ b/src/app/shared/form/form.component.spec.ts
@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/c
 import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import 'rxjs/add/observable/of';
 import {
   DynamicFormArrayModel,
@@ -23,16 +23,7 @@ import { FormChangeAction, FormStatusChangeAction } from './form.actions';
 import { MockStore } from '../testing/mock-store';
 import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
 import { GLOBAL_CONFIG } from '../../../config';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../testing/utils';
 
 export const TEST_FORM_MODEL = [
 
@@ -212,6 +203,7 @@ describe('FormComponent test suite', () => {
     it('should display form errors when errors are added to the state', () => {
       const errors = [{
         fieldId: 'dc_title',
+        fieldIndex: 0,
         message: 'error.validation.required'
       }];
 
diff --git a/src/app/shared/number-picker/number-picker.component.spec.ts b/src/app/shared/number-picker/number-picker.component.spec.ts
index b7f696a42e..3f6ae441f8 100644
--- a/src/app/shared/number-picker/number-picker.component.spec.ts
+++ b/src/app/shared/number-picker/number-picker.component.spec.ts
@@ -1,23 +1,13 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
-import 'rxjs/add/observable/of';
 
 import { UploaderService } from '../uploader/uploader.service';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { By } from '@angular/platform-browser';
 import { NumberPickerComponent } from './number-picker.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../testing/utils';
 
 describe('NumberPickerComponent test suite', () => {
 
diff --git a/src/app/shared/pagination/pagination.component.spec.ts b/src/app/shared/pagination/pagination.component.spec.ts
index d5d0c4980c..1bd97086d8 100644
--- a/src/app/shared/pagination/pagination.component.spec.ts
+++ b/src/app/shared/pagination/pagination.component.spec.ts
@@ -44,16 +44,7 @@ import { EnumKeysPipe } from '../utils/enum-keys-pipe';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 
 import { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: { template: html }
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../testing/utils';
 
 function expectPages(fixture: ComponentFixture<any>, pagesDef: string[]): void {
   const de = fixture.debugElement.query(By.css('.pagination'));
diff --git a/src/app/shared/testing/utils.ts b/src/app/shared/testing/utils.ts
new file mode 100644
index 0000000000..9343ae50fd
--- /dev/null
+++ b/src/app/shared/testing/utils.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+/**
+ * Returns true if a Native Element has a specified css class.
+ *
+ * @param element
+ *    the Native Element
+ * @param className
+ *    the class name to find
+ */
+export const hasClass = (element: any, className: string): boolean => {
+  const classes = element.getAttribute('class');
+  return classes.split(' ').indexOf(className) !== -1;
+};
+
+/**
+ * Creates an instance of a component and returns test fixture.
+ *
+ * @param html
+ *    the component's template as html
+ * @param type
+ *    the type of the component to instantiate
+ */
+export const createTestComponent = <T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> => {
+  TestBed.overrideComponent(type, {
+    set: {template: html}
+  });
+  const fixture = TestBed.createComponent(type);
+
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+};
diff --git a/src/app/shared/uploader/uploader.component.spec.ts b/src/app/shared/uploader/uploader.component.spec.ts
index f1e12e7693..a36bd7241b 100644
--- a/src/app/shared/uploader/uploader.component.spec.ts
+++ b/src/app/shared/uploader/uploader.component.spec.ts
@@ -9,16 +9,7 @@ import { UploaderOptions } from './uploader-options.model';
 import { UploaderComponent } from './uploader.component';
 import { FileUploadModule } from 'ng2-file-upload';
 import { TranslateModule } from '@ngx-translate/core';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { createTestComponent } from '../testing/utils';
 
 describe('Chips component', () => {
 

From c4f1738520e97843616ac7792f83b90418a7a7e9 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Wed, 11 Jul 2018 18:45:56 +0200
Subject: [PATCH 37/41] Improved icons handler in chips.component.ts

---
 resources/i18n/en.json                        |  15 +-
 src/app/shared/chips/chips.component.html     |  26 +-
 src/app/shared/chips/chips.component.spec.ts  | 226 ++++++++++--------
 src/app/shared/chips/chips.component.ts       |  15 +-
 .../shared/chips/models/chips-item.model.ts   |  13 +-
 src/app/shared/chips/models/chips.model.ts    |  30 ++-
 .../chips/models/chpis-item.model.spec.ts     |   4 +-
 .../form/builder/parsers/field-parser.ts      |   2 +-
 .../builder/parsers/group-field-parser.ts     |   2 +-
 9 files changed, 191 insertions(+), 142 deletions(-)

diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index e24ece36ee..a8a45c5dd2 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -153,7 +153,13 @@
     "recent-submissions": "Error fetching recent submissions",
     "item": "Error fetching item",
     "objects": "Error fetching objects",
-    "search-results": "Error fetching search results"
+    "search-results": "Error fetching search results",
+    "validation": {
+      "pattern": "This input is restricted by the current pattern: {{ pattern }}.",
+      "license": {
+        "notgranted": "You must grant this license to complete your submission. If you are unable to grant this license at this time you may save your work and return later or remove the submission."
+      }
+    }
   },
   "form": {
     "submit": "Submit",
@@ -168,11 +174,6 @@
     "group-collapse": "Collapse",
     "group-expand": "Expand",
     "group-collapse-help": "Click here to collapse",
-    "group-expand-help": "Click here to expand and add more element",
-    "error": {
-      "validation": {
-        "pattern": "This input is restricted by the current pattern: {{ pattern }}."
-      }
-    }
+    "group-expand-help": "Click here to expand and add more element"
   }
 }
diff --git a/src/app/shared/chips/chips.component.html b/src/app/shared/chips/chips.component.html
index 870f7db396..9bbe44903e 100644
--- a/src/app/shared/chips/chips.component.html
+++ b/src/app/shared/chips/chips.component.html
@@ -2,25 +2,27 @@
   <ul class="nav nav-pills d-flex flex-column flex-sm-row" [sortablejs]="chips.getChips()" [sortablejsOptions]="options">
     <ng-container *ngFor="let c of chips.getChips(); let i = index">
       <ng-template #tipContent>{{tipText}}</ng-template>
-      <li [ngbTooltip]="tipContent"
-          triggers="manual"
-          #t="ngbTooltip"
-          class="nav-item mr-2 mb-1"
-          (click)="t.close()"
-          (dragstart)="onDragStart(t, i)"
-          (dragend)="onDragEnd(i)"
-          (mouseover)="showTooltip(t, i, c.display)"
-          (mouseout)="t.close()">
+      <li class="nav-item mr-2 mb-1"
+          (dragstart)="onDragStart(i)"
+          (dragend)="onDragEnd(i)">
         <a class="flex-sm-fill text-sm-center nav-link active"
            href="#"
            [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged == i}"
-           (click)="t.close();chipsSelected($event, i);">
+           (click)="chipsSelected($event, i);">
           <span>
             <ng-container *ngIf="c.hasIcons()">
-              <i *ngFor="let icon of c.icons; let i = index; let l = last"
+              <i *ngFor="let icon of c.icons; let l = last"
+                 [ngbTooltip]="tipContent"
+                 triggers="manual"
+                 #t="ngbTooltip"
                  class="fa {{icon.style}}"
+                 [class.mr-1]="!l"
                  [class.mr-2]="l"
-                 aria-hidden="true"></i>
+                 [class.text-muted]="!(icon.hasAuthority)"
+                 aria-hidden="true"
+                 (dragstart)="tooltip.close();"
+                 (mouseover)="showTooltip(t, i, icon.metadata)"
+                 (mouseout)="t.close()"></i>
             </ng-container>
             <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fa fa-times ml-2" (click)="removeChips($event, i)"></i>
           </span>
diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts
index 256c29ed86..74e9c827b9 100644
--- a/src/app/shared/chips/chips.component.spec.ts
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -9,16 +9,8 @@ import { ChipsComponent } from './chips.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SortablejsModule } from 'angular-sortablejs';
 import { By } from '@angular/platform-browser';
-
-function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
-  TestBed.overrideComponent(type, {
-    set: {template: html}
-  });
-  const fixture = TestBed.createComponent(type);
-
-  fixture.detectChanges();
-  return fixture as ComponentFixture<T>;
-}
+import { FormFieldMetadataValueObject } from '../form/builder/models/form-field-metadata-value.model';
+import { createTestComponent, hasClass } from '../testing/utils';
 
 describe('ChipsComponent test suite', () => {
 
@@ -35,7 +27,7 @@ describe('ChipsComponent test suite', () => {
     TestBed.configureTestingModule({
       imports: [
         NgbModule.forRoot(),
-        SortablejsModule.forRoot({ animation: 150 }),
+        SortablejsModule.forRoot({animation: 150}),
       ],
       declarations: [
         ChipsComponent,
@@ -51,103 +43,145 @@ describe('ChipsComponent test suite', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
       <ds-chips
         *ngIf="chips.hasItems()"
         [chips]="chips"
         [editable]="editable"
         (selected)="onChipSelected($event)"></ds-chips>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create Chips Component', inject([ChipsComponent], (app: ChipsComponent) => {
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create Chips Component', inject([ChipsComponent], (app: ChipsComponent) => {
-    expect(app).toBeDefined();
-  }));
+  describe('when has items as string', () => {
+    beforeEach(() => {
+      chips = new Chips(['a', 'b', 'c']);
+      chipsFixture = TestBed.createComponent(ChipsComponent);
+      chipsComp = chipsFixture.componentInstance; // TruncatableComponent test instance
+      chipsComp.editable = true;
+      chipsComp.chips = chips;
+      chipsFixture.detectChanges();
+    });
 
-  beforeEach(() => {
-    chips = new Chips(['a', 'b', 'c']);
-    chipsFixture = TestBed.createComponent(ChipsComponent);
-    chipsComp = chipsFixture.componentInstance; // TruncatableComponent test instance
-    chipsComp.editable = true;
-    chipsComp.chips = chips;
-    chipsFixture.detectChanges();
+    afterEach(() => {
+      chipsFixture.destroy();
+      chipsComp = null;
+    });
+
+    it('should set edit mode when a chip item is selected', fakeAsync(() => {
+
+      spyOn(chipsComp.selected, 'emit');
+
+      chipsComp.chipsSelected(new Event('click'), 1);
+      chipsFixture.detectChanges();
+      tick();
+
+      const item = chipsComp.chips.getChipByIndex(1);
+
+      expect(item.editMode).toBe(true);
+      expect(chipsComp.selected.emit).toHaveBeenCalledWith(1);
+    }));
+
+    it('should not set edit mode when a chip item is selected and editable is false', fakeAsync(() => {
+      chipsComp.editable = false;
+      spyOn(chipsComp.selected, 'emit');
+
+      chipsComp.chipsSelected(new Event('click'), 1);
+      chipsFixture.detectChanges();
+      tick();
+
+      const item = chipsComp.chips.getChipByIndex(1);
+
+      expect(item.editMode).toBe(false);
+      expect(chipsComp.selected.emit).not.toHaveBeenCalledWith(1);
+    }));
+
+    it('should emit when a chip item is removed and editable is true', fakeAsync(() => {
+
+      spyOn(chipsComp.chips, 'remove');
+
+      const item = chipsComp.chips.getChipByIndex(1);
+
+      chipsComp.removeChips(new Event('click'), 1);
+      chipsFixture.detectChanges();
+      tick();
+
+      expect(chipsComp.chips.remove).toHaveBeenCalledWith(item);
+    }));
+
+    it('should save chips item index when drag and drop start', fakeAsync(() => {
+      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+
+      de.triggerEventHandler('dragstart', null);
+
+      expect(chipsComp.dragged).toBe(0);
+    }));
+
+    it('should update chips item order when drag and drop end', fakeAsync(() => {
+      spyOn(chipsComp.chips, 'updateOrder');
+      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+
+      de.triggerEventHandler('dragend', null);
+
+      expect(chipsComp.dragged).toBe(-1);
+      expect(chipsComp.chips.updateOrder).toHaveBeenCalled();
+    }));
   });
 
-  afterEach(() => {
-    chipsFixture.destroy();
-    chipsComp = null;
+  describe('when has items as object', () => {
+    beforeEach(() => {
+      const item = {
+        mainField: new FormFieldMetadataValueObject('main test', null, 'test001'),
+        relatedField: new FormFieldMetadataValueObject('related test', null, 'test002'),
+        otherRelatedField: new FormFieldMetadataValueObject('other related test')
+      };
+
+      const iconsConfig = {
+        mainField: 'fa-user',
+        relatedField: 'fa-user-alt',
+        otherRelatedField: 'fa-user-alt'
+      };
+      chips = new Chips([item], 'display', 'mainField', iconsConfig);
+      chipsFixture = TestBed.createComponent(ChipsComponent);
+      chipsComp = chipsFixture.componentInstance; // TruncatableComponent test instance
+      chipsComp.editable = true;
+      chipsComp.chips = chips;
+      chipsFixture.detectChanges();
+    });
+
+    it('should show icon for every field that has a configured icon', () => {
+      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const icons = de.queryAll(By.css('i.fa'));
+
+      expect(icons.length).toBe(4);
+
+    });
+
+    it('should has text-muted on icon style when field value had not authority', () => {
+      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const icons = de.queryAll(By.css('i.fa'));
+
+      expect(hasClass(icons[2].nativeElement, 'text-muted')).toBeTruthy();
+    });
+
+    it('should show tooltip on mouse over an icon', () => {
+      const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
+      const icons = de.queryAll(By.css('i.fa'));
+
+      icons[0].triggerEventHandler('mouseover', null);
+
+      expect(chipsComp.tipText).toBe('main test')
+    });
   });
-
-  it('should set edit mode when a chip item is selected', fakeAsync(() => {
-
-    spyOn(chipsComp.selected, 'emit');
-
-    chipsComp.chipsSelected(new Event('click'), 1);
-    chipsFixture.detectChanges();
-    tick();
-
-    const item = chipsComp.chips.getChipByIndex(1);
-
-    expect(item.editMode).toBe(true);
-    expect(chipsComp.selected.emit).toHaveBeenCalledWith(1);
-  }));
-
-  it('should not set edit mode when a chip item is selected and editable is false', fakeAsync(() => {
-    chipsComp.editable = false;
-    spyOn(chipsComp.selected, 'emit');
-
-    chipsComp.chipsSelected(new Event('click'), 1);
-    chipsFixture.detectChanges();
-    tick();
-
-    const item = chipsComp.chips.getChipByIndex(1);
-
-    expect(item.editMode).toBe(false);
-    expect(chipsComp.selected.emit).not.toHaveBeenCalledWith(1);
-  }));
-
-  it('should emit when a chip item is removed and editable is true', fakeAsync(() => {
-
-    spyOn(chipsComp.chips, 'remove');
-
-    const item = chipsComp.chips.getChipByIndex(1);
-
-    chipsComp.removeChips(new Event('click'), 1);
-    chipsFixture.detectChanges();
-    tick();
-
-    expect(chipsComp.chips.remove).toHaveBeenCalledWith(item);
-  }));
-
-  it('should save chips item index when drag and drop start', fakeAsync(() => {
-    const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
-
-    de.triggerEventHandler('dragstart', null);
-
-    expect(chipsComp.dragged).toBe(0)
-  }));
-
-  it('should update chips item order when drag and drop end', fakeAsync(() => {
-    spyOn(chipsComp.chips, 'updateOrder');
-    const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
-
-    de.triggerEventHandler('dragend', null);
-
-    expect(chipsComp.dragged).toBe(-1)
-    expect(chipsComp.chips.updateOrder).toHaveBeenCalled();
-  }));
-
-  it('should show item tooltip on mouse over', fakeAsync(() => {
-    const de = chipsFixture.debugElement.query(By.css('li.nav-item'));
-
-    de.triggerEventHandler('mouseover', null);
-
-    expect(chipsComp.tipText).toBe('a')
-  }));
 });
 
 // declare a test component
diff --git a/src/app/shared/chips/chips.component.ts b/src/app/shared/chips/chips.component.ts
index e8167ec5a1..cd4ae3a3e8 100644
--- a/src/app/shared/chips/chips.component.ts
+++ b/src/app/shared/chips/chips.component.ts
@@ -65,8 +65,7 @@ export class ChipsComponent implements OnChanges {
     }
   }
 
-  onDragStart(tooltip: NgbTooltip, index) {
-    tooltip.close();
+  onDragStart(index) {
     this.uploaderService.overrideDragOverPage();
     this.dragged = index;
   }
@@ -77,10 +76,16 @@ export class ChipsComponent implements OnChanges {
     this.chips.updateOrder();
   }
 
-  showTooltip(tooltip: NgbTooltip, index, content) {
+  showTooltip(tooltip: NgbTooltip, index, field?) {
     tooltip.close();
-    if (!this.chips.getChipByIndex(index).editMode && this.dragged === -1) {
-      this.tipText = content;
+    const item = this.chips.getChipByIndex(index);
+    if (!item.editMode && this.dragged === -1) {
+      if (field) {
+        this.tipText = item.item[field].display;
+      } else {
+        this.tipText = item.display;
+      }
+
       this.cdr.detectChanges();
       tooltip.open();
     }
diff --git a/src/app/shared/chips/models/chips-item.model.ts b/src/app/shared/chips/models/chips-item.model.ts
index ed082a51eb..b0798ce453 100644
--- a/src/app/shared/chips/models/chips-item.model.ts
+++ b/src/app/shared/chips/models/chips-item.model.ts
@@ -1,7 +1,9 @@
-import { uniqueId } from 'lodash';
+import { uniqueId, isObject } from 'lodash';
 import { isNotEmpty } from '../../empty.util';
 
 export interface ChipsItemIcon {
+  metadata: string;
+  hasAuthority: boolean;
   style: string;
   tooltip?: any;
 }
@@ -54,15 +56,12 @@ export class ChipsItem {
 
   private setDisplayText(): void {
     let value = this.item;
-    if ( typeof this.item === 'object') {
+    if (isObject(this.item)) {
       // Check If displayField is in an internal object
       const obj = this.objToDisplay ? this.item[this.objToDisplay] : this.item;
-      const displayFieldBkp = 'value';
 
-      if (obj instanceof Object && obj && obj[this.fieldToDisplay]) {
-        value = obj[this.fieldToDisplay];
-      } else if (obj instanceof Object && obj && obj[displayFieldBkp]) {
-        value = obj[displayFieldBkp];
+      if (isObject(obj) && obj) {
+        value = obj[this.fieldToDisplay] || obj.value;
       } else {
         value = obj;
       }
diff --git a/src/app/shared/chips/models/chips.model.ts b/src/app/shared/chips/models/chips.model.ts
index 4476c1cd77..2866eb61b3 100644
--- a/src/app/shared/chips/models/chips.model.ts
+++ b/src/app/shared/chips/models/chips.model.ts
@@ -1,9 +1,7 @@
-import { findIndex, isEqual } from 'lodash';
+import { findIndex, isEqual, isObject } from 'lodash';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { ChipsItem, ChipsItemIcon } from './chips-item.model';
 import { hasValue } from '../../empty.util';
-import { FormFieldMetadataValueObject } from '../../form/builder/models/form-field-metadata-value.model';
-import { AuthorityValueModel } from '../../../core/integration/models/authority-value.model';
 
 export interface ChipsIconsConfig {
   [metadata: string]: string;
@@ -99,15 +97,25 @@ export class Chips {
     Object.keys(item)
       .forEach((metadata) => {
         const value = item[metadata];
-        if (hasValue(value)
-          && (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel)
-          && ((value as FormFieldMetadataValueObject).authority || (value as AuthorityValueModel).id)
-          && this.iconsConfig.hasOwnProperty(metadata)) {
+        if (hasValue(value) && isObject(value) && this.iconsConfig.hasOwnProperty(metadata)) {
 
-          const icon: ChipsItemIcon = {
-            style: this.iconsConfig[metadata]
-          };
-          icons.push(icon);
+          let icon: ChipsItemIcon;
+          const hasAuthority: boolean = ((value.hasOwnProperty('authority') && value.authority)
+            || (value.hasOwnProperty('id') && value.id)) ? true : false;
+
+          // Set icons
+          if ((this.displayObj && this.displayObj === metadata && hasAuthority)
+            || (this.displayObj && this.displayObj !== metadata)) {
+
+            icon = {
+              metadata,
+              hasAuthority: hasAuthority,
+              style: this.iconsConfig[metadata]
+            };
+          }
+          if (icon) {
+            icons.push(icon);
+          }
         }
       });
 
diff --git a/src/app/shared/chips/models/chpis-item.model.spec.ts b/src/app/shared/chips/models/chpis-item.model.spec.ts
index 6e1e2dcc3b..72e4e37cab 100644
--- a/src/app/shared/chips/models/chpis-item.model.spec.ts
+++ b/src/app/shared/chips/models/chpis-item.model.spec.ts
@@ -34,14 +34,14 @@ describe('ChipsItem model test suite', () => {
   });
 
   it('should update icons', () => {
-    const icons: ChipsItemIcon[] = [{style: 'fa fa-plus'}];
+    const icons: ChipsItemIcon[] = [{metadata: 'test', hasAuthority: false, style: 'fa fa-plus'}];
     item.updateIcons(icons);
 
     expect(item.icons).toEqual(icons);
   });
 
   it('should return true if has icons', () => {
-    const icons: ChipsItemIcon[] = [{style: 'fa fa-plus'}];
+    const icons: ChipsItemIcon[] = [{metadata: 'test', hasAuthority: false, style: 'fa fa-plus'}];
     item.updateIcons(icons);
     const hasIcons = item.hasIcons();
 
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 855ef8109b..f37b3868f3 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -216,7 +216,7 @@ export abstract class FieldParser {
     controlModel.errorMessages = Object.assign(
       {},
       controlModel.errorMessages,
-      {pattern: 'form.error.validation.pattern'});
+      {pattern: 'error.validation.pattern'});
 
   }
 
diff --git a/src/app/shared/form/builder/parsers/group-field-parser.ts b/src/app/shared/form/builder/parsers/group-field-parser.ts
index 82f2668420..9a7b2bc42d 100644
--- a/src/app/shared/form/builder/parsers/group-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/group-field-parser.ts
@@ -40,7 +40,7 @@ export class GroupFieldParser extends FieldParser {
       const mandatoryFieldEntries: FormFieldMetadataValueObject[] = this.getInitFieldValues(modelConfiguration.mandatoryField);
       mandatoryFieldEntries.forEach((entry, index) => {
         const item = Object.create(null);
-        const listFields = modelConfiguration.relationFields.concat(modelConfiguration.mandatoryField);
+        const listFields = [modelConfiguration.mandatoryField].concat(modelConfiguration.relationFields);
         listFields.forEach((fieldId) => {
           const value = this.getInitFieldValue(0, index, [fieldId]);
           item[fieldId] = isNotEmpty(value) ? value : PLACEHOLDER_PARENT_METADATA;

From 6e682971075868f3c8903b301394e651d4267b1e Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 12 Jul 2018 13:23:59 +0200
Subject: [PATCH 38/41] improvements to the icons handler in the chips
 component

---
 src/app/shared/chips/chips.component.html     |  1 -
 src/app/shared/chips/chips.component.spec.ts  | 41 +++++++++++++++---
 src/app/shared/chips/models/chips.model.ts    | 43 ++++++++++++++-----
 .../shared/chips/models/chpis.model.spec.ts   | 17 ++++++--
 4 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/src/app/shared/chips/chips.component.html b/src/app/shared/chips/chips.component.html
index 9bbe44903e..21ce99ecdb 100644
--- a/src/app/shared/chips/chips.component.html
+++ b/src/app/shared/chips/chips.component.html
@@ -18,7 +18,6 @@
                  class="fa {{icon.style}}"
                  [class.mr-1]="!l"
                  [class.mr-2]="l"
-                 [class.text-muted]="!(icon.hasAuthority)"
                  aria-hidden="true"
                  (dragstart)="tooltip.close();"
                  (mouseover)="showTooltip(t, i, icon.metadata)"
diff --git a/src/app/shared/chips/chips.component.spec.ts b/src/app/shared/chips/chips.component.spec.ts
index 74e9c827b9..44092ce7d8 100644
--- a/src/app/shared/chips/chips.component.spec.ts
+++ b/src/app/shared/chips/chips.component.spec.ts
@@ -144,12 +144,43 @@ describe('ChipsComponent test suite', () => {
         relatedField: new FormFieldMetadataValueObject('related test', null, 'test002'),
         otherRelatedField: new FormFieldMetadataValueObject('other related test')
       };
+      const iconsConfig = [
+        {
+          name: 'mainField',
+          config: {
+            withAuthority:{
+              style: 'fa-user'
+            }
+          }
+        },
+        {
+          name: 'relatedField',
+          config: {
+            withAuthority:{
+              style: 'fa-user-alt'
+            },
+            withoutAuthority:{
+              style: 'fa-user-alt text-muted'
+            }
+          }
+        },
+        {
+          name: 'otherRelatedField',
+          config: {
+            withAuthority:{
+              style: 'fa-user-alt'
+            },
+            withoutAuthority:{
+              style: 'fa-user-alt text-muted'
+            }
+          }
+        },
+        {
+          name: 'default',
+          config: {}
+        }
+      ];
 
-      const iconsConfig = {
-        mainField: 'fa-user',
-        relatedField: 'fa-user-alt',
-        otherRelatedField: 'fa-user-alt'
-      };
       chips = new Chips([item], 'display', 'mainField', iconsConfig);
       chipsFixture = TestBed.createComponent(ChipsComponent);
       chipsComp = chipsFixture.componentInstance; // TruncatableComponent test instance
diff --git a/src/app/shared/chips/models/chips.model.ts b/src/app/shared/chips/models/chips.model.ts
index 2866eb61b3..e133a416f4 100644
--- a/src/app/shared/chips/models/chips.model.ts
+++ b/src/app/shared/chips/models/chips.model.ts
@@ -1,28 +1,39 @@
 import { findIndex, isEqual, isObject } from 'lodash';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { ChipsItem, ChipsItemIcon } from './chips-item.model';
-import { hasValue } from '../../empty.util';
+import { hasValue, isNotEmpty } from '../../empty.util';
 
-export interface ChipsIconsConfig {
-  [metadata: string]: string;
+export interface IconsConfig {
+  withAuthority?: {
+    style: string;
+  };
+
+  withoutAuthority?: {
+    style: string;
+  };
+}
+
+export interface MetadataIconsConfig {
+  name: string;
+  config: IconsConfig;
 }
 
 export class Chips {
   chipsItems: BehaviorSubject<ChipsItem[]>;
   displayField: string;
   displayObj: string;
-  iconsConfig: ChipsIconsConfig;
+  iconsConfig: MetadataIconsConfig[];
 
   private _items: ChipsItem[];
 
   constructor(items: any[] = [],
               displayField: string = 'display',
               displayObj?: string,
-              iconsConfig?: ChipsIconsConfig) {
+              iconsConfig?: MetadataIconsConfig[]) {
 
     this.displayField = displayField;
     this.displayObj = displayObj;
-    this.iconsConfig = iconsConfig || Object.create({});
+    this.iconsConfig = iconsConfig || [];
     if (Array.isArray(items)) {
       this.setInitialItems(items);
     }
@@ -94,14 +105,24 @@ export class Chips {
 
   private getChipsIcons(item) {
     const icons = [];
+    const defaultConfigIndex: number = findIndex(this.iconsConfig, {name: 'default'});
+    const defaultConfig: IconsConfig = (defaultConfigIndex !== -1) ? this.iconsConfig[defaultConfigIndex].config : undefined;
+    let config: IconsConfig;
+    let configIndex: number;
+    let value: any;
+
     Object.keys(item)
       .forEach((metadata) => {
-        const value = item[metadata];
-        if (hasValue(value) && isObject(value) && this.iconsConfig.hasOwnProperty(metadata)) {
+
+        value = item[metadata];
+        configIndex = findIndex(this.iconsConfig, {name: metadata});
+
+        config = (configIndex !== -1) ? this.iconsConfig[configIndex].config : defaultConfig;
+
+        if (hasValue(value) && isNotEmpty(config)) {
 
           let icon: ChipsItemIcon;
-          const hasAuthority: boolean = ((value.hasOwnProperty('authority') && value.authority)
-            || (value.hasOwnProperty('id') && value.id)) ? true : false;
+          const hasAuthority: boolean = !!(isObject(value) && ((value.hasOwnProperty('authority') && value.authority) || (value.hasOwnProperty('id') && value.id)));
 
           // Set icons
           if ((this.displayObj && this.displayObj === metadata && hasAuthority)
@@ -110,7 +131,7 @@ export class Chips {
             icon = {
               metadata,
               hasAuthority: hasAuthority,
-              style: this.iconsConfig[metadata]
+              style: (hasAuthority) ? config.withAuthority.style : config.withoutAuthority.style
             };
           }
           if (icon) {
diff --git a/src/app/shared/chips/models/chpis.model.spec.ts b/src/app/shared/chips/models/chpis.model.spec.ts
index 661dc561ba..f7564819fd 100644
--- a/src/app/shared/chips/models/chpis.model.spec.ts
+++ b/src/app/shared/chips/models/chpis.model.spec.ts
@@ -16,7 +16,7 @@ describe('Chips model test suite', () => {
     expect(chips.getChipsItems()).toEqual(items);
     expect(chips.displayField).toBe('display');
     expect(chips.displayObj).toBe(undefined);
-    expect(chips.iconsConfig).toEqual({});
+    expect(chips.iconsConfig).toEqual([]);
   });
 
   it('should add an element to items', () => {
@@ -105,11 +105,22 @@ describe('Chips model test suite', () => {
         otherProperty: 'a'
       },
     ];
-    chips = new Chips(items, 'value', 'toDisplay', {toDisplay: 'fa fa-plus'});
+    const iconsConfig = [{
+      name: 'toDisplay',
+      config: {
+        withAuthority:{
+          style: 'fa-user'
+        },
+        withoutAuthority:{
+          style: 'fa-user text-muted'
+        }
+      }
+    }];
+    chips = new Chips(items, 'value', 'toDisplay', iconsConfig);
 
     expect(chips.displayField).toBe('value');
     expect(chips.displayObj).toBe('toDisplay');
-    expect(chips.iconsConfig).toEqual({toDisplay: 'fa fa-plus'});
+    expect(chips.iconsConfig).toEqual(iconsConfig);
     expect(chips.getChipsItems()).toEqual(items);
   });
 });

From cc086228728896390a234973726dc616a22ff576 Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Thu, 12 Jul 2018 16:48:57 +0200
Subject: [PATCH 39/41] Resolved build fail

---
 src/app/core/cache/response-cache.models.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/core/cache/response-cache.models.ts b/src/app/core/cache/response-cache.models.ts
index ea8ea5bab4..9b1b5b89eb 100644
--- a/src/app/core/cache/response-cache.models.ts
+++ b/src/app/core/cache/response-cache.models.ts
@@ -1,8 +1,6 @@
 import { SearchQueryResponse } from '../../+search-page/search-service/search-query-response.model';
 import { RequestError } from '../data/request.models';
-import { BrowseEntry } from '../shared/browse-entry.model';
 import { PageInfo } from '../shared/page-info.model';
-import { BrowseDefinition } from '../shared/browse-definition.model';
 import { ConfigObject } from '../shared/config/config.model';
 import { FacetValue } from '../../+search-page/search-service/facet-value.model';
 import { SearchFilterConfig } from '../../+search-page/search-service/search-filter-config.model';
@@ -11,17 +9,17 @@ import { RegistryMetadataschemasResponse } from '../registry/registry-metadatasc
 import { MetadataSchema } from '../metadata/metadataschema.model';
 import { RegistryMetadatafieldsResponse } from '../registry/registry-metadatafields-response.model';
 import { RegistryBitstreamformatsResponse } from '../registry/registry-bitstreamformats-response.model';
-import { AuthTokenInfo } from '../auth/models/auth-token-info.model';
-import { NormalizedAuthStatus } from '../auth/models/normalized-auth-status.model';
 import { AuthStatus } from '../auth/models/auth-status.model';
 
 /* tslint:disable:max-classes-per-file */
 export class RestResponse {
   public toCache = true;
+
   constructor(
     public isSuccessful: boolean,
     public statusCode: string,
-  ) { }
+  ) {
+  }
 }
 
 export class DSOSuccessResponse extends RestResponse {
@@ -159,6 +157,7 @@ export class ConfigSuccessResponse extends RestResponse {
 
 export class AuthStatusResponse extends RestResponse {
   public toCache = false;
+
   constructor(
     public response: AuthStatus,
     public statusCode: string
@@ -167,7 +166,6 @@ export class AuthStatusResponse extends RestResponse {
   }
 }
 
-
 export class IntegrationSuccessResponse extends RestResponse {
   constructor(
     public dataDefinition: IntegrationModel[],
@@ -177,4 +175,5 @@ export class IntegrationSuccessResponse extends RestResponse {
     super(true, statusCode);
   }
 }
+
 /* tslint:enable:max-classes-per-file */

From 73188480e381504b94d070c3d8c0d759c5523e3a Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Mon, 16 Jul 2018 13:10:50 +0200
Subject: [PATCH 40/41] Fixed an issue with tooltip in chips.component.ts

---
 src/app/shared/chips/chips.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/chips/chips.component.ts b/src/app/shared/chips/chips.component.ts
index cd4ae3a3e8..6032cc7659 100644
--- a/src/app/shared/chips/chips.component.ts
+++ b/src/app/shared/chips/chips.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, S
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { SortablejsOptions } from 'angular-sortablejs';
+import { isObject } from 'lodash';
 
 import { Chips } from './models/chips.model';
 import { ChipsItem } from './models/chips-item.model';
@@ -81,7 +82,7 @@ export class ChipsComponent implements OnChanges {
     const item = this.chips.getChipByIndex(index);
     if (!item.editMode && this.dragged === -1) {
       if (field) {
-        this.tipText = item.item[field].display;
+        this.tipText = (isObject(item.item[field])) ? item.item[field].display : item.item[field];
       } else {
         this.tipText = item.display;
       }

From 220d33b1d40cec77544942b15a166abc1ac8b11e Mon Sep 17 00:00:00 2001
From: Giuseppe Digilio <giuseppe.digilio@4science.it>
Date: Tue, 17 Jul 2018 18:17:31 +0200
Subject: [PATCH 41/41] Renamed wrong Spec files name

---
 .../models/{chpis-item.model.spec.ts => chips-item.model.spec.ts} | 0
 .../chips/models/{chpis.model.spec.ts => chips.model.spec.ts}     | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/app/shared/chips/models/{chpis-item.model.spec.ts => chips-item.model.spec.ts} (100%)
 rename src/app/shared/chips/models/{chpis.model.spec.ts => chips.model.spec.ts} (100%)

diff --git a/src/app/shared/chips/models/chpis-item.model.spec.ts b/src/app/shared/chips/models/chips-item.model.spec.ts
similarity index 100%
rename from src/app/shared/chips/models/chpis-item.model.spec.ts
rename to src/app/shared/chips/models/chips-item.model.spec.ts
diff --git a/src/app/shared/chips/models/chpis.model.spec.ts b/src/app/shared/chips/models/chips.model.spec.ts
similarity index 100%
rename from src/app/shared/chips/models/chpis.model.spec.ts
rename to src/app/shared/chips/models/chips.model.spec.ts