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

import {
	Directive, ComponentFactoryResolver, ComponentRef, ViewContainerRef,
	Input, Output, EventEmitter, OnInit, OnDestroy,
	Optional, Self, SkipSelf, Inject
} from '@angular/core';
import {
	Form, FormControl, AbstractControl,
	NgControl, ControlContainer, ControlValueAccessor,
	NG_VALIDATORS, Validator, Validators, ValidatorFn,
	NG_ASYNC_VALIDATORS, AsyncValidatorFn
} from '@angular/forms';

import * as formFieldComponents from './../components';

interface IFFC {
	control: FormControl; // Remember, this can be an individual FormControl or a FormGroup
	meta: StringMap<any>;
	propagateChange?: Function;
	call?: EventEmitter<string>;
}
type FFCCustom = IFFC & ControlValueAccessor;

// Generate component name given type
const componentType = (type: string): string => type[0].toUpperCase() + type.slice(1) + 'Component';

@Directive({
	// tslint:disable-next-line:directive-selector
	selector: '[dynafield]'
})
export class DynafieldDirective extends NgControl implements OnInit, OnDestroy {

	@Input()
	meta: StringMap<any>;

	@Input()
	set control(fc: FormControl) {
		this._control = this._control || fc;
	}

	get control(): FormControl | null {
		return this._control;
	}

	// tslint:disable-next-line:no-output-rename
	@Output('ngModelChange')
	update = new EventEmitter();

	@Output()
	call: EventEmitter<string> = new EventEmitter<string>();

	component: ComponentRef<IFFC|FFCCustom>;
	_control;

	constructor(
		private resolver: ComponentFactoryResolver,
		private container: ViewContainerRef,
		@SkipSelf() private cc: ControlContainer,
		@Optional() @Self() @Inject(NG_VALIDATORS) private validators: Array<Validator | ValidatorFn>,
		@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private asyncValidators: AsyncValidatorFn[]
	) {
		super();
	}

	ngOnInit() {
		const type = componentType(this.meta.type);
		if (!formFieldComponents[type]) {
			const validComponentTypes = Object.keys(formFieldComponents).join(', ');
			throw new Error(
				`Dynaform Dynafield Error: Invalid field type: ${type}.
			 	 Supported types: ${validComponentTypes}`
			);
		}
		try {
			let { control, meta } = this;
			const { name, class: cssClass, id: cssId, disabled } = meta;

			// Create the component
			const component = this.resolver.resolveComponentFactory<IFFC>(formFieldComponents[type]);
			this.component = this.container.createComponent(component);
			const instance = this.component.instance;
			const el = this.component.location.nativeElement;
			el.classList.add(type.toLowerCase().replace('component', ''));

			// Support the recursive insertion of Dynaform components
			if (type === 'DynaformComponent') {
				if (meta.template) {
					(instance as any).template = meta.template;
				}
				meta = meta.meta;
			}

			// Check whether it's disabled, then set its FormControl and metadata
			if (disabled) {
				this.control.reset({ value: this.control.value, disabled: true });
			}
			instance.control = control;
			instance.meta = meta;

			// Listen for 'call' Output events and send them onwards
			if (instance.call) {
				instance.call.subscribe((fnId: string) => this.call.emit(fnId));
			}

			// Add id and classes (as specified)
			if (cssId) {
				el.id = cssId;
			}
			if (cssClass) {
				const classesToAdd = Array.isArray(cssClass) ? cssClass : [...cssClass.split(/\s+/)];
				el.classList.add(...classesToAdd);
			}

			// 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!
				this.name = name;
				this.valueAccessor = this.component.instance as FFCCustom;
				// Attach sync validators
				/*
				const ngValidators = this.component.injector.get(NG_VALIDATORS, null);
				if (ngValidators && ngValidators.some(x => x as any === this.component.instance)) {
					console.log('HERE');
					this.validators = [...(this.validators || []), ...(ngValidators as Array<Validator|ValidatorFn>)];
				}
				*/
				this._control = this.formGroupDirective.addControl(this);
			}
		} catch (e) {
			console.error('ERROR INSTANTIATING DYNAFORM CHILD COMPONENT', type);
			console.log(e);
		}
	}

	ngOnDestroy(): void {
		if (this.formGroupDirective) {
			this.formGroupDirective.removeControl(this);
		}
		if (this.component) {
			this.component.destroy();
		}
	}

	// ---------------------------------------
	// Override methods / getters in NgControl

	viewToModelUpdate(newValue: any): void {
		this.update.emit(newValue);
	}

	get path(): string[] {
		return [...this.cc.path, this.name];
	}

	get formGroupDirective(): Form | null {
		return this.cc ? this.cc.formDirective : null;
	}

	get validator(): ValidatorFn | null {
		return this.validators !== null ? Validators.compose(this.validators.map(this.normalizeValidator)) : null;
	}

	get asyncValidator(): AsyncValidatorFn {
		// TODO: Test composition of asyncValidators properly
		return this.asyncValidators !== null ? Validators.composeAsync(this.asyncValidators) : null;
	}

	normalizeValidator(validator: ValidatorFn | Validator): ValidatorFn {
		if ((validator as Validator).validate) {
			return (c: AbstractControl) => (validator as Validator).validate(c);
		} else {
			return validator as ValidatorFn;
		}
	}

}