Syncing changes from LMP

src/app/dynaform/components/custom/checkbutton/checkbutton.component.ts

@@ -16,13 +16,14 @@ import { CustomInputComponent } from './../../_abstract/custom-input.component';
 })
 export class CheckbuttonComponent extends CustomInputComponent implements OnChanges {
 
-	exposeMetaInTemplate: string[] = ['label', 'value', 'isDisabled', 'checkedValue'];
+	exposeMetaInTemplate: string[] = ['label', 'value', 'isDisabled', 'checkedValue', 'onChange'];
 
 	value?: string | boolean = true;
 	isChecked: boolean;
 	isDisabled = false;
 	currentValue: string | boolean;
 	checkedValue: string | boolean = true;
+	onChange: (val) => {};
 
 	ngOnChanges() {
 		this.isDisabled = this.meta.isDisabled;
@@ -34,6 +35,13 @@ export class CheckbuttonComponent extends CustomInputComponent implements OnChan
 		if (this.isDisabled) { return; }
 		this.isChecked = !this.isChecked;
 		this.currentValue = this.isChecked ? this.value || this.checkedValue : false;
+		if (typeof this.onChange === 'function') {
+			try {
+				this.onChange(this.currentValue);
+			} catch (e) {
+				console.log('ERROR in onChange function');
+			}
+		}
 		this.propagateChange(this.currentValue);
 	}
 

src/app/dynaform/dynaform.component.html

@@ -10,7 +10,7 @@
 
 		<ng-container *ngIf="!meta.noLabel; else fullWidth">
 
-			<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta.type)">
+			<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
 				<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
 					{{ meta.rowLabel !== mull ? meta.rowLabel : meta.label }}
 					<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"

src/app/dynaform/dynaform.component.ts

