Adding option for 'Select All' and 'Select None' to Checkbutton Group

src/app/_mock/testfields.v2.ts

@@ -110,8 +110,12 @@ const checkbuttonGroup = {
 
 const checkbuttonGroupArray = {
 	type: 'CheckbuttonGroup',
-	firstEnablesRest: true,
-	meta: [{name: 'One', value: 111}, {name: 'Two', value: 222}, {name: 'Three', value: 333}]
+	firstEnablesRest: false,
+	showAllOrNone: true,
+	meta: [
+		{name: 'One', value: 111}, {name: 'Two', value: 222}, {name: 'Three', value: 333}, {name: 'Four', value: 444},
+		{name: 'Five', value: 555}, {name: 'Six', value: 666}, {name: 'Seven', value: 777}, {name: 'Eight', value: 888}
+	]
 };
 
 // ---------------------------------------------------------------------------------------------------------------------

src/app/_mock/testfields.v8.ts

@@ -9,7 +9,7 @@ const model = {
 // But when to render as a FormArray and when as a FormGroup?
 const meta = {
 	standardField: { type: 'textarea' },
-	cbFormArray: { type: 'CheckbuttonGroup' }
+	cbFormArray: { type: 'CheckbuttonGroup', showAllOrNone: 1 }
 };
 
 export { model, meta };

src/app/dynaform/components/_abstract/group-input.component.ts

@@ -1,16 +1,16 @@
 import { Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, FormArray } from '@angular/forms';
 
 export abstract class GroupInputComponent implements OnInit {
 
 	@Input()
-	control: FormGroup;
+	control: FormGroup | FormArray;
 
 	@Input()
 	meta;
 
 	formGroup: FormGroup;
-	childMeta: Array<StringMap>;
+	childMetaArray: Array<StringMap>;
 	controlNames: Array<string>;
 
 	exposeMetaInTemplate: string[] = [];
@@ -19,7 +19,7 @@ export abstract class GroupInputComponent implements OnInit {
 		// Move meta variables up a level, for direct access in templates
 		this.exposeMetaInTemplate.map(p => this[p] = this.meta[p] !== undefined ? this.meta[p] : this[p]);
 		this.formGroup = this.control as FormGroup;
-		this.childMeta = Object.values(this.meta.meta); // Metadata array of all controls in group
+		this.childMetaArray = Object.values(this.meta.meta); // Metadata array of all controls in group
 		this.controlNames = Object.keys(this.formGroup.controls);
 	}
 

src/app/dynaform/components/group/checkbutton-group/checkbutton-group.component.html

@@ -1,7 +1,12 @@
 <div class="lmp-checkbutton-group btn-group btn-group-toggle" [formGroup]="formGroup">
 	<app-checkbutton *ngFor="let groupMember of controlNames; let i = index"
 		[formControlName]="groupMember"
-		[meta]="childMeta[i]"
+		[meta]="childMetaArray[i]"
 	>
 	</app-checkbutton>
 </div>
+<div *ngIf="showAllOrNone">
+	<a (click)="selectAll($event)" href class="btn btn-sm btn-outline-primary">Select All</a> 
+	<a (click)="selectNone($event)" href class="btn btn-sm btn-outline-primary">Select None</a>
+</div>
+

src/app/dynaform/components/group/checkbutton-group/checkbutton-group.component.ts

@@ -12,10 +12,12 @@ export class CheckbuttonGroupComponent extends GroupInputComponent implements On
 	firstControl: FormControl;
 
 	constructor(
-		@Attribute('firstEnablesRest') private firstEnablesRest
+		@Attribute('firstEnablesRest') private firstEnablesRest,
+		@Attribute('allOrNone') private showAllOrNone
 	) {
 		super();
 		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute
+		this.showAllOrNone = showAllOrNone === ''; // True if 'firstEnablesRest' exists as component attribute
 	}
 
 	ngOnInit() {
@@ -23,18 +25,21 @@ export class CheckbuttonGroupComponent extends GroupInputComponent implements On
 		if (this.meta.firstEnablesRest) {
 			this.firstEnablesRest = this.meta.firstEnablesRest;
 		}
+		if (this.meta.showAllOrNone) {
+			this.showAllOrNone = this.meta.showAllOrNone;
+		}
 		if (this.firstEnablesRest) {
 			this.firstControl = this.formGroup.controls[this.controlNames[0]] as FormControl;
-			this.childMeta[0].isDisabled = false;
-			this.childMeta.slice(1).map(meta => { meta.isDisabled = !this.firstControl.value; return meta; });
+			this.childMetaArray[0].isDisabled = false;
+			this.childMetaArray.slice(1).map(meta => { meta.isDisabled = !this.firstControl.value; return meta; });
 
 			// Observe value changes on first control
 			this.firstControl.valueChanges.subscribe(val => {
-				for (let i = 1; i < this.childMeta.length; i++) {
+				for (let i = 1; i < this.childMetaArray.length; i++) {
 					// NOTE: We reassign the input (array member) to trigger change detection (otherwise it doesn't run)
 					// See https://juristr.com/blog/2016/04/angular2-change-detection/
-					this.childMeta[i] = {
-						...this.childMeta[1],
+					this.childMetaArray[i] = {
+						...this.childMetaArray[1],
 						isDisabled: !val
 					};
 				}
@@ -42,4 +47,15 @@ export class CheckbuttonGroupComponent extends GroupInputComponent implements On
 		}
 	}
 
+	selectAll(e: Event): false {
+		this.controlNames.forEach(c => this.formGroup.get(c).setValue(this.meta.meta[c].value));
+		(e.target as HTMLLinkElement).blur();
+		return false;
+	}
+
+	selectNone(e: Event): false {
+		this.controlNames.forEach(c => this.formGroup.get(c).setValue(null));
+		(e.target as HTMLLinkElement).blur();
+		return false;
+	}
 }

src/app/dynaform/models/field.model.ts

@@ -166,6 +166,7 @@ class CheckbuttonGroup {
 	label?: string;
 	groupName: string;
 	firstEnablesRest?;
+	showAllOrNone?;
 	meta: CheckbuttonField[] | { [key: string]: CheckbuttonField };
 	constructor(groupmeta: any) {
 		Object.assign(this, groupmeta);