Adding support for disabled FormControls to the dynafield directive

src/app/_mock/testfields.ts

@@ -37,6 +37,19 @@ const radioField = new fmd.RadioField({
 	options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté']
 });
 
+const disabledTextField = new fmd.TextField({
+	name: 'disabledTextField',
+	placeholder: 'You can\'t touch this',
+	isDisabled: true
+});
+
+const radioFieldHorizontal = new fmd.RadioField({
+	name: 'radioFieldHorizontal',
+	options: ['Fish', 'Fowl', 'Neither'],
+	horizontal: true
+});
+
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Custom
 
@@ -61,7 +74,7 @@ const transformerFunctions: ValueTransformer = {
 	},
 	outputFn: (mod, val) => {
 		let transformedValue;
-		switch(mod) {
+		switch (mod) {
 			case 'Starts With':
 				transformedValue = `%${val}`;
 				break;
@@ -95,6 +108,8 @@ export const formMetaDataObj = {
 	passwordField,
 	selectField,
 	radioField,
+	disabledTextField,
+	radioFieldHorizontal,
 	checkButton,
 	dropDownModifiedInput
 };

src/app/dynaform/components/native/radio/radio.component.html

@@ -1,4 +1,4 @@
-<div *ngFor="let opt of options; let i = index;" class="custom-control custom-radio">
-	<input type="radio" [formControl]="control" [value]="opt.value" [id]="name + i" class="custom-control-input">
+<div *ngFor="let opt of options; let i = index;" class="custom-control custom-radio" [ngClass]="{'custom-control-inline' : horizontal}">
+	<input type="radio" [formControl]="control" [value]="opt.value" [name]="name" [id]="name + i" class="custom-control-input">
 	<label class="custom-control-label" [for]="name + i">{{ opt.label }}</label>
 </div>

src/app/dynaform/components/native/radio/radio.component.ts

@@ -8,6 +8,6 @@ import { NativeInputComponent } from '../../_abstract/native-input/native-input.
 })
 export class RadioComponent extends NativeInputComponent {
 
-	exposeMetaInTemplate: string[] = ['name', 'options'];
+	exposeMetaInTemplate: string[] = ['name', 'options', 'horizontal'];
 
 }

src/app/dynaform/directives/dynafield.directive.ts

@@ -56,15 +56,22 @@ export class DynafieldDirective extends NgControl implements OnInit /* OnChanges
 			);
 		}
 		try {
-			const { name, class: cssClass, id: cssId } = this.meta;
+			const { name, class: cssClass, id: cssId, isDisabled } = this.meta;
+
+			// Create the component
 			const component = this.resolver.resolveComponentFactory<FFC>(formFieldComponents[type]);
 			this.component = this.container.createComponent(component);
 			const instance = this.component.instance;
 			const el = this.component.location.nativeElement;
 
-			// Send in the data
+			// Set its FormControl and metadata
+			if (isDisabled) {
+				this.control.reset({ value: this.control.value, disabled: true });
+			}
 			instance.control = this.control;
 			instance.meta = this.meta;
+
+			// Add id and classes (if specified)
 			if (cssClass) {
 				const classesToAdd = Array.isArray(cssClass) ? cssClass : [cssClass];
 				el.classList.add(...classesToAdd);
@@ -72,6 +79,8 @@ export class DynafieldDirective extends NgControl implements OnInit /* OnChanges
 			if (cssId) {
 				el.id = cssId;
 			}
+
+			// Connect custom components
 			if (instance.propagateChange) {
 				// We're dealing with a custom form control which implements the ControlValueAccessor interface,
 				// so we need to wire it up!

src/app/dynaform/models/index.ts

@@ -28,7 +28,8 @@ interface Option {
 }
 
 interface OptionsFieldMetaData extends SimpleFieldMetaData {
-	options;				// Array of Options - for select, radio-button-group and other 'multiple-choice' types
+	options;									// Array of Options - for select, radio-button-group and other 'multiple-choice' types
+	horizontal?;								// Whether to arrang radio buttons or checkboxes horizontally (default false)
 }
 interface DropdownModifiedInputFieldMetaData extends SimpleFieldMetaData {
 	modifiers: string[];
@@ -52,6 +53,7 @@ class SimpleField {
 	value;
 	placeholder = '';
 	class?: string | Array<string>;
+	id?: string;
 	isDisabled?: boolean;
 	validators: Array<ValidatorFn> = [];
 	asyncValidators: Array<AsyncValidatorFn> = [];
@@ -85,11 +87,13 @@ class Option {
 
 class OptionsField extends SimpleField {
 	options: Option[] = [];
+	abc;
 	constructor(meta: OptionsFieldMetaData) {
 		super(meta);
 		if (Array.isArray(meta.options)) {
 			this.options = meta.options.reduce((acc, opt) => { acc.push(new Option(opt)); return acc; }, []);
 		}
+		this.abc = true;
 	}
 }
 

src/styles.scss

@@ -9,13 +9,27 @@ h1 {
 	margin-bottom: 1em;
 }
 
+div.col-sm-8 {
+	border-top: 3px white solid;
+	padding-top: 4px;
+}
+
 div.col-sm-4 {
 	background-color: lavenderblush;
 	border-top: 3px white solid;
-	padding-top: 2px;
+	padding-top: 4px;
 	margin-bottom: 3px;
 }
 
+div.col-sm-8 {
+	label {
+		font-size: 0.85em;
+	}
+	textarea {
+		margin-bottom: 5px;
+	}
+}
+
 .red input { 
 	color: rgb(202, 28, 28) !important;
 }