fixed issues with concat fields and adding repeatable metadata values in submission

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

@@ -227,7 +227,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   }
 
   ngOnInit(): void {
-    console.log(this.model);
     this.hasRelationLookup = hasValue(this.model.relationship);
     if (this.hasRelationLookup) {
 
@@ -246,6 +245,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
 
       this.subs.push(item$.subscribe((item) => this.item = item));
       const value = Object.assign(new MetadataValue(), this.model.value);
+      console.log(value);
       if (hasValue(value) && value.isVirtual) {
         this.relationshipValue$ = this.relationshipService.findById(value.virtualValue)
           .pipe(
@@ -262,34 +262,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
             )
           );
       }
-      // this.reorderable$ =
-      //   item$.pipe(
-      //     switchMap((item) => this.relationService.getItemRelationshipsByLabel(item, this.model.relationship.relationshipType)
-      //       .pipe(
-      //         getAllSucceededRemoteData(),
-      //         getRemoteDataPayload(),
-      //         map((relationshipList: PaginatedList<Relationship>) => relationshipList.page),
-      //         startWith([]),
-      //         switchMap((relationships: Relationship[]) =>
-      //           observableCombineLatest(
-      //             relationships.map((relationship: Relationship) =>
-      //               relationship.leftItem.pipe(
-      //                 getSucceededRemoteData(),
-      //                 getRemoteDataPayload(),
-      //                 map((leftItem: Item) => {
-      //                   return new ReorderableRelationship(relationship, leftItem.uuid !== this.item.uuid)
-      //                 }),
-      //               )
-      //             ))),
-      //         map((relationships: ReorderableRelationship[]) =>
-      //           relationships
-      //             .sort((a: Reorderable, b: Reorderable) => {
-      //               return Math.sign(a.getPlace() - b.getPlace());
-      //             })
-      //         )
-      //       )
-      //     )
-      //   );
 
       this.relationService.getRelatedItemsByLabel(this.item, this.model.relationship.relationshipType).pipe(
         map((items: RemoteData<PaginatedList<Item>>) => items.payload.page.map((item) => Object.assign(new ItemSearchResult(), { indexableObject: item }))),

src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy } from '@angular/core';
 import { AbstractControl, FormControl } from '@angular/forms';
-import { DynamicFormControlEvent } from '@ng-dynamic-forms/core';
+import { DynamicFormArrayGroupModel, DynamicFormControlEvent } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 import { Observable, of as observableOf, Subject, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -47,6 +47,7 @@ export class ReorderableFormFieldMetadataValue extends Reorderable {
     public metadataValue: FormFieldMetadataValueObject,
     public model: DynamicConcatModel,
     public control: FormControl,
+    public group: DynamicFormArrayGroupModel,
     oldIndex?: number,
     newIndex?: number
   ) {

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

@@ -5,7 +5,7 @@ import {
   DynamicFormArrayComponent,
   DynamicFormArrayGroupModel,
   DynamicFormControlCustomEvent,
-  DynamicFormControlEvent,
+  DynamicFormControlEvent, DynamicFormControlEventType,
   DynamicFormLayout,
   DynamicFormLayoutService,
   DynamicFormService,
@@ -131,7 +131,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
                   place: index,
                 });
               }
-              return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, index, index));
+              return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, group, index, index));
             }
           } else {
             formFieldMetadataValue = Object.assign(new FormFieldMetadataValueObject(), {
@@ -139,7 +139,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
               display: '',
               place: index,
             });
-            return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, index, index));
+            return observableOf(new ReorderableFormFieldMetadataValue(formFieldMetadataValue, model as any, control as FormControl, group, index, index));
           }
         });
 
@@ -157,10 +157,19 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
 
           this.reorderables.forEach((reorderable: Reorderable) => {
             if (reorderable.hasMoved) {
-              console.log('reorderable moved', reorderable, reorderable.getPlace());
               reorderable.update().pipe(take(1)).subscribe((v) => {
-                this.change.emit(undefined);
+                if (reorderable instanceof ReorderableFormFieldMetadataValue) {
-                console.log('reorderable updated', reorderable, reorderable.getPlace());
+                  const reoMD = reorderable as ReorderableFormFieldMetadataValue;
+                  const mdl = Object.assign({}, reoMD.model, { value: reoMD.metadataValue });
+                  this.onChange({
+                    $event: undefined,
+                    context: reoMD.group,
+                    control: reoMD.control,
+                    group: this.group,
+                    model: mdl,
+                    type: DynamicFormControlEventType.Change
+                  });
+                }
               });
             }
           })
@@ -174,4 +183,11 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
     this.updateReorderables();
   }
 
+  onChange($event) {
+    console.log($event);
+    const group = Object.assign({}, $event.group, { index: (($event.group.index || 0) - 1 + this.reorderables.length) % this.reorderables.length });
+    const event = Object.assign({}, $event, { context: group });
+    super.onChange(event);
+  }
+
 }

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

@@ -49,13 +49,14 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
   }
 
   get value() {
-    const firstValue = (this.get(0) as DsDynamicInputModel).value as any;
+    const [firstValue, secondValue] = this.group.map((inputModel: DsDynamicInputModel) =>
-    const secondValue = (this.get(1) as DsDynamicInputModel).value as any;
+      (typeof inputModel.value === 'string') ?
-
+        Object.assign(new FormFieldMetadataValueObject(), { value: inputModel.value, display: inputModel.value }) :
-    if (isNotEmpty(firstValue) && isNotEmpty(secondValue)) {
+        (inputModel.value as any));
-      return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value + this.separator + secondValue.value);
+    if (isNotEmpty(firstValue) && isNotEmpty(firstValue.value) && isNotEmpty(secondValue) && isNotEmpty(secondValue.value)) {
-    } else if (isNotEmpty(firstValue)) {
+      return Object.assign(new FormFieldMetadataValueObject(), firstValue, { value: firstValue.value + this.separator + secondValue.value });
-      return Object.assign(new FormFieldMetadataValueObject(), firstValue, firstValue.value);
+    } else if (isNotEmpty(firstValue) && isNotEmpty(firstValue.value)) {
+      return Object.assign(new FormFieldMetadataValueObject(), firstValue);
     } else {
       return null;
     }

src/app/shared/form/form.reducer.ts

@@ -151,6 +151,8 @@ function initForm(state: FormState, action: FormInitAction): FormState {
  *    the new state, with the data changed.
  */
 function changeDataForm(state: FormState, action: FormChangeAction): FormState {
+  console.log("state changed", action);
+
   if (hasValue(state[action.payload.formId])) {
     const newState = Object.assign({}, state);
     newState[action.payload.formId] = Object.assign({}, newState[action.payload.formId], {