Improving layout in Repeacting Contailer display 'ALL' mode

src/app/_mock/testfields.v12.ts

@@ -27,6 +27,8 @@ const meta = {
 		initialRepeat: 3,
 		showAddControl: true,
 		showDeleteControl: true,
+		display: 'ALL', // ALL or SINGLE,
+		primaryField: 'a',
 		meta: [
 			{
 				a: {},

src/app/dynaform/dynaform.component.html

@@ -37,7 +37,7 @@
 						</a>
 					</div>
 				</div>
-				<div *ngFor="let container of meta.meta; let i = index">
+				<div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
 					<ng-container *ngTemplateOutlet="dynaform; context: getRCTemplateContext(meta.name, i)"></ng-container>
 				</div>
 			</ng-container>

src/app/dynaform/dynaform.component.ts

@@ -165,7 +165,7 @@ export class DynaformComponent implements OnInit {
 			// The primaryField has been specified, so return its value
 			const repeatingContainerFormArray = this.formGroup.get(repeatingContainerName) as FormArray;
 			const formGroup = repeatingContainerFormArray.at(index);
-			return formGroup.get(primaryField).value;
+			return formGroup.get(primaryField).value || '…';
 		} else {
 			// Otherwise return the 'button' of the container (in the array of containers)
 			return rcMeta.meta[index].button;

src/styles.scss

@@ -98,6 +98,7 @@ div.col-sm-8 {
 // Repeating Comtainers (series of buttons alowwing user to focus a repeating container member)
 
 .dyna-repeating-container-selector {
+	margin-bottom: 5px; 
 	a.btn {
 		margin-right: 4px;
 	}
@@ -106,6 +107,15 @@ div.col-sm-8 {
 	}
 }
 
+.dyna-rc-container.dyna-rc-display-all {
+	margin-bottom: 7px;
+	border-bottom: 4px #CCC solid;
+	&:last-child {
+		margin-bottom: unset;
+		border-bottom: unset;
+	}
+}
+
 .dyna-hidden {
 	display: none;
 }