@@ -69,7 +69,7 @@ export class DynaformComponent implements OnInit {
 	ngOnInit() {
 		// Get the formGroup from the formGroupName if necessary
 		if (!this.formGroup && this.formGroupName) {
-			this.formGroup = <FormGroup>this.cc.control; // Get theFormGroup from the injected ControlContainer
+			this.formGroup = this.cc.control as FormGroup; // Get theFormGroup from the injected ControlContainer
 		}
 		if (!this.formGroup) {
 			throw new Error('Dynaform Component initialised without [formGroup] or formGroupName');
@@ -117,7 +117,7 @@ export class DynaformComponent implements OnInit {
 				// Find the identity of 'fg' in the parent FormGroup's controls
 				const fgIdentity = Object.entries(fg.parent.controls).find(([key, candidate]) => candidate === fg);
 				path.push(fgIdentity[0]);
-				fg = <FormGroup>fg.parent;
+				fg = fg.parent as FormGroup;
 			}
 		}
 		return path;
@@ -130,9 +130,12 @@ export class DynaformComponent implements OnInit {
 		};
 	}
 
-	getRowClass(control: FormControl, inputType: string): string {
+	getRowClass(control: FormControl, meta: StringMap): string {
+		const fieldTypeClass = meta.type ? meta.type.toLowerCase().replace('component', '') : '';
+		const fieldClass = Array.isArray(meta.class) ? meta.class.join(' ') : meta.class;
+		const containerClass = fieldClass ? ` container-${fieldClass}` : '';
 		const errorClass = control && control.touched && control.invalid ? ' dyna-error' : '';
-		return `row-${inputType.toLowerCase().replace('component', '')}${errorClass}`;
+		return `row-${fieldTypeClass}${containerClass}${errorClass}`;
 	}
 
 	getValidationFailureMessage(control: FormControl, meta: StringMap) {
@@ -161,7 +164,7 @@ export class DynaformComponent implements OnInit {
 		// (identified by their 'noFormControsl' flag)
 		// e.g. ButtonGroups, HTMLChunks, etc.
 		return Object.entries(metadata)
-				.filter(([key, val]) => !(<StringMap>val).noFormControls)
+				.filter(([key, val]) => !(val as StringMap).noFormControls)
 				.reduce((acc, [key]) => [...acc, key], [])
 				.join(',');
 	}

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

@@ -10,21 +10,22 @@ import { ValueTransformer } from '@modules/dynaform/interfaces';
 import { standardModifiers, standardTransformer } from '@modules/dynaform/utils';
 
 interface SimpleFieldMetaData {
-	name: string; 								// The FormControl name
-	source?: string;							// Location in API-returned model - defaults to name
-	type?: string; 								// The component type e.g. BasicInput, Checkbutton, Timepicker, etc
-	label?: string;								// The field label - defaults to unCamelCased name if not supplied
-	value?: any;								// The field value - defaults to empty string if not supplied
-	default?: any;								// Default value
-	placeholder?: string;						// Optional placeholder text
-	class?: string | Array<string>;				// CSS classes to apply
-	id?: string;								// CSS id to apply
-	before?: string;							// Ordering instruction - move before <name of another key in group>
-	after?: string;								// Ordering instruction - move after <name of another key in group>
-	isDisabled?: boolean;						// Whether field is initially disabled
-	validators?: Array<ValidatorFn>;			// Array of validator functions - following Angular FormControl API
-	asyncValidators?: Array<AsyncValidatorFn>;	// Array of async validator functions - following Angular FormControl API
-	valFailureMsgs?: StringMap;					// Validation failure messages - display appropriate message if validation fails
+	name: string; 							// The FormControl name
+	source?: string;						// Location in API-returned model - defaults to name
+	type?: string; 							// The component type e.g. BasicInput, Checkbutton, Timepicker, etc
+	label?: string;							// The field label - defaults to unCamelCased name if not supplied
+	value?: any;							// The field value - defaults to empty string if not supplied
+	default?: any;							// Default value
+	placeholder?: string;					// Optional placeholder text
+	class?: string | string[];				// CSS classes to apply
+	id?: string;							// CSS id to apply
+	before?: string;						// Ordering instruction - move before <name of another key in group>
+	after?: string;							// Ordering instruction - move after <name of another key in group>
+	isDisabled?: boolean;					// Whether field is initially disabled
+	validators?: ValidatorFn[];				// Array of validator functions - following Angular FormControl API
+	asyncValidators?: AsyncValidatorFn[];	// Array of async validator functions - following Angular FormControl API
+	valFailureMsgs?: StringMap;				// Validation failure messages - display appropriate message if validation fails
+	onChange?: (val) => {};					// Function to call when field's value changes
 }
 
 interface Option {
@@ -75,11 +76,11 @@ abstract class SimpleField {
 	value;
 	default = '';
 	placeholder = '';
-	class?: string | Array<string>;
+	class?: string | string[];
 	id?: string;
 	isDisabled = false;
-	validators: Array<ValidatorFn> = [];
-	asyncValidators: Array<AsyncValidatorFn> = [];
+	validators: ValidatorFn[] = [];
+	asyncValidators: AsyncValidatorFn[] = [];
 	valFailureMsgs: StringMap = {};
 
 	constructor(meta: SimpleFieldMetaData) {
@@ -139,7 +140,6 @@ abstract class OptionsField extends SimpleField {
 class TextField extends SimpleField {
 	type = 'Text';
 	link?: Link;
-	
 }
 
 class TextareaField extends SimpleField {
@@ -215,7 +215,7 @@ class CheckbuttonGroup {
 			const groupMembers = groupmeta.meta;
 			this.meta = Object.entries(groupMembers)
 				.map( ([key, cb]) => [key, new CheckbuttonField(cb as SimpleFieldMetaData)] )
-				.reduce((res, [key, cbf]) => { res[<string>key] = cbf; return res; }, {});
+				.reduce((res, [key, cbf]) => { res[key as string] = cbf; return res; }, {});
 		}
 	}
 }

src/app/dynaform/testdata/testset.1.ts

@@ -56,7 +56,8 @@ const radioFieldHorizontal = {
 
 const checkbutton = {
 	type: 'checkbutton',
-	value: '456'
+	value: '456',
+	onChange: (val) => { alert(val); }
 };
 
 const checkbutton2 = {