fix issues with repeatable fields

src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts

@@ -1,11 +1,14 @@
 import { combineLatest as observableCombineLatest, zip as observableZip } from 'rxjs';
 import { Observable } from 'rxjs/internal/Observable';
-import { distinctUntilChanged, flatMap, map, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, flatMap, map, switchMap, tap } from 'rxjs/operators';
 import { PaginatedList } from '../../../../core/data/paginated-list';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { Relationship } from '../../../../core/shared/item-relationships/relationship.model';
 import { Item } from '../../../../core/shared/item.model';
-import { getFinishedRemoteData, getSucceededRemoteData } from '../../../../core/shared/operators';
+import {
+  getFirstSucceededRemoteDataPayload,
+  getSucceededRemoteData
+} from '../../../../core/shared/operators';
 import { hasValue } from '../../../../shared/empty.util';
 
 /**
@@ -75,16 +78,19 @@ export const paginatedRelationsToItems = (thisId: string) =>
       getSucceededRemoteData(),
       switchMap((relationshipsRD: RemoteData<PaginatedList<Relationship>>) => {
         return observableCombineLatest(
-          ...relationshipsRD.payload.page.map((rel: Relationship) => observableCombineLatest(rel.leftItem.pipe(getFinishedRemoteData()), rel.rightItem.pipe(getFinishedRemoteData())))
+          relationshipsRD.payload.page.map((rel: Relationship) =>
-        ).pipe(
+            observableCombineLatest([
+              rel.leftItem.pipe(getFirstSucceededRemoteDataPayload()),
+              rel.rightItem.pipe(getFirstSucceededRemoteDataPayload())]
+            )
+          )).pipe(
           map((arr) =>
             arr
-              .filter(([leftItem, rightItem]) => leftItem.hasSucceeded && rightItem.hasSucceeded)
               .map(([leftItem, rightItem]) => {
-                if (leftItem.payload.id === thisId) {
+                if (leftItem.id === thisId) {
-                  return rightItem.payload;
+                  return rightItem;
-                } else if (rightItem.payload.id === thisId) {
+                } else if (rightItem.id === thisId) {
-                  return leftItem.payload;
+                  return leftItem;
                 }
               })
               .filter((item: Item) => hasValue(item))

src/app/core/cache/builders/remote-data-build.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf, race as observableRace } from 'rxjs';
-import { distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/operators';
 import {
   hasValue,
   hasValueOperator,
@@ -97,7 +97,8 @@ export class RemoteDataBuildService {
         let isSuccessful: boolean;
         let error: RemoteDataError;
         if (hasValue(reqEntry) && hasValue(reqEntry.response)) {
-          isSuccessful = reqEntry.response.isSuccessful;
+          isSuccessful = reqEntry.response.statusCode === 204 ||
+            reqEntry.response.statusCode >= 200 && reqEntry.response.statusCode < 300 && hasValue(payload);
           const errorMessage = isSuccessful === false ? (reqEntry.response as ErrorResponse).errorMessage : undefined;
           if (hasValue(errorMessage)) {
             error = new RemoteDataError(
@@ -140,6 +141,7 @@ export class RemoteDataBuildService {
             );
           }));
       }),
+      startWith([]),
       distinctUntilChanged(),
     );
     const pageInfo$ = requestEntry$.pipe(
@@ -156,7 +158,7 @@ export class RemoteDataBuildService {
       })
     );
 
-    const payload$ = observableCombineLatest(tDomainList$, pageInfo$).pipe(
+    const payload$ = observableCombineLatest([tDomainList$, pageInfo$]).pipe(
       map(([tDomainList, pageInfo]) => {
         return new PaginatedList(pageInfo, tDomainList);
       })

src/app/core/data/relationship.service.ts

@@ -32,7 +32,7 @@ import { Relationship } from '../shared/item-relationships/relationship.model';
 import { RELATIONSHIP } from '../shared/item-relationships/relationship.resource-type';
 import { Item } from '../shared/item.model';
 import {
-  configureRequest,
+  configureRequest, getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload,
   getResponseFromEntry,
   getSucceededRemoteData
@@ -323,8 +323,7 @@ export class RelationshipService extends DataService<Relationship> {
 
   private isItemMatchWithItemRD(itemRD$: Observable<RemoteData<Item>>, itemCheck: Item): Observable<boolean> {
     return itemRD$.pipe(
-      getSucceededRemoteData(),
+      getFirstSucceededRemoteDataPayload(),
-      map((itemRD: RemoteData<Item>) => itemRD.payload),
       map((item: Item) => item.uuid === itemCheck.uuid)
     );
   }
@@ -378,6 +377,7 @@ export class RelationshipService extends DataService<Relationship> {
     let count = 0
     const update$: Observable<RemoteData<Relationship>> = this.getRelationshipByItemsAndLabel(item1, item2, relationshipLabel)
       .pipe(
+        filter((relation: Relationship) => hasValue(relation)),
         switchMap((relation: Relationship) =>
           relation.relationshipType.pipe(
             getSucceededRemoteData(),

src/app/core/shared/operators.ts

@@ -1,6 +1,6 @@
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import { filter, find, flatMap, map, tap } from 'rxjs/operators';
+import { filter, find, flatMap, map, take, tap } from 'rxjs/operators';
 import { hasValue, hasValueOperator, isNotEmpty } from '../../shared/empty.util';
 import { SearchResult } from '../../shared/search/search-result.model';
 import { DSOSuccessResponse, RestResponse } from '../cache/response.models';
@@ -65,7 +65,7 @@ export const getPaginatedListPayload = () =>
 
 export const getSucceededRemoteData = () =>
   <T>(source: Observable<RemoteData<T>>): Observable<RemoteData<T>> =>
-    source.pipe(find((rd: RemoteData<T>) => rd.hasSucceeded));
+    source.pipe(filter((rd: RemoteData<T>) => rd.hasSucceeded), take(1));
 
 /**
  * Get the first successful remotely retrieved object

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

@@ -7,10 +7,10 @@
            [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
     <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: 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': relationshipValue$ | async}">
+    <div [ngClass]="{'form-row': model.hasLanguages || isRelationship, 'd-none': value?.isVirtual}">
         <div [ngClass]="getClass('grid', 'control')">
             <ng-container #componentViewContainer></ng-container>
-            <small *ngIf="hasHint && (!showErrorMessages || errorMessages.length === 0)"
+            <small *ngIf="hasHint && context?.index === 0 && (!showErrorMessages || errorMessages.length === 0)"
                    class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
 
             <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">

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

@@ -33,7 +33,7 @@ import {
   DynamicDatePickerModel, DynamicFormComponentService,
   DynamicFormControl,
   DynamicFormControlContainerComponent,
-  DynamicFormControlEvent,
+  DynamicFormControlEvent, DynamicFormControlEventType,
   DynamicFormControlModel,
   DynamicFormLayout,
   DynamicFormLayoutService, DynamicFormRelationService,
@@ -60,7 +60,7 @@ import { DYNAMIC_FORM_CONTROL_TYPE_DSDATEPICKER } from './models/date-picker/dat
 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 { hasNoValue, hasValue, isNotEmpty, isNotUndefined } from '../../../empty.util';
+import { hasNoValue, hasValue, isEmpty, isNotEmpty, isNotUndefined } from '../../../empty.util';
 import { DYNAMIC_FORM_CONTROL_TYPE_LOOKUP_NAME } from './models/lookup/dynamic-lookup-name.model';
 import { DsDynamicTagComponent } from './models/tag/dynamic-tag.component';
 import { DsDatePickerComponent } from './models/date-picker/date-picker.component';
@@ -73,7 +73,7 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model';
 import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
-import { map, startWith, switchMap, find, take } from 'rxjs/operators';
+import { map, startWith, switchMap, find, take, tap } from 'rxjs/operators';
 import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
 import { SearchResult } from '../../../search/search-result.model';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
@@ -246,7 +246,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
           .pipe(
             getAllSucceededRemoteData(),
             getRemoteDataPayload());
-        this.relationshipValue$ = observableCombineLatest(this.item$.pipe(take(1)), relationship$).pipe(
+        this.relationshipValue$ = observableCombineLatest([this.item$.pipe(take(1)), relationship$]).pipe(
           switchMap(([item, relationship]: [Item, Relationship]) =>
             relationship.leftItem.pipe(
               getSucceededRemoteData(),
@@ -278,7 +278,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes) {
+    if (changes && !this.isRelationship) {
       super.ngOnChanges(changes);
       if (this.model && this.model.placeholder) {
         this.model.placeholder = this.translateService.instant(this.model.placeholder);
@@ -322,7 +322,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
    * Open a modal where the user can select relationships to be added to item being submitted
    */
   openLookup() {
-
     this.modalRef = this.modalService.open(DsDynamicLookupRelationModalComponent, {
       size: 'lg'
     });
@@ -330,11 +329,14 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
 
     modalComp.query = this.model.value ? this.model.value.value : '';
     if (hasValue(this.model.value)) {
-      // this.model.reset();
+      this.model.value = '';
-      // this.model.value = undefined;
+      this.onChange({
-      // this.model.valueUpdates(undefined);
+        $event: { previousIndex: 0 },
-      this.model.value.value = undefined;
+        context: { index: 0 },
-      this.change.emit();
+        control: this.control,
+        model: this.model,
+        type: DynamicFormControlEventType.Change
+      });
     }
     this.submissionService.dispatchSave(this.model.submissionId);
 
@@ -368,5 +370,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
 
     this.subs.push(this.item$.subscribe((item) => this.item = item));
     this.subs.push(collection$.subscribe((collection) => this.collection = collection));
+
   }
 }

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

