ng-dynaform/src/app/dynaform/components/group/checkbutton-group/checkbutton-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-checkbutton-group',
	templateUrl: './checkbutton-group.component.html',
	styleUrls: ['./checkbutton-group.component.scss']
})
export class CheckbuttonGroupComponent extends GroupInputComponent implements OnInit {

	firstControl: FormControl;

	constructor(
		@Attribute('firstEnablesRest') private firstEnablesRest
	) {
		super();
		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute
	}

	ngOnInit() {
		super.ngOnInit();
		if (this.meta.firstEnablesRest) {
			this.firstEnablesRest = this.meta.firstEnablesRest;
		}
		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; });
			
			// Observe value changes on first control
			this.firstControl.valueChanges.subscribe(val => {
				for (var i = 1; i < this.childMeta.length; i++) {
					// NOTE: We rassign 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],
						isDisabled: !val
					}
				}
			});
		}
	}

}