Improvemnets to Repesating Container GHroups when the display mode = 'SINGLE' (display focussed member only)

src/app/_mock/testfields.v14.ts

@@ -25,7 +25,7 @@ const meta = {
 		initialRepeat: 3,
 		showAddControl: true,
 		showDeleteControl: true,
-		display: 'ALL', // ALL or SINGLE,
+		display: 'SINGLE', // ALL or SINGLE,
 		primaryField: 'a',
 		meta: [
 			{

src/app/app.component.html

@@ -7,6 +7,7 @@
 			Load different tests by appending a query param to the URL <b>?test=N</b> (where N is a number between 1 and 12).<br>
 			NOTE: Model set to update on change, but this can be set to blur or submit for less re-rendering.
 			</p>
+			<br>
 		</div>
 	</div>
 	<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" (call)="handleCallback($event)" debug="1"></app-dynaform>

src/app/dynaform/dynaform.component.html

@@ -20,27 +20,29 @@
 
 		<ng-template #recursiveDynaform>
 			<ng-container *ngIf="isRepeatingContainer(meta); else container">
-				<div *ngIf="meta.display === 'SINGLE'" class="row dyna-repeating-container-selector">
-					<div class="clr-col-sm-4 text-right">
+				<div *ngIf="meta.display === 'SINGLE'" class="clr-row dyna-rc-selector">
+					<div class="clr-col-sm-2 text-right dyna-rc-focus-block">
 						<b>FOCUS &gt;</b>
 					</div>
-					<div class="clr-col-sm-8">
-						<a *ngFor="let container of meta.meta; let i = index"
-							class="btn btn-sm"
+					<div class="clr-col-sm-10">
+						<button *ngFor="let container of meta.meta; let i = index"
+							class="btn btn-sm dyna-rc-btn-focus"
 							[ngClass]="container.focussed ? 'btn-primary' : ''"
 							(click)="focusContainer(meta.name, i)">
 							{{ getRCLabel(meta.name, i) }}
-						</a>
-						<a *ngIf="meta.showAddControl"
-							class="btn btn-sm btn-success"
-							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
+						</button>
+						<button *ngIf="meta.showAddControl"
+							class="btn btn-sm btn-success dyna-rc-btn-add"
+							[disabled]="!addRCMemberAllowed(meta.name)"
 							(click)="addRCMember(meta.name)">
-							+ Add New
-						</a>
+							<clr-icon shape="plus"></clr-icon> Add New
+						</button>
 					</div>
 				</div>
 				<div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
-					<button *ngIf="meta.showDeleteControl" class="btn btn-sm btn-icon btn-outline-danger dyna-rc-btn-delete"
+					<button *ngIf="meta.showDeleteControl"
+						class="btn btn-sm btn-icon btn-outline-danger dyna-rc-btn-delete"
+						[ngClass]="{ 'dyna-hidden': !meta.meta[i].focussed }"
 						[disabled]="!deleteRCMemberAllowed(meta.name)"
 						(click)="deleteRCMember(meta.name, i)">
 						<clr-icon shape="trash"></clr-icon>
@@ -49,7 +51,8 @@
 				</div>
 				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
 					<div class="clr-col-sm-12">
-						<button class="btn btn-sm btn-success dyna-rc-btn-add"
+						<button
+							class="btn btn-sm btn-success dyna-rc-btn-add"
 							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
 							(click)="addRCMember(meta.name)">
 							<clr-icon shape="plus"></clr-icon> Add New
@@ -70,7 +73,7 @@
 	</ng-container>
 </ng-template>
 
-
+<!-- The DYNAFORM template -->
 <ng-template let-control="control" let-meta="meta" #dynaform>
 	<div [ngClass]="getRowClass(control, meta)">
 		<h3 *ngIf="meta.label" class="h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
@@ -87,7 +90,7 @@
 	}"
 	class="alert __debug"
 	role="alert">
-		<div class="alert-items">
-			<pre class="alert-text" style="border: none;">{{ formGroup.pristine ? 'Untouched' : getValidationErrors() | json }}</pre>
-		</div>
+	<div class="alert-items">
+		<pre class="alert-text" style="border: none;">{{ formGroup.pristine ? 'Untouched' : getValidationErrors() | json }}</pre>
+	</div>
 </div>

src/app/dynaform/dynaform.component.ts

@@ -181,11 +181,9 @@ export class DynaformComponent implements OnInit, OnChanges {
 	}
 
 	focusContainer(repeatingContainerName: string, index: number): void {
-		// Show a particular container of a Repeating Container group (used when only one is shown at a time i.e display = 'SINGLE')
+		// Show a particular member of a Repeating Container Group (used when only one is shown at a time i.e display = 'SINGLE')
 		const rcMeta = this.formMetaData[repeatingContainerName];
-		const rcFormArray = this.formGroup.get(repeatingContainerName) as FormArray;
 		rcMeta.meta = rcMeta.meta.map( (container, i) => ({ ...container, focussed: i === index }) );
-
 	}
 
 	// RC = Repeating Container
@@ -210,6 +208,10 @@ export class DynaformComponent implements OnInit, OnChanges {
 		const buildFormGroup = buildFormGroupFunctionFactory(new FormBuilder());
 		const newFormGroup = buildFormGroup(containerTemplate.meta);
 		(this.formGroup.get(repeatingContainerName) as FormArray).push(newFormGroup);
+		// (4) Focus new container member if display = 'SINGLE' (i.e. we're only showing one at once)
+		if (rcMeta.display === 'SINGLE') {
+			this.focusContainer(repeatingContainerName, i);
+		}
 	}
 
 	deleteRCMemberAllowed(repeatingContainerName: string): boolean {
@@ -217,6 +219,7 @@ export class DynaformComponent implements OnInit, OnChanges {
 		return typeof rcMeta.minRepeat === 'number' && rcMeta.minRepeat < rcMeta.meta.length;
 	}
 
+	// Maybe move the AddRC and deleteRC funtions to _formdata-utils.ts ?
 	deleteRCMember(repeatingContainerName: string, index: number): void {
 		// (1) Check that we can still delete controls
 		if (!this.deleteRCMemberAllowed(repeatingContainerName)) {
@@ -230,6 +233,11 @@ export class DynaformComponent implements OnInit, OnChanges {
 		rcMeta.meta = newMetaArr;
 		// (3) Delete the corresponding FormGroup from the FormArray
 		(this.formGroup.get(repeatingContainerName) as FormArray).removeAt(index);
+		// (4) Focus the last if display = 'SINGLE' (i.e. we're only showing one at once)
+		if (rcMeta.display === 'SINGLE') {
+			this.focusContainer(repeatingContainerName, newMetaArr.length - 1);
+		}
+
 	}
 
 	getValidationFailureMessage(control: FormControl, meta: StringMap<any>) {

src/styles.scss

@@ -189,13 +189,15 @@ input, textarea, select {
 // ---------------------------------------------------------------------------------------------------------------------
 // Repeating Comtainers (series of buttons alowwing user to focus a repeating container member)
 
-.dyna-repeating-container-selector {
+// dyna-rc = Dynaform Repeating Container
+
+.dyna-rc-selector {
 	margin-bottom: 5px; 
-	a.btn {
-		margin-right: 4px;
+	.dyna-rc-focus-block {
+		background-color: $col-blue-lightest;
 	}
-	.btn-primary {
-		color: white !important;
+	.btn {
+		margin-right: 4px;
 	}
 }
 
@@ -203,7 +205,6 @@ input, textarea, select {
 	border-bottom: 4px #CCC solid;
 	padding-bottom: 1rem;
 	&:first-child {
-		margin-top: 1rem;
 		border-top: 4px #CCC solid;
 		> button {
 			margin-top: 1rem;