Adding, deleting, tweaskin & freakin

src/app/dynaform/dynaform.component.html

@@ -49,13 +49,18 @@
 				</div>
 				<div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
 					<div *ngIf="meta.showDeleteControl" class="text-right">
-						<a [ngClass]="{ 'btn-disabled': !deleteRCMemberAllowed(meta.name) }" (click)="deleteRCMember(meta.name, i)"><i class="fa fa-trash"></i></a>
+						<a	[ngClass]="{ 'btn-disabled': !deleteRCMemberAllowed(meta.name) }"
+							(click)="deleteRCMember(meta.name, i)">
+							<i class="fa fa-trash"></i>
+						</a>
 					</div>
 					<ng-container *ngTemplateOutlet="dynaform; context: getRCTemplateContext(meta.name, i)"></ng-container>
 				</div>
 				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="row">
 					<div class="col-sm-12 text-right">
-						<a class="btn btn-sm btn-outline-success" [ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }" (click)="addRCMember(meta.name)">
+						<a	class="btn btn-sm btn-outline-success"
+							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
+							(click)="addRCMember(meta.name)">
 							+ Add New
 						</a>
 					</div>
@@ -78,10 +83,10 @@
 
 
 <ng-template let-control="control" let-meta="meta" #dynaform>
-	<div *ngIf="meta.label" class="row">
-		<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+	<div [ngClass]="meta.class">
+		<h3 *ngIf="meta.label" class="h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" [ngClass]="{ 'dyna-hidden': !meta.focussed }" (call)="handleCallback($event)"></app-dynaform>
 	</div>
-	<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" [ngClass]="{ 'dyna-hidden': !meta.focussed }" (call)="handleCallback($event)"></app-dynaform>
 </ng-template>
 
 

src/app/dynaform/dynaform.component.ts

@@ -182,6 +182,7 @@ export class DynaformComponent implements OnInit {
 		
 	}
 
+	// RC = Repeating Container
 	addRCMemberAllowed(repeatingContainerName: string): boolean {
 		const rcMeta = this.formMetaData[repeatingContainerName];
 		return typeof rcMeta.maxRepeat === 'number' && rcMeta.maxRepeat > rcMeta.meta.length;
@@ -189,7 +190,7 @@ export class DynaformComponent implements OnInit {
 
 	// Maybe move the next two funtions to _formdata-utils.ts ?
 	addRCMember(repeatingContainerName: string): void {
-		// (1) Check that we vcan still add controls
+		// (1) Check that we can still add controls
 		if (!this.addRCMemberAllowed(repeatingContainerName)) {
 			return;
 		}
@@ -217,7 +218,7 @@ export class DynaformComponent implements OnInit {
 		}
 		// (2) Delete from the metadata, and rename the groups
 		const rcMeta = this.formMetaData[repeatingContainerName];
-		const metaArr = [ ...rcMeta.meta ];
+		const metaArr = rcMeta.meta;
 		const newMetaArr = [ ...metaArr.slice(0, index), ...metaArr.slice(index + 1) ]
 			.map((m, i) => { m.name = `group${i+1}`; return m; });
 		rcMeta.meta = newMetaArr;