[TLC-254] Port submission field type binding from DSpace-CRIS 7

src/app/core/core.module.ts

@@ -137,6 +137,7 @@ import { SiteAdministratorGuard } from './data/feature-authorization/feature-aut
 import { Registration } from './shared/registration.model';
 import { MetadataSchemaDataService } from './data/metadata-schema-data.service';
 import { MetadataFieldDataService } from './data/metadata-field-data.service';
+import { DsDynamicTypeBindRelationService } from '../shared/form/builder/ds-dynamic-form-ui/ds-dynamic-type-bind-relation.service';
 import { TokenResponseParsingService } from './auth/token-response-parsing.service';
 import { SubmissionCcLicenseDataService } from './submission/submission-cc-license-data.service';
 import { SubmissionCcLicence } from './submission/models/submission-cc-license.model';
@@ -250,6 +251,7 @@ const PROVIDERS = [
   ClaimedTaskDataService,
   PoolTaskDataService,
   BitstreamDataService,
+  DsDynamicTypeBindRelationService,
   EntityTypeService,
   ContentSourceResponseParsingService,
   ItemTemplateDataService,

src/app/shared/empty.util.ts

@@ -177,3 +177,29 @@ export const isNotEmptyOperator = () =>
 export const ensureArrayHasValue = () =>
   <T>(source: Observable<T[]>): Observable<T[]> =>
     source.pipe(map((arr: T[]): T[] => Array.isArray(arr) ? arr : []));
+
+/**
+ * Verifies that a object keys are all empty or not.
+ * isObjectEmpty();                // true
+ * isObjectEmpty(null);            // true
+ * isObjectEmpty(undefined);       // true
+ * isObjectEmpty('');              // true
+ * isObjectEmpty([]);              // true
+ * isObjectEmpty({});              // true
+ * isObjectEmpty({name: null});    // true
+ * isObjectEmpty({ name: 'Adam Hawkins', surname : null});  // false
+ */
+export function isObjectEmpty(obj?: any): boolean {
+
+  if (typeof(obj) !== 'object') {
+    return true;
+  }
+
+  for (const key in obj) {
+      if (obj.hasOwnProperty(key) && isNotEmpty(obj[key])) {
+        return false;
+      }
+  }
+  return true;
+}
+

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -1,4 +1,5 @@
 <div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
+     [class.d-none]="model.hidden"
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   <label *ngIf="!isCheckbox && hasLabel"
@@ -6,7 +7,7 @@
          [for]="id"
          [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
          [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
-  <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>
+  <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: { $implicit: model };"></ng-container>
   <!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
   <div [ngClass]="{'form-row': model.hasLanguages || isRelationship,
                       'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -65,6 +65,7 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
 import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component';
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
+import { DsDynamicTypeBindRelationService } from './ds-dynamic-type-bind-relation.service';
 import { RelationshipService } from '../../../../core/data/relationship.service';
 import { SelectableListService } from '../../../object-list/selectable-list/selectable-list.service';
 import { ItemDataService } from '../../../../core/data/item-data.service';
@@ -79,6 +80,13 @@ import { SubmissionService } from '../../../../submission/submission.service';
 import { FormBuilderService } from '../form-builder.service';
 import { NgxMaskModule } from 'ngx-mask';
 
+function getMockDsDynamicTypeBindRelationService(): DsDynamicTypeBindRelationService {
+  return jasmine.createSpyObj('DsDynamicTypeBindRelationService', {
+    getRelatedFormModel: jasmine.createSpy('getRelatedFormModel'),
+    isFormControlToBeHidden: jasmine.createSpy('isFormControlToBeHidden')
+  });
+}
+
 describe('DsDynamicFormControlContainerComponent test suite', () => {
 
   const vocabularyOptions: VocabularyOptions = {
@@ -142,6 +150,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
       submissionId: '1234',
       id: 'relationGroup',
       formConfiguration: [],
+      isInlineGroup: false,
       mandatoryField: '',
       name: 'relationGroup',
       relationFields: [],
@@ -200,6 +209,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
       providers: [
         DsDynamicFormControlContainerComponent,
         DynamicFormService,
+        { provide: DsDynamicTypeBindRelationService, useValue: getMockDsDynamicTypeBindRelationService() },
         { provide: RelationshipService, useValue: {} },
         { provide: SelectableListService, useValue: {} },
         { provide: ItemDataService, useValue: {} },

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -76,11 +76,13 @@ import { DsDynamicLookupComponent } from './models/lookup/dynamic-lookup.compone
 import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component';
 import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component';
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
+import { DynamicRelationGroupModel } from './models/relation-group/dynamic-relation-group.model';
 import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
 import { DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH } from './models/custom-switch/custom-switch.model';
 import { CustomSwitchComponent } from './models/custom-switch/custom-switch.component';
 import { find, map, startWith, switchMap, take } from 'rxjs/operators';
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { DsDynamicTypeBindRelationService } from './ds-dynamic-type-bind-relation.service';
 import { SearchResult } from '../../../search/models/search-result.model';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -194,8 +196,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @ContentChildren(DynamicTemplateDirective) contentTemplateList: QueryList<DynamicTemplateDirective>;
   // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
-
+  @Input() hasMetadataModel: any;
   @Input() formId: string;
+  @Input() formGroup: FormGroup;
+  @Input() formModel: DynamicFormControlModel[];
   @Input() asBootstrapFormGroup = false;
   @Input() bindId = true;
   @Input() context: any | null = null;
@@ -237,6 +241,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     protected dynamicFormComponentService: DynamicFormComponentService,
     protected layoutService: DynamicFormLayoutService,
     protected validationService: DynamicFormValidationService,
+    protected typeBindRelationService: DsDynamicTypeBindRelationService,
     protected translateService: TranslateService,
     protected relationService: DynamicFormRelationService,
     private modalService: NgbModal,
@@ -343,6 +348,9 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
       if (this.model && this.model.placeholder) {
         this.model.placeholder = this.translateService.instant(this.model.placeholder);
       }
+      if (this.model.typeBindRelations && this.model.typeBindRelations.length > 0) {
+        this.subscriptions.push(...this.typeBindRelationService.subscribeRelations(this.model, this.control));
+      }
     }
   }
 
@@ -357,6 +365,22 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     this.showErrorMessagesPreviousStage = this.showErrorMessages;
   }
 
+  protected createFormControlComponent(): void {
+    super.createFormControlComponent();
+    if (this.componentType !== null) {
+      let index;
+
+      if (this.context && this.context instanceof DynamicFormArrayGroupModel) {
+        index = this.context.index;
+      }
+      const instance = this.dynamicFormComponentService.getFormControlRef(this.model, index);
+      if (instance) {
+        (instance as any).formModel = this.formModel;
+        (instance as any).formGroup = this.formGroup;
+      }
+    }
+  }
+
   /**
    * Since Form Control Components created dynamically have 'OnPush' change detection strategy,
    * changes are not propagated. So use this method to force an update

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-type-bind-relation.service.ts

@@ -0,0 +1,222 @@
+import { Inject, Injectable, Injector, Optional } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { Subscription } from 'rxjs';
+import { startWith } from 'rxjs/operators';
+
+import {
+  AND_OPERATOR,
+  DYNAMIC_MATCHERS,
+  DynamicFormControlCondition,
+  DynamicFormControlMatcher,
+  DynamicFormControlModel,
+  DynamicFormControlRelation,
+  DynamicFormRelationService,
+  OR_OPERATOR
+} from '@ng-dynamic-forms/core';
+
+import { isNotUndefined, isUndefined } from '../../../empty.util';
+import { FormBuilderService } from '../form-builder.service';
+import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model';
+import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-constants';
+
+/**
+ * Service to manage type binding for submission input fields
+ * Any form component with the typeBindRelations DynamicFormControlRelation property can be controlled this way
+ */
+@Injectable()
+export class DsDynamicTypeBindRelationService {
+
+  constructor(@Optional() @Inject(DYNAMIC_MATCHERS) private dynamicMatchers: DynamicFormControlMatcher[],
+              protected dynamicFormRelationService: DynamicFormRelationService,
+              protected formBuilderService: FormBuilderService,
+              protected injector: Injector) {
+
+  }
+
+  /**
+   * Return the string value of the type bind model
+   * @param bindModelValue
+   * @private
+   */
+  private static getTypeBindValue(bindModelValue: string | FormFieldMetadataValueObject): string {
+    let value;
+    if (isUndefined(bindModelValue) || typeof bindModelValue === 'string') {
+      value = bindModelValue;
+    } else if (bindModelValue.hasAuthority()) {
+      value = bindModelValue.authority;
+    } else {
+      value = bindModelValue.value;
+    }
+
+    return value;
+  }
+
+  /**
+   * Get models for this bind type
+   * @param model
+   */
+  public getRelatedFormModel(model: DynamicFormControlModel): DynamicFormControlModel[] {
+
+    const models: DynamicFormControlModel[] = [];
+
+    (model as any).typeBindRelations.forEach((relGroup) => relGroup.when.forEach((rel) => {
+
+      if (model.id === rel.id) {
+        throw new Error(`FormControl ${model.id} cannot depend on itself`);
+      }
+
+      const bindModel: DynamicFormControlModel = this.formBuilderService.getTypeBindModel();
+
+      if (model && !models.some((modelElement) => modelElement === bindModel)) {
+        models.push(bindModel);
+      }
+    }));
+
+    return models;
+  }
+
+  /**
+   * Return true if the type bind relation (eg. {MATCH_VISIBLE, OR, ['book', 'book part']}) matches the value in
+   * matcher.match (or matcher.opposingMatch? not sure what that is), which in this case would be the current dc.type
+   * of the submission item
+   * @param relation type bind relation (eg. {MATCH_VISIBLE, OR, ['book', 'book part']})
+   * @param matcher contains 'match' value and an onChange() event listener
+   */
+  public matchesCondition(relation: DynamicFormControlRelation, matcher: DynamicFormControlMatcher): boolean {
+
+    // Default to OR for operator (OR is explicitly set in field-parser.ts anyway)
+    const operator = relation.operator || OR_OPERATOR;
+
+
+    return relation.when.reduce((hasAlreadyMatched: boolean, condition: DynamicFormControlCondition, index: number) => {
+      // Get the DynamicFormControlModel (typeBindModel) from the form builder service, set in the form builder
+      // in the form model at init time in formBuilderService.modelFromConfiguration (called by other form components
+      // like relation group component and submission section form component).
+      // This model (DynamicRelationGroupModel) contains eg. mandatory field, formConfiguration, relationFields,
+      // submission scope, form/section type and other high level properties
+      const bindModel: any = this.formBuilderService.getTypeBindModel();
+
+      let values: string[];
+      let bindModelValue = bindModel.value;
+
+      // If the form type is RELATION, map values to the mandatory field for the model? Don't totally understand
+      // what is going on here
+      if (bindModel.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP) {
+        bindModelValue = bindModel.value.map((entry) => entry[bindModel.mandatoryField]);
+      }
+      // If we have an array of values, map the bindModelValue[] back to values[], looking up
+      // the type bind value for each in the static method here (this just handles cases where authority should
+      // be used, or where the entry doesn't have .value but is a string itself, etc)
+      // If values isn't an array, make it a single element array with the looked-up type bind value.
+      if (Array.isArray(bindModelValue)) {
+        values = [...bindModelValue.map((entry) => DsDynamicTypeBindRelationService.getTypeBindValue(entry))];
+      } else {
+        values = [DsDynamicTypeBindRelationService.getTypeBindValue(bindModelValue)];
+      }
+
+      // If bind model evaluates to 'true' (is not undefined, is not null, is not false etc,
+      // AND the relation match (type bind) is equal to the matcher match (item publication type), then the return
+      // value is initialised as false. I'm not sure why the negation is used here!
+      // Perhaps as a fail-safe for a bad mind model but an exact match of the strings in relation and matcher
+      // passed to this method.
+      let returnValue = (!(bindModel && relation.match === matcher.match));
+
+      // Iterate the type bind values parsed and mapped from our form/relation group model
+      for (const value of values) {
+        if (bindModel && relation.match === matcher.match) {
+          // If we're not at the first array element, and we're using the AND operator, and we have not
+          // yet matched anything, return false. This is just a kind of short-hand put in here for some kind of
+          // optimisation, I guess, since the AND requires all values to match, and if we're on index > 0 but haven't
+          // matched then we've already failed. But surely it's simpler and just as optimal to break on the first
+          // non-match if using the AND operator?!
+          // In the case of default type bind usage, we always use OR anyway.
+          if (index > 0 && operator === AND_OPERATOR && !hasAlreadyMatched) {
+            return false;
+          }
+          // If we're not at the first array element, and we're using the OR operator (almost always the case)
+          // and we've already matched then there is no need to continue, just return true.
+          if (index > 0 && operator === OR_OPERATOR && hasAlreadyMatched) {
+            return true;
+          }
+
+          // Do the actual match. Does condition.value (the item publication type) match the field model
+          // type bind currently being inspected?
+          returnValue = condition.value === value;
+
+          // If return value is already true, break.
+          if (returnValue) {
+            break;
+          }
+        }
+
+        // Here we have tests using 'opposingMatch' which I'm not certain about yet
+        // It looks like a negation of sorts? Or a 'not equals' comparison used in combination I think?
+        if (bindModel && relation.match === matcher.opposingMatch) {
+          // If we're not at the first element, using AND, and already matched, just return true here
+          if (index > 0 && operator === AND_OPERATOR && hasAlreadyMatched) {
+            return true;
+          }
+
+          // If we're not at the first element, using OR, and we have NOT already matched, return false
+          if (index > 0 && operator === OR_OPERATOR && !hasAlreadyMatched) {
+            return false;
+          }
+
+          // Negated comparison
+          returnValue = !(condition.value === value);
+
+          // Break if already false
+          if (!returnValue) {
+            break;
+          }
+        }
+      }
+      return returnValue;
+    }, false);
+  }
+
+  /**
+   * Return an array of subscriptions to a calling component
+   * @param model
+   * @param control
+   */
+  subscribeRelations(model: DynamicFormControlModel, control: FormControl): Subscription[] {
+
+    const relatedModels = this.getRelatedFormModel(model);
+    const subscriptions: Subscription[] = [];
+
+    Object.values(relatedModels).forEach((relatedModel: any) => {
+
+      if (isNotUndefined(relatedModel)) {
+        const initValue = (isUndefined(relatedModel.value) || typeof relatedModel.value === 'string') ? relatedModel.value :
+          (Array.isArray(relatedModel.value) ? relatedModel.value : relatedModel.value.value);
+
+        const valueChanges = relatedModel.valueChanges.pipe(
+          startWith(initValue)
+        );
+
+        // Build up the subscriptions to watch for changes;
+        // I still don't fully understand what is happening here, or the triggers in various form usage that
+        // cause which / what to fire change events, why the matcher has onChange() instead of a field value or
+        // form model, etc.
+        subscriptions.push(valueChanges.subscribe(() => {
+          // Iterate each matcher
+          this.dynamicMatchers.forEach((matcher) => {
+
+            // Find the relation
+            const relation = this.dynamicFormRelationService.findRelationByMatcher((model as any).typeBindRelations, matcher);
+
+            // If the relation is defined, get matchesCondition result and pass it to the onChange event listener
+            if (relation !== undefined) {
+              const hasMatch = this.matchesCondition(relation, matcher);
+              matcher.onChange(hasMatch, model, control, this.injector);
+            }
+          });
+        }));
+      }
+    });
+
+    return subscriptions;
+  }
+}

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -1,6 +1,7 @@
 <ng-container [formGroup]="group">
     <div [id]="id"
          [formArrayName]="model.id"
+         [class.d-none]="model.hidden"
          [ngClass]="getClass('element', 'control')">
 
       <!-- Draggable Container -->
@@ -13,15 +14,17 @@
              cdkDrag
              cdkDragHandle
              [cdkDragDisabled]="dragDisabled"
-             [cdkDragPreviewClass]="'ds-submission-reorder-dragging'">
+             [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
+             [class.grey-background]="model.isInlineGroupArray">
           <!-- Item content -->
-          <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0">
-            <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
+          <div class="drag-handle" [class.invisible]="dragDisabled" tabindex="0">
+            <i class="drag-icon fas fa-grip-vertical fa-fw"  ></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
                                              [bindId]="false"
                                              [formGroup]="group"
+                                             [formModel]="formModel"
                                              [context]="groupModel"
                                              [group]="control.get([idx])"
                                              [hidden]="_model.hidden"
@@ -37,9 +40,6 @@
           <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
         </div>
       </div>
-
-
-
     </div>
 
 </ng-container>

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts

@@ -6,6 +6,7 @@ import {
   DynamicFormControlCustomEvent,
   DynamicFormControlEvent,
   DynamicFormControlLayout,
+  DynamicFormControlModel,
   DynamicFormLayout,
   DynamicFormLayoutService,
   DynamicFormValidationService,
@@ -22,6 +23,8 @@ import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
 })
 export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
 
+  @Input() bindId = true;
+  @Input() formModel: DynamicFormControlModel[];
   @Input() formLayout: DynamicFormLayout;
   @Input() group: FormGroup;
   @Input() layout: DynamicFormControlLayout;

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.model.ts

@@ -2,20 +2,35 @@ import {
   DynamicDateControlModel,
   DynamicDatePickerModelConfig,
   DynamicFormControlLayout,
+  DynamicFormControlModel,
+  DynamicFormControlRelation,
   serializable
 } from '@ng-dynamic-forms/core';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {isEmpty, isNotEmpty, isNotUndefined} from '../../../../../empty.util';
+import {MetadataValue} from '../../../../../../core/shared/metadata.models';
 
 export const DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER = 'DATE';
 
 export interface DynamicDsDateControlModelConfig extends DynamicDatePickerModelConfig {
   legend?: string;
+  typeBindRelations?: DynamicFormControlRelation[];
+  securityLevel?: number;
+  securityConfigLevel?: number[];
+  toggleSecurityVisibility?: boolean;
 }
 
 /**
  * Dynamic Date Picker Model class
  */
 export class DynamicDsDatePickerModel extends DynamicDateControlModel {
+  @serializable() hiddenUpdates: Subject<boolean>;
+  @serializable() typeBindRelations: DynamicFormControlRelation[];
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER;
+  @serializable() metadataValue: MetadataValue;
+  @serializable() securityLevel?: number;
+  @serializable() securityConfigLevel?: number[];
+  @serializable() toggleSecurityVisibility = true;
   malformedDate: boolean;
   legend: string;
   hasLanguages = false;
@@ -25,6 +40,28 @@ export class DynamicDsDatePickerModel extends DynamicDateControlModel {
     super(config, layout);
     this.malformedDate = false;
     this.legend = config.legend;
+    this.metadataValue = (config as any).metadataValue;
+    this.typeBindRelations = config.typeBindRelations ? config.typeBindRelations : [];
+    this.hiddenUpdates = new BehaviorSubject<boolean>(this.hidden);
+    this.hiddenUpdates.subscribe((hidden: boolean) => {
+      this.hidden = hidden;
+      const parentModel = this.getRootParent(this);
+      if (parentModel && isNotUndefined(parentModel.hidden)) {
+        parentModel.hidden = hidden;
+      }
+    });
+  }
+
+  private getRootParent(model: any): DynamicFormControlModel {
+    if (isEmpty(model) || isEmpty(model.parent)) {
+      return model;
+    } else {
+      return this.getRootParent(model.parent);
+    }
+  }
+
+  get hasSecurityLevel(): boolean {
+    return isNotEmpty(this.securityLevel);
   }
 
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model.ts

@@ -1,14 +1,15 @@
 import {
-  DynamicFormControlLayout,
+  DynamicFormControlLayout, DynamicFormControlModel,
+  DynamicFormControlRelation,
   DynamicInputModel,
   DynamicInputModelConfig,
   serializable
 } from '@ng-dynamic-forms/core';
-import { Subject } from 'rxjs';
+import {BehaviorSubject, Subject} from 'rxjs';
 
 import { LanguageCode } from '../../models/form-field-language-value.model';
 import { VocabularyOptions } from '../../../../../core/submission/vocabularies/models/vocabulary-options.model';
-import { hasValue } from '../../../../empty.util';
+import {hasValue, isEmpty, isNotUndefined} from '../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../models/form-field-metadata-value.model';
 import { RelationshipOptions } from '../../models/relationship-options.model';
 
@@ -18,12 +19,14 @@ export interface DsDynamicInputModelConfig extends DynamicInputModelConfig {
   language?: string;
   place?: number;
   value?: any;
+  typeBindRelations?: DynamicFormControlRelation[];
   relationship?: RelationshipOptions;
   repeatable: boolean;
   metadataFields: string[];
   submissionId: string;
   hasSelectableMetadata: boolean;
   metadataValue?: FormFieldMetadataValueObject;
+  isModelOfInnerForm?: boolean;
 
 }
 
@@ -33,12 +36,17 @@ export class DsDynamicInputModel extends DynamicInputModel {
   @serializable() private _languageCodes: LanguageCode[];
   @serializable() private _language: string;
   @serializable() languageUpdates: Subject<string>;
+  @serializable() place: number;
+  @serializable() typeBindRelations: DynamicFormControlRelation[];
+  @serializable() typeBindHidden = false;
   @serializable() relationship?: RelationshipOptions;
   @serializable() repeatable?: boolean;
   @serializable() metadataFields: string[];
   @serializable() submissionId: string;
   @serializable() hasSelectableMetadata: boolean;
   @serializable() metadataValue: FormFieldMetadataValueObject;
+  @serializable() isModelOfInnerForm: boolean;
+
 
   constructor(config: DsDynamicInputModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
@@ -51,6 +59,8 @@ export class DsDynamicInputModel extends DynamicInputModel {
     this.submissionId = config.submissionId;
     this.hasSelectableMetadata = config.hasSelectableMetadata;
     this.metadataValue = config.metadataValue;
+    this.place = config.place;
+    this.isModelOfInnerForm = (hasValue(config.isModelOfInnerForm) ? config.isModelOfInnerForm : false);
 
     this.language = config.language;
     if (!this.language) {
@@ -71,6 +81,8 @@ export class DsDynamicInputModel extends DynamicInputModel {
       this.language = lang;
     });
 
+    this.typeBindRelations = config.typeBindRelations ? config.typeBindRelations : [];
+
     this.vocabularyOptions = config.vocabularyOptions;
   }
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-row-array-model.ts

@@ -1,5 +1,12 @@
-import { DynamicFormArrayModel, DynamicFormArrayModelConfig, DynamicFormControlLayout, serializable } from '@ng-dynamic-forms/core';
+import {
+  DynamicFormArrayModel,
+  DynamicFormArrayModelConfig,
+  DynamicFormControlLayout,
+  DynamicFormControlRelation,
+  serializable
+} from '@ng-dynamic-forms/core';
 import { RelationshipOptions } from '../../models/relationship-options.model';
+import { isNotUndefined } from '../../../../empty.util';
 
 export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig {
   notRepeatable: boolean;
@@ -10,6 +17,9 @@ export interface DynamicRowArrayModelConfig extends DynamicFormArrayModelConfig
   metadataFields: string[];
   hasSelectableMetadata: boolean;
   isDraggable: boolean;
+  showButtons: boolean;
+  typeBindRelations?: DynamicFormControlRelation[];
+  isInlineGroupArray?: boolean;
 }
 
 export class DynamicRowArrayModel extends DynamicFormArrayModel {
@@ -21,17 +31,29 @@ export class DynamicRowArrayModel extends DynamicFormArrayModel {
   @serializable() metadataFields: string[];
   @serializable() hasSelectableMetadata: boolean;
   @serializable() isDraggable: boolean;
+  @serializable() showButtons = true;
+  @serializable() typeBindRelations: DynamicFormControlRelation[];
   isRowArray = true;
+  isInlineGroupArray = false;
 
   constructor(config: DynamicRowArrayModelConfig, layout?: DynamicFormControlLayout) {
     super(config, layout);
-    this.notRepeatable = config.notRepeatable;
-    this.required = config.required;
+    if (isNotUndefined(config.notRepeatable)) {
+      this.notRepeatable = config.notRepeatable;
+    }
+    if (isNotUndefined(config.required)) {
+      this.required = config.required;
+    }
+    if (isNotUndefined(config.showButtons)) {
+      this.showButtons = config.showButtons;
+    }
     this.submissionId = config.submissionId;
     this.relationshipConfig = config.relationshipConfig;
     this.metadataKey = config.metadataKey;
     this.metadataFields = config.metadataFields;
     this.hasSelectableMetadata = config.hasSelectableMetadata;
     this.isDraggable = config.isDraggable;
+    this.typeBindRelations = config.typeBindRelations ? config.typeBindRelations : [];
+    this.isInlineGroupArray = config.isInlineGroupArray ? config.isInlineGroupArray : false;
   }
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html

@@ -1,8 +1,13 @@
+<div style="width: 100%">
 <ng-container [formGroup]="group">
 
-  <div role="group" [formGroupName]="model.id" [id]="id" [ngClass]="getClass('element','control')">
-
-    <ds-dynamic-form-control-container *ngFor="let _model of model.group"
+  <div role="group" [formGroupName]="model.id"
+                    [id]="id"
+                    [class.d-none]="model.hidden"
+                    [ngClass]="getClass('element','control')">
+     <ds-dynamic-form-control-container *ngFor="let _model of model.group"
+                                       [formGroup]="group"
+                                       [formModel]="formModel"
                                        [group]="control"
                                        [hasErrorMessaging]="model.hasErrorMessages"
                                        [hidden]="_model.hidden"
@@ -16,3 +21,4 @@
                                        (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
   </div>
 </ng-container>
+</div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.ts

@@ -5,7 +5,9 @@ import {
   DynamicFormControlCustomEvent,
   DynamicFormControlEvent,
   DynamicFormControlLayout,
-  DynamicFormGroupModel, DynamicFormLayout,
+  DynamicFormControlModel,
+  DynamicFormGroupModel,
+  DynamicFormLayout,
   DynamicFormLayoutService,
   DynamicFormValidationService,
   DynamicTemplateDirective
@@ -18,6 +20,7 @@ import {
 })
 export class DsDynamicFormGroupComponent extends DynamicFormControlComponent {
 
+  @Input() formModel: DynamicFormControlModel[];
   @Input() formLayout: DynamicFormLayout;
   @Input() group: FormGroup;
   @Input() layout: DynamicFormControlLayout;

src/app/shared/form/builder/form-builder.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { AbstractControl, FormGroup } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
 
 import {
   DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
@@ -7,6 +7,7 @@ import {
   DYNAMIC_FORM_CONTROL_TYPE_GROUP,
   DYNAMIC_FORM_CONTROL_TYPE_INPUT,
   DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
+  DynamicFormArrayGroupModel,
   DynamicFormArrayModel,
   DynamicFormComponentService,
   DynamicFormControlEvent,
@@ -19,7 +20,7 @@ import {
 } from '@ng-dynamic-forms/core';
 import { isObject, isString, mergeWith } from 'lodash';
 
-import { hasValue, isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull } from '../../empty.util';
+import { hasValue, isEmpty, isNotEmpty, isNotNull, isNotUndefined, isNull, isObjectEmpty } from '../../empty.util';
 import { DynamicQualdropModel } from './ds-dynamic-form-ui/models/ds-dynamic-qualdrop.model';
 import { SubmissionFormsModel } from '../../../core/config/models/config-submission-forms.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_TAG } from './ds-dynamic-form-ui/models/tag/dynamic-tag.model';
@@ -36,12 +37,43 @@ import { VIRTUAL_METADATA_PREFIX } from '../../../core/shared/metadata.models';
 @Injectable()
 export class FormBuilderService extends DynamicFormService {
 
+  private typeBindModel: DynamicFormControlModel;
+
+  /**
+   * This map contains the active forms model
+   */
+  private formModels: Map<string, DynamicFormControlModel[]>;
+
+  /**
+   * This map contains the active forms control groups
+   */
+  private formGroups: Map<string, FormGroup>;
+
   constructor(
     componentService: DynamicFormComponentService,
     validationService: DynamicFormValidationService,
     protected rowParser: RowParser
   ) {
     super(componentService, validationService);
+    this.formModels = new Map();
+    this.formGroups = new Map();
+  }
+
+  createDynamicFormControlEvent(control: FormControl, group: FormGroup, model: DynamicFormControlModel, type: string): DynamicFormControlEvent {
+    const $event = {
+      value: (model as any).value,
+      autoSave: false
+    };
+    const context: DynamicFormArrayGroupModel = (model?.parent instanceof DynamicFormArrayGroupModel) ? model?.parent : null;
+    return {$event, context, control: control, group: group, model: model, type};
+  }
+
+  getTypeBindModel() {
+    return this.typeBindModel;
+  }
+
+  setTypeBindModel(model: DynamicFormControlModel) {
+    this.typeBindModel = model;
   }
 
   findById(id: string, groupModel: DynamicFormControlModel[], arrayIndex = null): DynamicFormControlModel | null {
@@ -223,10 +255,11 @@ export class FormBuilderService extends DynamicFormService {
     return result;
   }
 
-  modelFromConfiguration(submissionId: string, json: string | SubmissionFormsModel, scopeUUID: string, sectionData: any = {}, submissionScope?: string, readOnly = false): DynamicFormControlModel[] | never {
-    let rows: DynamicFormControlModel[] = [];
-    const rawData = typeof json === 'string' ? JSON.parse(json, parseReviver) : json;
-
+  modelFromConfiguration(submissionId: string, json: string | SubmissionFormsModel, scopeUUID: string, sectionData: any = {},
+                         submissionScope?: string, readOnly = false, typeBindModel = null,
+                         isInnerForm = false, securityConfig: any = null): DynamicFormControlModel[] | never {
+     let rows: DynamicFormControlModel[] = [];
+     const rawData = typeof json === 'string' ? JSON.parse(json, parseReviver) : json;
     if (rawData.rows && !isEmpty(rawData.rows)) {
       rawData.rows.forEach((currentRow) => {
         const rowParsed = this.rowParser.parse(submissionId, currentRow, scopeUUID, sectionData, submissionScope, readOnly);
@@ -240,6 +273,13 @@ export class FormBuilderService extends DynamicFormService {
       });
     }
 
+    if (isNull(typeBindModel)) {
+      typeBindModel = this.findById('dc_type', rows);
+    }
+
+    if (typeBindModel !== null) {
+      this.setTypeBindModel(typeBindModel);
+    }
     return rows;
   }
 
@@ -309,6 +349,10 @@ export class FormBuilderService extends DynamicFormService {
     return isNotEmpty(fieldModel) ? formGroup.get(this.getPath(fieldModel)) : null;
   }
 
+  getFormControlByModel(formGroup: FormGroup, fieldModel: DynamicFormControlModel): AbstractControl {
+    return isNotEmpty(fieldModel) ? formGroup.get(this.getPath(fieldModel)) : null;
+  }
+
   /**
    * Note (discovered while debugging) this is not the ID as used in the form,
    * but the first part of the path needed in a patch operation:
@@ -328,6 +372,82 @@ export class FormBuilderService extends DynamicFormService {
     return (tempModel.id !== tempModel.name) ? tempModel.name : tempModel.id;
   }
 
+  /**
+   * Add new form model to formModels map
+   * @param id id of model
+   * @param model model
+   */
+  addFormModel(id: string, model: DynamicFormControlModel[]): void {
+    this.formModels.set(id, model);
+  }
+
+  /**
+   * If present, remove form model from formModels map
+   * @param id id of model
+   */
+  removeFormModel(id: string): void {
+    if (this.formModels.has(id)) {
+      this.formModels.delete(id);
+    }
+  }
+
+  /**
+   * Add new form model to formModels map
+   * @param id id of model
+   * @param formGroup FormGroup
+   */
+  addFormGroups(id: string, formGroup: FormGroup): void {
+    this.formGroups.set(id, formGroup);
+  }
+
+  /**
+   * If present, remove form model from formModels map
+   * @param id id of model
+   */
+  removeFormGroup(id: string): void {
+    if (this.formGroups.has(id)) {
+      this.formGroups.delete(id);
+    }
+  }
+
+  /**
+   * This method searches a field in all forms instantiated
+   * by form.component and, if found, it updates its value
+   *
+   * @param fieldId id of field to update
+   * @param value new value to set
+   * @return the model updated if found
+   */
+  updateModelValue(fieldId: string, value: FormFieldMetadataValueObject): DynamicFormControlModel {
+    let returnModel = null;
+    this.formModels.forEach((models, formId) => {
+      const fieldModel: any = this.findById(fieldId, models);
+      if (hasValue(fieldModel)) {
+        if (isNotEmpty(value)) {
+          if (fieldModel.repeatable && isNotEmpty(fieldModel.value)) {
+            // if model is repeatable and has already a value add a new field instead of replacing it
+            const formGroup = this.formGroups.get(formId);
+            const arrayContext = fieldModel.parent?.context;
+            if (isNotEmpty(formGroup) && isNotEmpty(arrayContext)) {
+              const formArrayControl = this.getFormControlByModel(formGroup, arrayContext) as FormArray;
+              const index = arrayContext?.groups?.length;
+              this.insertFormArrayGroup(index, formArrayControl, arrayContext);
+              const newAddedModel: any = this.findById(fieldId, models, index);
+              this.detectChanges();
+              newAddedModel.value = value;
+              returnModel = newAddedModel;
+            }
+          } else {
+            fieldModel.value = value;
+            returnModel = fieldModel;
+          }
+        }
+        return;
+      }
+    });
+    return returnModel;
+  }
+
   /**
    * Calculate the metadata list related to the event.
    * @param event
@@ -400,4 +520,29 @@ export class FormBuilderService extends DynamicFormService {
     return Object.keys(result);
   }
 
+  /**
+   * Add new formbuilder in forma array by copying current formBuilder index
+   * @param index index of formBuilder selected to be copied
+   * @param formArray formArray of the inline group forms
+   * @param formArrayModel formArrayModel model of forms that will be created
+   */
+  copyFormArrayGroup(index: number, formArray: FormArray, formArrayModel: DynamicFormArrayModel) {
+
+      const groupModel = formArrayModel.insertGroup(index);
+      const previousGroup = formArray.controls[index] as FormGroup;
+      const newGroup = this.createFormGroup(groupModel.group, null, groupModel);
+      const previousKey = Object.keys(previousGroup.getRawValue())[0];
+      const newKey = Object.keys(newGroup.getRawValue())[0];
+
+      if (!isObjectEmpty(previousGroup.getRawValue()[previousKey])) {
+        newGroup.get(newKey).setValue(previousGroup.getRawValue()[previousKey]);
+      }
+
+      formArray.insert(index, newGroup);
+
+      return newGroup;
+  }
+
+
+
 }

src/app/shared/form/builder/models/form-field.model.ts

@@ -113,6 +113,12 @@ export class FormFieldModel {
   @autoserialize
   style: string;
 
+  /**
+   * Containing types to bind for this field
+   */
+  @autoserialize
+  typeBind: string[];
+
   /**
    * Containing the value for this metadata field
    */

src/app/shared/form/builder/parsers/date-field-parser.ts

@@ -1,7 +1,7 @@
 import { FieldParser } from './field-parser';
 import {
-  DynamicDsDateControlModelConfig,
-  DynamicDsDatePickerModel
+  DynamicDsDatePickerModel,
+  DynamicDsDateControlModelConfig
 } 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';
@@ -13,7 +13,7 @@ export class DateFieldParser extends FieldParser {
     let malformedDate = false;
     const inputDateModelConfig: DynamicDsDateControlModelConfig = this.initModel(null, false, true);
     inputDateModelConfig.legend = this.configData.label;
-
+    inputDateModelConfig.disabled = inputDateModelConfig.readOnly;
     inputDateModelConfig.toggleIcon = 'fas fa-calendar';
     this.setValues(inputDateModelConfig as any, fieldValue);
     // Init Data and validity check

src/app/shared/form/builder/parsers/field-parser.ts

@@ -1,7 +1,7 @@
 import { Inject, InjectionToken } from '@angular/core';
 
 import { uniqueId } from 'lodash';
-import { DynamicFormControlLayout } from '@ng-dynamic-forms/core';
+import {DynamicFormControlLayout, DynamicFormControlRelation, MATCH_VISIBLE, OR_OPERATOR} from '@ng-dynamic-forms/core';
 
 import { hasValue, isNotEmpty, isNotNull, isNotUndefined } from '../../../empty.util';
 import { FormFieldModel } from '../models/form-field.model';
@@ -67,6 +67,7 @@ export abstract class FieldParser {
         metadataFields: this.getAllFieldIds(),
         hasSelectableMetadata: isNotEmpty(this.configData.selectableMetadata),
         isDraggable,
+        typeBindRelations: isNotEmpty(this.configData.typeBind) ? this.getTypeBindRelations(this.configData.typeBind) : null,
         groupFactory: () => {
           let model;
           if ((arrayCounter === 0)) {
@@ -275,7 +276,7 @@ export abstract class FieldParser {
     // Set label
     this.setLabel(controlModel, label);
     if (hint) {
-      controlModel.hint = this.configData.hints;
+      controlModel.hint = this.configData.hints || ' ';
     }
     controlModel.placeholder = this.configData.label;
 
@@ -292,9 +293,45 @@ export abstract class FieldParser {
       (controlModel as DsDynamicInputModel).languageCodes = this.configData.languageCodes;
     }
 
+    // If typeBind is configured
+    if (isNotEmpty(this.configData.typeBind)) {
+      (controlModel as DsDynamicInputModel).typeBindRelations = this.getTypeBindRelations(this.configData.typeBind);
+    }
+
     return controlModel;
   }
 
+  /**
+   * Get the type bind values from the REST data for a specific field
+   * The return value is any[] in the method signature but in reality it's
+   * returning the 'relation' that'll be used for a dynamic matcher when filtering
+   * fields in type bind, made up of a 'match' outcome (make this field visible), an 'operator'
+   * (OR) and a 'when' condition (the bindValues array).
+   * @param configuredTypeBindValues  array of types from the submission definition (CONFIG_DATA)
+   * @private
+   * @return DynamicFormControlRelation[] array with one relation in it, for type bind matching to show a field
+   */
+  private getTypeBindRelations(configuredTypeBindValues: string[]): DynamicFormControlRelation[] {
+    const bindValues = [];
+    configuredTypeBindValues.forEach((value) => {
+      bindValues.push({
+        id: 'dc_type',
+        value: value
+      });
+    });
+    // match: MATCH_VISIBLE means that if true, the field / component will be visible
+    // operator: OR means that all the values in the 'when' condition will be compared with OR, not AND
+    // when: the list of values to match against, in this case the list of strings from <type-bind>...</type-bind>
+    // Example: Field [x] will be VISIBLE if dc_type = book OR dc_type = book_part
+    //
+    // The opposing match value will be the dc.type for the workspace item
+    return [{
+      match: MATCH_VISIBLE,
+      operator: OR_OPERATOR,
+      when: bindValues
+    }];
+  }
+
   protected hasRegex() {
     return hasValue(this.configData.input.regex);
   }