fix for dynamic form after upgrade

src/app/shared/collection-dropdown/collection-dropdown.component.ts

@@ -193,7 +193,7 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
             collection: { id: collection.id, uuid: collection.id, name: collection.name }
           })
         ))),
-        reduce((acc: any, value: any) => [...acc, ...value], []),
+        reduce((acc: any, value: any) => [...acc, value], []),
         startWith([])
         );
     this.subs.push(this.searchListCollection$.subscribe(

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

@@ -1,4 +1,4 @@
-<div [class.form-group]="asBootstrapFormGroup"
+<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
     <label *ngIf="!isCheckbox && hasLabel"

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

@@ -200,6 +200,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @Input() bindId = true;
   @Input() context: any | null = null;
   @Input() group: FormGroup;
+  @Input() hostClass: string[];
   @Input() hasErrorMessaging = false;
   @Input() layout = null as DynamicFormLayout;
   @Input() model: any;
@@ -250,7 +251,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     private formBuilderService: FormBuilderService,
     private submissionService: SubmissionService
   ) {
-    super(componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
+    super(ref, componentFactoryResolver, layoutService, validationService, dynamicFormComponentService, relationService);
   }
 
   /**

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

@@ -5,9 +5,9 @@
                                    [hidden]="model.hidden"
                                    [layout]="formLayout"
                                    [model]="model"
-                                   [ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
                                    [templates]="templates"
                                    [asBootstrapFormGroup]="true"
-                                   (dfBlur)="onEvent($event, 'blur')"
-                                   (dfChange)="onEvent($event, 'change')"
-                                   (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>
+                                   (dfBlur)="onCustomEvent($event, blur)"
+                                   (dfChange)="onCustomEvent($event, change)"
+                                   (dfFocus)="onCustomEvent($event, focus)"
+                                   (ngbEvent)="onCustomEvent($event, ngbEvent)"></ds-dynamic-form-control-container>

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

@@ -1,4 +1,13 @@
-import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, ViewChildren } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import {
   DynamicFormComponent,
@@ -6,11 +15,10 @@ import {
   DynamicFormControlEvent,
   DynamicFormControlModel,
   DynamicFormLayout,
-  DynamicFormLayoutService,
+  DynamicFormComponentService,
   DynamicTemplateDirective,
 } from '@ng-dynamic-forms/core';
 import { DsDynamicFormControlContainerComponent } from './ds-dynamic-form-control-container.component';
-import { FormBuilderService } from '../form-builder.service';
 
 @Component({
   selector: 'ds-dynamic-form',
@@ -21,20 +29,21 @@ export class DsDynamicFormComponent extends DynamicFormComponent {
   @Input() formId: string;
   @Input() formGroup: FormGroup;
   @Input() formModel: DynamicFormControlModel[];
-  @Input() formLayout = null as DynamicFormLayout;
+  @Input() formLayout: DynamicFormLayout;
 
   /* 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>();
-  @Output('ngbEvent') customEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   /* tslint:enable:no-output-rename */
 
+  @Output() ngbEvent: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
+
   @ContentChildren(DynamicTemplateDirective) templates: QueryList<DynamicTemplateDirective>;
 
   @ViewChildren(DsDynamicFormControlContainerComponent) components: QueryList<DynamicFormControlContainerComponent>;
 
-  constructor(protected formService: FormBuilderService, protected layoutService: DynamicFormLayoutService) {
-    super(formService, layoutService);
+  constructor(changeDetectorRef: ChangeDetectorRef, componentService: DynamicFormComponentService) {
+    super(changeDetectorRef, componentService);
   }
 }

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

@@ -1,5 +1,5 @@
 <ng-container [formGroup]="group">
-    <div [dynamicId]="bindId && model.id"
+    <div [id]="id"
          [formArrayName]="model.id"
          [ngClass]="getClass('element', 'control')">
         <div role="group"
@@ -34,7 +34,7 @@
                                        [context]="model.groups[idx]"
                                        [group]="control.get([idx])"
                                        [hidden]="_model.hidden"
-                                       [layout]="layout"
+                                       [layout]="formLayout"
                                        [model]="_model"
                                        [templates]="templates"
                                        [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"

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

@@ -6,7 +6,7 @@ import {
   DynamicFormControlCustomEvent,
   DynamicFormControlEvent,
   DynamicFormControlEventType,
-  DynamicFormLayout,
+  DynamicFormControlLayout, DynamicFormLayout,
   DynamicFormLayoutService,
   DynamicFormValidationService,
   DynamicTemplateDirective
@@ -22,9 +22,9 @@ import { hasValue } from '../../../../../empty.util';
 })
 export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
 
-  @Input() bindId = true;
+  @Input() formLayout: DynamicFormLayout;
   @Input() group: FormGroup;
-  @Input() layout: DynamicFormLayout;
+  @Input() layout: DynamicFormControlLayout;
   @Input() model: DynamicRowArrayModel;
   @Input() templates: QueryList<DynamicTemplateDirective> | undefined;
 

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

@@ -2,7 +2,7 @@
   <input type="checkbox" class="form-check-input custom-control-input"
          [checked]="model.checked"
          [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
+         [id]="id"
          [formControlName]="model.id"
          [indeterminate]="model.indeterminate"
          [name]="model.name"

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html

@@ -3,7 +3,7 @@
     <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
            [class.is-invalid]="showErrorMessages"
            [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
-           [dynamicId]="bindId && model.id"
+           [id]="id"
            [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
            [formControlName]="model.id"
            [maxDate]="model.max"

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

@@ -4,7 +4,7 @@ import { NgbDatepicker, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
 import {
   DynamicDatePickerModel,
   DynamicFormControlComponent,
-  DynamicFormLayout,
+  DynamicFormControlLayout,
   DynamicFormLayoutService,
   DynamicFormValidationService
 } from '@ng-dynamic-forms/core';
@@ -17,7 +17,7 @@ export class DsDatePickerInlineComponent extends DynamicFormControlComponent {
 
   @Input() bindId = true;
   @Input() group: FormGroup;
-  @Input() layout: DynamicFormLayout;
+  @Input() layout: DynamicFormControlLayout;
   @Input() model: DynamicDatePickerModel;
 
   @Output() blur: EventEmitter<any> = new EventEmitter();

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

@@ -14,7 +14,6 @@ export interface DsDynamicDisabledModelConfig extends DsDynamicInputModelConfig
 export class DynamicDisabledModel extends DsDynamicInputModel {
 
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_DISABLED;
-  @serializable() value: any;
   @serializable() hasSelectableMetadata: boolean;
 
   constructor(config: DsDynamicDisabledModelConfig, layout?: DynamicFormControlLayout) {

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

@@ -22,7 +22,6 @@ import { PageInfo } from '../../../../../core/shared/page-info.model';
 @Directive()
 export abstract class DsDynamicVocabularyComponent extends DynamicFormControlComponent {
 
-  @Input() abstract bindId = true;
   @Input() abstract group: FormGroup;
   @Input() abstract model: DsDynamicInputModel;
 

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

@@ -1,15 +1,12 @@
 <ng-container [formGroup]="group">
 
-  <div role="group"
-       [dynamicId]="bindId && model.id"
-       [formGroupName]="model.id"
-       [ngClass]="getClass('element','control')">
+  <div role="group" [formGroupName]="model.id" [id]="id" [ngClass]="getClass('element','control')">
 
     <ds-dynamic-form-control-container *ngFor="let _model of model.group"
                                        [group]="control"
                                        [hasErrorMessaging]="model.hasErrorMessages"
                                        [hidden]="_model.hidden"
-                                       [layout]="layout"
+                                       [layout]="formLayout"
                                        [model]="_model"
                                        [templates]="templates"
                                        [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"

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

@@ -4,8 +4,8 @@ import {
   DynamicFormControlComponent,
   DynamicFormControlCustomEvent,
   DynamicFormControlEvent,
-  DynamicFormGroupModel,
-  DynamicFormLayout,
+  DynamicFormControlLayout,
+  DynamicFormGroupModel, DynamicFormLayout,
   DynamicFormLayoutService,
   DynamicFormValidationService,
   DynamicTemplateDirective
@@ -18,9 +18,9 @@ import {
 })
 export class DsDynamicFormGroupComponent extends DynamicFormControlComponent {
 
-  @Input() bindId = true;
+  @Input() formLayout: DynamicFormLayout;
   @Input() group: FormGroup;
-  @Input() layout: DynamicFormLayout;
+  @Input() layout: DynamicFormControlLayout;
   @Input() model: DynamicFormGroupModel;
   @Input() templates: QueryList<DynamicTemplateDirective> | DynamicTemplateDirective[] | undefined;
 

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

@@ -2,7 +2,7 @@
   <div *ngIf="model.repeatable"
        class="form-row"
        [attr.tabindex]="model.tabIndex"
-       [dynamicId]="bindId && model.id"
+       [id]="id"
        [formGroupName]="model.id"
        [ngClass]="model.layout.element?.control">
 
@@ -14,7 +14,6 @@
                  [attr.tabindex]="item.index"
                  [checked]="item.value"
                  [id]="item.id"
-                 [dynamicId]="item.id"
                  [formControlName]="item.id"
                  [name]="model.name"
                  [required]="model.required"
@@ -38,7 +37,7 @@
        class="form-row"
        ngbRadioGroup
        [attr.tabindex]="model.tabIndex"
-       [dynamicId]="bindId && model.id"
+       [id]="id"
        [ngClass]="model.layout.element?.control"
        (change)="onChange($event)">
 
@@ -50,7 +49,7 @@
                [ngClass]="model.layout.element?.control">
           <input type="radio" class="custom-control-input"
                  [checked]="item.value"
-                 [dynamicId]="item.id"
+                 [id]="item.id"
                  [name]="model.id"
                  [required]="model.required"
                  [value]="item.index"

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

@@ -35,7 +35,7 @@ export interface ListItem {
   templateUrl: './dynamic-list.component.html'
 })
 export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit {
-  @Input() bindId = true;
+
   @Input() group: FormGroup;
   @Input() model: any;
 

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

@@ -13,7 +13,7 @@
       <input class="form-control"
              [attr.autoComplete]="model.autoComplete"
              [class.is-invalid]="showErrorMessages"
-             [dynamicId]="bindId && model.id"
+             [id]="model.id"
              [name]="model.name"
              [type]="model.inputType"
              [(ngModel)]="firstInputValue"
@@ -32,7 +32,7 @@
               [ngClass]="{}"
               [attr.autoComplete]="model.autoComplete"
               [class.is-invalid]="showErrorMessages"
-              [dynamicId]="bindId && model.id"
+              [id]="id"
               [name]="model.name + '_2'"
               [type]="model.inputType"
               [(ngModel)]="secondInputValue"

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

@@ -26,7 +26,7 @@ import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component';
   templateUrl: './dynamic-lookup.component.html'
 })
 export class DsDynamicLookupComponent extends DsDynamicVocabularyComponent implements OnDestroy, OnInit {
-  @Input() bindId = true;
+
   @Input() group: FormGroup;
   @Input() model: any;
 

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

@@ -12,7 +12,6 @@ export class DynamicLookupModel extends DsDynamicInputModel {
 
   @serializable() maxOptions: number;
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_LOOKUP;
-  @serializable() value: any;
 
   constructor(config: DynamicLookupModelConfig, layout?: DynamicFormControlLayout) {
 

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

@@ -32,7 +32,7 @@
          class="form-control"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
+         [id]="model.id"
          [inputFormatter]="formatter"
          [name]="model.name"
          [ngbTypeahead]="search"
@@ -54,7 +54,7 @@
        class="form-control custom-select"
        [attr.autoComplete]="model.autoComplete"
        [class.is-invalid]="showErrorMessages"
-       [dynamicId]="bindId && model.id"
+       [id]="id"
        [name]="model.name"
        [placeholder]="model.placeholder"
        [readonly]="model.readOnly"

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

@@ -40,7 +40,7 @@ import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabul
   templateUrl: './dynamic-onebox.component.html'
 })
 export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent implements OnInit {
-  @Input() bindId = true;
+
   @Input() group: FormGroup;
   @Input() model: DynamicOneboxModel;
 

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

@@ -2,7 +2,7 @@
   <input ngbDropdownToggle class="form-control custom-select"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
+         [id]="id"
          [name]="model.name"
          [readonly]="model.readOnly"
          [type]="model.inputType"

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

@@ -28,7 +28,7 @@
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
          [class.pl-3]="chips.hasItems()"
-         [dynamicId]="bindId && model.id"
+         [id]="id"
          [inputFormatter]="formatter"
          [name]="model.name"
          [ngbTypeahead]="search"

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

@@ -96,7 +96,7 @@ export class DsDynamicTagComponent extends DsDynamicVocabularyComponent implemen
     this.hasAuthority = this.model.vocabularyOptions && hasValue(this.model.vocabularyOptions.name);
 
     this.chips = new Chips(
-      this.model.value,
+      this.model.value as any[],
       'display',
       null,
       environment.submission.icons.metadata);

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

@@ -11,7 +11,6 @@ export interface DynamicTagModelConfig extends DsDynamicInputModelConfig {
 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) {

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

@@ -7,7 +7,7 @@ import {
   DYNAMIC_FORM_CONTROL_TYPE_GROUP,
   DYNAMIC_FORM_CONTROL_TYPE_INPUT,
   DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP,
-  DynamicFormArrayModel,
+  DynamicFormArrayModel, DynamicFormComponentService,
   DynamicFormControlModel,
   DynamicFormGroupModel,
   DynamicFormService, DynamicFormValidationService,
@@ -31,10 +31,11 @@ import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './ds-dynamic-form-ui/d
 export class FormBuilderService extends DynamicFormService {
 
   constructor(
+    componentService: DynamicFormComponentService,
     validationService: DynamicFormValidationService,
     protected rowParser: RowParser
   ) {
-    super(validationService);
+    super(componentService, validationService);
   }
 
   findById(id: string, groupModel: DynamicFormControlModel[], arrayIndex = null): DynamicFormControlModel | null {

src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.ts

@@ -77,7 +77,9 @@ export class FilterInputSuggestionsComponent extends InputSuggestionsComponent i
    */
   checkIfValidInput(form) {
     this.valid = !(form.get('metadataNameField').status === 'INVALID' && (form.get('metadataNameField').dirty || form.get('metadataNameField').touched));
+    if (this.metadata) {
       this.objectUpdatesService.setValidFieldUpdate(this.url, this.metadata.uuid, this.valid);
+    }
     return this.valid;
   }
 

src/app/shared/vocabulary-treeview/vocabulary-tree-flat-data-source.ts

@@ -35,7 +35,7 @@ export class VocabularyTreeFlatDataSource<T, F> extends DataSource<F> {
   connect(collectionViewer: CollectionViewer): Observable<F[]> {
     const changes = [
       collectionViewer.viewChange,
-      this._treeControl.expansionModel.onChange,
+      this._treeControl.expansionModel.changed,
       this._flattenedData
     ];
     return merge(...changes).pipe(map(() => {