ng-dynaform/src/app/dynaform/components/group/checkbox-group/clr-checkbox-group.component.ts

import { Component, Attribute, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { GroupInputComponent } from '../../_abstract/group-input.component';

@Component({
	selector: 'app-checkbox-group',
	templateUrl: './clr-checkbox-group.component.html',
	styleUrls: ['./clr-checkbox-group.component.scss']
})
export class ClrCheckboxGroupComponent extends GroupInputComponent implements OnInit {

	firstControl: FormControl;

	constructor(
		@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() {
		super.ngOnInit();
		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.childMetaArray[0].disabled = false;
			this.childMetaArray.slice(1).map(meta => { meta.disabled = !this.firstControl.value; return meta; });

			// Observe value changes on first control
			this.firstControl.valueChanges.subscribe(val => {
				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.childMetaArray[i] = {
						...this.childMetaArray[i],
						disabled: !val
					};
				}
			});
		}
	}

	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;
	}
}