@@ -1,10 +1,10 @@
 <div class="d-flex">
     <span class="mr-auto text-contents">
-        <ng-container *ngIf="!metadataRepresentation">
+        <ng-container *ngIf="!(metadataRepresentation$ | async)">
             <ds-loading [showMessage]="false"></ds-loading>
         </ng-container>
-        <ng-container *ngIf="metadataRepresentation">
+        <ng-container *ngIf="(metadataRepresentation$ | async)">
-            <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader>
+            <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation$ | async"></ds-metadata-representation-loader>
         </ng-container>
     </span>
     <button type="button" class="btn btn-secondary"

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

@@ -1,8 +1,8 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl } from '@angular/forms';
 import { DynamicFormArrayGroupModel, DynamicFormControlEvent } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
-import { Observable, of as observableOf, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
 import { filter, switchMap } from 'rxjs/operators';
 import { AppState } from '../../../../../app.reducer';
 import { RelationshipService } from '../../../../../core/data/relationship.service';
@@ -140,7 +140,7 @@ export class ExistingMetadataListElementComponent implements OnChanges, OnDestro
   @Input() metadataFields: string[];
   @Input() relationshipOptions: RelationshipOptions;
   @Input() submissionId: string;
-  metadataRepresentation: MetadataRepresentation;
+  metadataRepresentation$: BehaviorSubject<MetadataRepresentation>;
   relatedItem: Item;
 
   /**
@@ -167,10 +167,15 @@ export class ExistingMetadataListElementComponent implements OnChanges, OnDestro
         const relationMD: MetadataValue = this.submissionItem.firstMetadata(this.relationshipOptions.metadataField, { value: this.relatedItem.uuid });
         if (hasValue(relationMD)) {
           const metadataRepresentationMD: MetadataValue = this.submissionItem.firstMetadata(this.metadataFields, { authority: relationMD.authority });
-          this.metadataRepresentation = Object.assign(
+          const nextValue = Object.assign(
             new ItemMetadataRepresentation(metadataRepresentationMD),
             this.relatedItem
-          )
+          );
+          if (hasValue(this.metadataRepresentation$)) {
+            this.metadataRepresentation$.next(nextValue);
+          } else {
+            this.metadataRepresentation$ = new BehaviorSubject<MetadataRepresentation>(nextValue);
+          }
         }
       }));
     }

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

@@ -35,8 +35,8 @@
                                        [model]="_model"
                                        [templates]="templates"
                                        [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
-                                       (dfBlur)="updateReorderables()"
+                                       (dfBlur)="update(idx)"
-                                       (dfChange)="updateReorderables()"
+                                       (dfChange)="update(idx)"
                                        (dfFocus)="onFocus($event)"
                                        (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
 </ng-template>

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

@@ -1,5 +1,9 @@
 @import './../../../../../../../styles/variables';
 
+:host {
+  display: block;
+}
+
 .cdk-drag {
     margin-left: -(2 * $spacer);
     margin-right: -(0.5 * $spacer);

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

@@ -9,7 +9,7 @@ import {
   Output,
   QueryList
 } from '@angular/core';
-import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
 import {
   DynamicFormArrayComponent,
   DynamicFormArrayGroupModel,
@@ -22,7 +22,7 @@ import {
   DynamicTemplateDirective
 } from '@ng-dynamic-forms/core';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs';
-import { filter, map, switchMap, take } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { RelationshipService } from '../../../../../../core/data/relationship.service';
 import { RemoteData } from '../../../../../../core/data/remote-data';
 import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
@@ -34,7 +34,7 @@ import {
 } from '../../../../../../core/shared/operators';
 import { SubmissionObject } from '../../../../../../core/submission/models/submission-object.model';
 import { SubmissionObjectDataService } from '../../../../../../core/submission/submission-object-data.service';
-import { hasNoValue, hasValue, isEmpty, isNotEmpty, isNull } from '../../../../../empty.util';
+import { hasValue } from '../../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import {
   Reorderable,
@@ -43,11 +43,7 @@ import {
 } from '../../existing-metadata-list-element/existing-metadata-list-element.component';
 import { DynamicConcatModel } from '../ds-dynamic-concat.model';
 import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
-import { SaveSubmissionSectionFormSuccessAction } from '../../../../../../submission/objects/submission-objects.actions';
 import { Store } from '@ngrx/store';
-import { SubmissionState } from '../../../../../../submission/submission.reducers';
-import { ObjectCacheService } from '../../../../../../core/cache/object-cache.service';
-import { RequestService } from '../../../../../../core/data/request.service';
 import { SubmissionService } from '../../../../../../submission/submission.service';
 import { AppState } from '../../../../../../app.reducer';
 import { followLink } from '../../../../../utils/follow-link-config.model';
@@ -115,7 +111,10 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
         .filter(([group, control], index) => index > 0 && hasValue((group.group[0] as any).value)) // disregard the first group, it is always empty to ensure the first field remains empty
         .map(([group, control]: [DynamicFormArrayGroupModel, AbstractControl], index: number) => {
           const model = group.group[0] as DynamicConcatModel;
+          // console.log('model.id', model.id);
+          // console.log('model.value', model.value);
           let formFieldMetadataValue: FormFieldMetadataValueObject = model.value as FormFieldMetadataValueObject;
+          // console.log('formFieldMetadataValue', formFieldMetadataValue);
           if (hasValue(formFieldMetadataValue)) {
             const metadataValue = Object.assign(new MetadataValue(), {
               value: formFieldMetadataValue.display,
@@ -192,13 +191,14 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
                   hasMetadataField = true;
                   updatedReorderable.subscribe((v) => {
                     const reoMD = reorderable as ReorderableFormFieldMetadataValue;
-                    const mdl = Object.assign({}, reoMD.model, { value: reoMD.metadataValue });
+                    reoMD.model.value = reoMD.metadataValue;
+                    console.log('reoMD', reoMD);
                     this.onChange({
                       $event: { previousIndex: prevIndex },
                       context: { index },
                       control: reoMD.control,
                       group: this.group,
-                      model: mdl,
+                      model: reoMD.model,
                       type: DynamicFormControlEventType.Change
                     });
                   });
@@ -225,4 +225,10 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent imple
     this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex);
     this.updateReorderables();
   }
+
+  update(index: number) {
+    if (index > 0) {
+      this.updateReorderables();
+    }
+  }
 }

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

@@ -14,6 +14,7 @@ export const CONCAT_SECOND_INPUT_SUFFIX = '_CONCAT_SECOND_INPUT';
 export interface DynamicConcatModelConfig extends DynamicFormGroupModelConfig {
   separator: string;
   value?: any;
+  hint?: string;
   relationship?: RelationshipOptions;
   repeatable: boolean;
   required: boolean;
@@ -28,6 +29,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
   @serializable() relationship?: RelationshipOptions;
   @serializable() repeatable?: boolean;
   @serializable() required?: boolean;
+  @serializable() hint?: string;
   @serializable() metadataFields: string[];
   @serializable() submissionId: string;
 
@@ -41,6 +43,7 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     this.relationship = config.relationship;
     this.repeatable = config.repeatable;
     this.required = config.required;
+    this.hint = config.hint;
     this.metadataFields = config.metadataFields;
     this.submissionId = config.submissionId;
     this.valueUpdates = new Subject<string>();

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

@@ -1,8 +1,7 @@
 <div #sdRef="ngbDropdown" ngbDropdown class="input-group w-100">
-  <input class="form-control"
+  <input #inputElement class="form-control"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
-         [dynamicId]="bindId && model.id"
          [name]="model.name"
          [readonly]="model.readOnly"
          [type]="model.inputType"
@@ -11,9 +10,8 @@
          (click)="$event.stopPropagation(); openDropdown(sdRef);"
          (focus)="onFocus($event)"
          (keypress)="$event.preventDefault()">
-    <button aria-describedby="collectionControlsMenuLabel"
+    <button #buttonElement aria-describedby="collectionControlsMenuLabel"
             class="ds-form-input-btn  btn btn-outline-primary"
-            id="scrollableDropdownMenuButton_{{model.id}}"
             ngbDropdownToggle
             [disabled]="model.readOnly"
             (click)="onToggle(sdRef); $event.stopPropagation();"></button>

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

@@ -48,6 +48,7 @@ export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComp
   }
 
   ngOnInit() {
+    // console.log('ngOnInit', this.model, this.model.value);
     this.searchOptions = new IntegrationSearchOptions(
       this.model.authorityOptions.scope,
       this.model.authorityOptions.name,
@@ -65,6 +66,7 @@ export class DsDynamicScrollableDropdownComponent extends DynamicFormControlComp
       }),
       first())
       .subscribe((object: IntegrationData) => {
+        // console.log('ngOnInit subscribe', object, this.model, this.model.value);
         this.optionsList = object.payload;
         if (this.model.value) {
           this.setCurrentValue(this.model.value);

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/relationship.effects.ts

@@ -163,13 +163,10 @@ export class RelationshipEffects {
     this.relationshipService.getRelationshipByItemsAndLabel(item1, item2, relationshipType).pipe(
       take(1),
       hasValueOperator(),
-      tap((v) => console.log('before delete', v)),
       mergeMap((relationship: Relationship) => this.relationshipService.deleteRelationship(relationship.id, 'none')),
       take(1),
-      tap((v) => console.log('before refresh', v)),
       switchMap(() => this.refreshWorkspaceItemInCache(submissionId)),
     ).subscribe((submissionObject: SubmissionObject) => {
-      console.log('in subscribe', submissionObject);
       this.store.dispatch(new SaveSubmissionSectionFormSuccessAction(submissionId, [submissionObject], false))
     });
   }

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

@@ -13,7 +13,7 @@ import {
   DynamicConcatModel,
   DynamicConcatModelConfig
 } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model';
-import { isNotEmpty } from '../../../empty.util';
+import { hasNoValue, hasValue, isNotEmpty } from '../../../empty.util';
 import { ParserOptions } from './parser-options';
 import {
   CONFIG_DATA,
@@ -53,14 +53,18 @@ export class ConcatFieldParser extends FieldParser {
     };
 
     const groupId = id.replace(/\./g, '_') + CONCAT_GROUP_SUFFIX;
-    const concatGroup: DynamicConcatModelConfig = this.initModel(groupId, label, false);
+    const concatGroup: DynamicConcatModelConfig = this.initModel(groupId, label, false, true);
 
     concatGroup.group = [];
     concatGroup.separator = this.separator;
 
     const input1ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_FIRST_INPUT_SUFFIX, false, false);
     const input2ModelConfig: DynamicInputModelConfig = this.initModel(id + CONCAT_SECOND_INPUT_SUFFIX, false, false);
-    input2ModelConfig.hint = ' ';
+
+    if (hasNoValue(concatGroup.hint) && hasValue(input1ModelConfig.hint) && hasNoValue(input2ModelConfig.hint)) {
+      concatGroup.hint = input1ModelConfig.hint;
+      input1ModelConfig.hint = undefined;
+    }
 
     if (this.configData.mandatory) {
       concatGroup.required = true;

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

@@ -78,12 +78,7 @@ export abstract class FieldParser {
               }
             }
             model = this.modelFactory(fieldValue, false);
-            if (!isFirstModelInArray) {
+            model.id = `${model.id}_${fieldArrayCounter}`;
-              model.hint = undefined;
-              if (Array.isArray(model.group)) {
-                model.group.forEach((group) => group.hint = undefined);
-              }
-            }
           }
           setLayout(model, 'element', 'host', 'col');
           if (model.hasLanguages || isNotEmpty(model.relationship)) {

src/app/shared/form/form.component.ts

@@ -23,6 +23,9 @@ import { Observable, Subscription } from 'rxjs';
 import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
 import { FormService } from './form.service';
 import { FormEntry, FormError } from './form.reducer';
+import { FormFieldMetadataValueObject } from "./builder/models/form-field-metadata-value.model";
+import { AuthorityValue } from "../../core/integration/models/authority.value";
+import { DsDynamicInputModel } from "./builder/ds-dynamic-form-ui/models/ds-dynamic-input.model";
 
 /**
  * The default form component.
@@ -301,14 +304,33 @@ export class FormComponent implements OnDestroy, OnInit {
 
   insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
     const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
+
+    // First emit the new value so it can be sent to the server
+    const value = formArrayControl.controls[0].value;
+    const event = this.getEvent($event, arrayContext, 0, 'add');
+    this.addArrayItem.emit(event);
+    this.change.emit(event);
+
+    // Next: update the UI so the user sees the changes
+    // without having to wait for the server's reply
+
+    // add an empty new field at the bottom
     this.formBuilderService.addFormArrayGroup(formArrayControl, arrayContext);
-    this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
 
-    const value = formArrayControl.controls[index].value;
+    // set that field to the new value
-    formArrayControl.controls[formArrayControl.length - 1].setValue(value);
+    const model = arrayContext.groups[arrayContext.groups.length - 1].group[0] as any;
+    if (model.type === 'SCROLLABLE_DROPDOWN') {
+      model.value = Object.values(value)[0];
+    } else {
+      formArrayControl.controls[formArrayControl.length - 1].setValue(value);
+    }
 
-    this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
+    // Clear the topmost field by removing the filled out version and inserting a new, empty version.
-    this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
+    // Doing it this way ensures an empty value of the correct type is added without a bunch of ifs here
+    this.formBuilderService.removeFormArrayGroup(0, formArrayControl, arrayContext);
+    this.formBuilderService.insertFormArrayGroup(0, formArrayControl, arrayContext);
+
+    // Tell the formService that it should rerender.
     this.formService.changeForm(this.formId, this.formModel);
   }
 

src/app/submission/edit/submission-edit.component.ts

@@ -94,7 +94,7 @@ export class SubmissionEditComponent implements OnDestroy, OnInit {
         } else {
           this.submissionId = submissionObjectRD.payload.id.toString();
           this.collectionId = (submissionObjectRD.payload.collection as Collection).id;
-          this.selfUrl = submissionObjectRD.payload.self;
+          this.selfUrl = submissionObjectRD.payload._links.self.href;
           this.sections = submissionObjectRD.payload.sections;
           this.submissionDefinition = (submissionObjectRD.payload.submissionDefinition as SubmissionDefinitionsModel);
           this.changeDetectorRef.detectChanges();

src/app/submission/objects/submission-objects.effects.ts

@@ -334,7 +334,6 @@ export class SubmissionObjectEffects {
           if (notify && !currentState.sections[sectionId].enabled) {
             this.submissionService.notifyNewSection(submissionId, sectionId, currentState.sections[sectionId].sectionType);
           }
-          console.log(submissionId, sectionId, sectionData, sectionErrors);
           mappedActions.push(new UpdateSectionDataAction(submissionId, sectionId, sectionData, sectionErrors));
         }
       });

src/app/submission/sections/form/section-form-operations.service.ts

@@ -69,6 +69,9 @@ export class SectionFormOperationsService {
       case 'change':
         this.dispatchOperationsFromChangeEvent(pathCombiner, event, previousValue, hasStoredValue);
         break;
+      case 'add':
+        this.dispatchOperationsFromAddEvent(pathCombiner, event);
+        break;
       default:
         break;
     }
@@ -294,6 +297,41 @@ export class SectionFormOperationsService {
     }
   }
 
+  /**
+   * Handle form add operations
+   *
+   * @param pathCombiner
+   *    the [[JsonPatchOperationPathCombiner]] object for the specified operation
+   * @param event
+   *    the [[DynamicFormControlEvent]] for the specified operation
+   */
+  protected dispatchOperationsFromAddEvent(pathCombiner: JsonPatchOperationPathCombiner,
+                                              event: DynamicFormControlEvent
+                                              ): void {
+    const path = this.getFieldPathSegmentedFromChangeEvent(event);
+    const value = this.getFieldValueFromChangeEvent(event);
+    if (isNotEmpty(value)) {
+      value.place = this.getArrayIndexFromEvent(event);
+      if (hasValue(event.group) && hasValue(event.group.value)) {
+        const valuesInGroup = event.group.value
+          .map((g) => Object.values(g))
+          .reduce((accumulator, currentValue) => accumulator.concat(currentValue))
+          .filter((v) => isNotEmpty(v));
+        if (valuesInGroup.length === 1) {
+          // The first add for a field needs to be a different PATCH operation
+          // for some reason
+          this.operationsBuilder.add(
+            pathCombiner.getPath([path]),
+            [value], false);
+        } else {
+          this.operationsBuilder.add(
+            pathCombiner.getPath([path, '-']),
+            value, false);
+        }
+      }
+    }
+  }
+
   /**
    * Handle form change operations
    *