show metadata values in input fields

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

@@ -9,7 +9,7 @@
 
     <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 || hasRelationLookup, 'd-none': hasRelationLookup && model.value}">
+    <div [ngClass]="{'form-row': model.hasLanguages || hasRelationLookup, 'd-none': relationshipValue$ | async}">
         <div [ngClass]="getClass('grid', 'control')">
 
             <ng-container #componentViewContainer></ng-container>
@@ -18,7 +18,7 @@
                    class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
 
             <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-                <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate:model.validators }}</small>
+                <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
             </div>
 
         </div>
@@ -49,9 +49,9 @@
 
     <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
 
-    <ng-container *ngIf="hasRelationLookup && model.value && reorderable">
+    <ng-container *ngIf="relationshipValue$ | async">
         <ds-existing-metadata-list-element
-                [reoRel]="reorderable"
+                [reoRel]="relationshipValue$ | async"
                 [submissionItem]="item"
                 [listId]="listId"
                 [metadataFields]="model.metadataFields"

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

@@ -182,8 +182,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @Input() hasErrorMessaging = false;
   @Input() layout = null as DynamicFormLayout;
   @Input() model: any;
-  reorderable$: Observable<ReorderableRelationship>;
+  relationshipValue$: Observable<ReorderableRelationship>;
-  reorderable: ReorderableRelationship;
   hasRelationLookup: boolean;
   modalRef: NgbModalRef;
   item: Item;
@@ -247,7 +246,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
       this.subs.push(item$.subscribe((item) => this.item = item));
       const value = Object.assign(new MetadataValue(), this.model.value);
       if (hasValue(value) && value.isVirtual) {
-        this.reorderable$ = this.relationshipService.findById(value.virtualValue)
+        this.relationshipValue$ = this.relationshipService.findById(value.virtualValue)
           .pipe(
             getAllSucceededRemoteData(),
             getRemoteDataPayload(),
@@ -261,12 +260,6 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
               )
             )
           );
-
-        this.subs.push(this.reorderable$.subscribe((rs) => {
-          this.reorderable = rs;
-          this.ref.detectChanges();
-        }));
-
       }
       // this.reorderable$ =
       //   item$.pipe(

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

@@ -106,7 +106,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
           });
           if (value.isVirtual) {
             console.log('value.virtualValue', value.virtualValue);
-            this.relationshipService.findById(value.virtualValue)
+            return this.relationshipService.findById(value.virtualValue)
               .pipe(
                 tap((relationship: Relationship) => console.log('relationship', relationship)),
                 getSucceededRemoteData(),

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

@@ -70,12 +70,13 @@ export class DynamicConcatModel extends DynamicFormGroupModel {
     } else {
       tempValue = value.value;
     }
-    values = [...tempValue.split(this.separator), null].map((v) => Object.assign(new FormFieldMetadataValueObject(), value, { value: v }));
+    values = [...tempValue.split(this.separator), null].map((v) =>
+      Object.assign(new FormFieldMetadataValueObject(), value, { display: v, value: v }));
 
-    if (values[0]) {
+    if (values[0].value) {
       (this.get(0) as DsDynamicInputModel).valueUpdates.next(values[0]);
     }
-    if (values[1]) {
+    if (values[1].value) {
       (this.get(1) as DsDynamicInputModel).valueUpdates.next(values[1]);
     }
   }

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

@@ -64,4 +64,8 @@ export class FormFieldMetadataValueObject implements MetadataValueInterface {
   hasPlaceholder() {
     return this.hasValue() && this.value === PLACEHOLDER_PARENT_METADATA;
   }
+
+  toString() {
+    return this.display || this.value;
+  }
 }