@stemy/ngx-dynamic-form 10.2.24 → 12.0.0

package/fesm2015/stemy-ngx-dynamic-form.js

@@ -1,12 +1,447 @@
-import { ReflectUtils, ObjectUtils, UniqueUtils, StringUtils, OpenApiService, TOASTER_SERVICE, ObservableUtils, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
-import { __awaiter } from 'tslib';
-import { Subject, Subscription } from 'rxjs';
-import { EventEmitter, Injectable, Directive, Inject, ChangeDetectorRef, ElementRef, Renderer2, Input, Output, HostBinding, HostListener, QueryList, Component, ChangeDetectionStrategy, ContentChildren, ViewChildren, ViewChild, ComponentFactoryResolver, ViewContainerRef, NgModule } from '@angular/core';
-import { FormGroup, FormArray, NgForm, FormsModule, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
-import { DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormService as DynamicFormService$1, DynamicSelectModel, DynamicFormGroupModel, DynamicInputModel, DynamicFileUploadModel, DynamicCheckboxModel, DynamicTextAreaModel, DynamicFormComponentService, DynamicFormValidationService as DynamicFormValidationService$1, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormLayoutService, DynamicFormRelationService, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
+import { InjectionToken, Directive, HostBinding, Injectable, Inject, Type, ComponentFactoryResolver, Injector, EventEmitter, ChangeDetectorRef, ElementRef, Renderer2, Input, Output, HostListener, ViewContainerRef, TemplateRef, ContentChild, ContentChildren, Component, ViewChildren, ViewChild, NgModule } from '@angular/core';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ObjectUtils, ReflectUtils, UniqueUtils, TimerUtils, FileUtils, FactoryDependencies, StringUtils, ApiService, TOASTER_SERVICE, ArrayUtils, LANGUAGE_SERVICE, NgxUtilsModule } from '@stemy/ngx-utils';
+import { __decorate } from 'tslib';
+import { DatePipe, CommonModule } from '@angular/common';
 import { first } from 'rxjs/operators';
-import { CommonModule } from '@angular/common';
 
+const FORM_GROUP_TYPE = new InjectionToken("form-group-provider");
+const FORM_CONTROL_PROVIDER = new InjectionToken("form-control-provider");
+class FormControlComponent {
+    get form() {
+        return !this.control ? null : this.control.form;
+    }
+    get data() {
+        return (!this.control ? {} : this.control.data);
+    }
+    get value() {
+        return !this.control ? null : this.control.value;
+    }
+    get meta() {
+        return !this.control ? null : this.control.meta;
+    }
+    get inputClass() {
+        return true;
+    }
+}
+FormControlComponent.decorators = [
+    { type: Directive }
+];
+FormControlComponent.propDecorators = {
+    inputClass: [{ type: HostBinding, args: ["class.form-input",] }]
+};
+function createValidator(control) {
+    const data = control.data || {};
+    const validators = [data.validator].concat(data.validators || []).filter(ObjectUtils.isDefined).map(v => {
+        return ReflectUtils.resolve(v, control.injector);
+    });
+    return (ctrl) => new Promise((resolve) => {
+        const control = ctrl;
+        control.shouldValidate().then(should => {
+            if (!should) {
+                resolve(null);
+                return;
+            }
+            const validate = validators.map(v => v(control));
+            const metaValidator = control.meta.validator;
+            if (ObjectUtils.isFunction(metaValidator)) {
+                validate.push(metaValidator(control));
+            }
+            Promise.all(validate).then(results => {
+                results = results.filter(error => ObjectUtils.isObject(error) || ObjectUtils.isString(error));
+                let result = null;
+                if (results.length > 0) {
+                    result = {};
+                    results.forEach(error => {
+                        if (ObjectUtils.isString(error)) {
+                            result[error] = {};
+                            return;
+                        }
+                        result = Object.assign(result, error);
+                    });
+                }
+                resolve(result);
+            });
+        });
+    });
+}
+class DynamicFormControlHelper {
+    constructor(form, control = null) {
+        this.form = form;
+        this.control = control;
+        this.formId = UniqueUtils.uuid();
+        this.meta = {};
+        this.hidden = false;
+        this.dummyData = {};
+        this.readonlyTester = this.createTester("readonly");
+        this.hideTester = this.createTester("hidden");
+        this.serializeTester = this.createTester("shouldSerialize", (control) => {
+            return Promise.resolve(control.visible);
+        });
+        this.validateTester = this.createTester("shouldValidate", (control) => {
+            return Promise.resolve(control.visible);
+        });
+    }
+    get id() {
+        return !this.control ? null : this.control.id;
+    }
+    get type() {
+        return !this.control ? "" : this.control.type;
+    }
+    get data() {
+        return !this.control ? this.dummyData : this.control.data || this.dummyData;
+    }
+    get visible() {
+        return !this.hidden;
+    }
+    get provider() {
+        return this.ctrlProvider;
+    }
+    load(control) {
+        return !this.ctrlProvider ? Promise.resolve(null) : this.ctrlProvider.loader(control);
+    }
+    check(control) {
+        return new Promise(resolve => {
+            this.hideTester(control).then(hide => {
+                this.hidden = hide;
+                this.readonlyTester(control).then(readonly => {
+                    resolve(control.form.readonly || readonly);
+                });
+            });
+        });
+    }
+    shouldSerialize(control) {
+        return this.serializeTester(control);
+    }
+    shouldValidate(control) {
+        return this.validateTester(control);
+    }
+    findProvider(control) {
+        this.ctrlProvider = !this.control || !this.control.type ? null : this.form.findProvider(control);
+    }
+    createTester(test, defaultFunc = null) {
+        const tester = this.data[test]
+            ? ReflectUtils.resolve(this.data[test], this.form.injector)
+            : (defaultFunc || (() => Promise.resolve(false)));
+        return (control) => tester(control);
+    }
+}
+class DynamicFormGroup extends FormGroup {
+    constructor(form, control = null) {
+        super({}, { updateOn: ((!control || !control.data) ? null : control.data.updateOn) || form.updateOn || "blur" });
+        this.form = form;
+        this.mName = "";
+        this.mModel = {};
+        this.mControls = [];
+        this.mSerializers = [];
+        this.mFieldSets = {};
+        this.helper = new DynamicFormControlHelper(form, control);
+        this.helper.findProvider(this);
+        this.initialized = false;
+        this.loading = false;
+        this.changeTimer = TimerUtils.createTimeout();
+        this.statusChanges.subscribe(() => {
+            const root = this.form.root;
+            root.onStatusChange.emit(root);
+        });
+        this.setAsyncValidators(createValidator(this));
+    }
+    get id() {
+        return this.helper.id;
+    }
+    get type() {
+        return this.helper.type;
+    }
+    get data() {
+        return this.helper.data;
+    }
+    get visible() {
+        return this.helper.visible;
+    }
+    get meta() {
+        return this.helper.meta;
+    }
+    get injector() {
+        return this.form.injector;
+    }
+    get label() {
+        return this.data.label !== "" ? `${this.prefix}${this.data.label}` : "";
+    }
+    get provider() {
+        return this.helper.provider;
+    }
+    get model() {
+        return this.mModel;
+    }
+    get formId() {
+        return this.helper.formId;
+    }
+    get formControls() {
+        return this.mControls || [];
+    }
+    get formFields() {
+        return this.mFieldSets || {};
+    }
+    get prefix() {
+        return !this.name ? "" : `${this.name}.`;
+    }
+    get name() {
+        return this.mName;
+    }
+    get state() {
+        return (this.loading ? "LOADING" : this.status);
+    }
+    static createFormControls(group, controls) {
+        if (!controls && ObjectUtils.isObject(group.model)) {
+            const props = Object.keys(group.model);
+            controls = props.map(id => {
+                return getFormControl(group.model, id);
+            }).filter(ObjectUtils.isDefined);
+        }
+        if (!controls)
+            return [];
+        return controls.map(ctrl => {
+            if (ctrl.type == "model") {
+                const subGroup = new DynamicFormGroup(group.form, ctrl);
+                const model = group.model[ctrl.id] || {};
+                const data = subGroup.getData();
+                data.name = data.name || group.name;
+                subGroup.setup(model, data);
+                group.model[ctrl.id] = model;
+                group.addControl(subGroup.id, subGroup);
+                return subGroup;
+            }
+            return new DynamicFormControl(ctrl, group);
+        });
+    }
+    static createFormSerializers(group, serializers) {
+        if (!serializers && ObjectUtils.isObject(group.model)) {
+            const props = Object.keys(group.model);
+            serializers = props.reduce((result, id) => {
+                const serializer = getFormSerializer(group.model, id);
+                if (!serializer)
+                    return result;
+                result[id] = serializer;
+                return result;
+            }, {});
+        }
+        if (!serializers)
+            return [];
+        return Object.keys(serializers).map(id => {
+            const serializer = serializers[id] || defaultSerializer;
+            return !serializer ? null : {
+                id: id,
+                func: ReflectUtils.resolve(serializer, group.injector)
+            };
+        });
+    }
+    getData() {
+        return this.data;
+    }
+    getControl(id) {
+        return this.get(id);
+    }
+    load() {
+        const promises = this.mControls.map(c => c.load());
+        promises.push(this.helper.load(this));
+        return Promise.all(promises);
+    }
+    check() {
+        return new Promise(resolve => {
+            this.helper.check(this).then(readonly => {
+                if (readonly)
+                    this.disable({ emitEvent: false });
+                else
+                    this.enable({ emitEvent: false });
+                const promises = this.mControls.map(c => c.check());
+                Promise.all(promises).then(resolve);
+            });
+        });
+    }
+    shouldSerialize() {
+        return this.helper.shouldSerialize(this);
+    }
+    shouldValidate() {
+        return this.helper.shouldValidate(this);
+    }
+    serialize() {
+        return new Promise((resolve) => {
+            const result = {};
+            const serializers = this.mSerializers.map(s => {
+                return new Promise(resolve => {
+                    s.func(s.id, this).then(res => {
+                        const ctrl = this.getControl(s.id);
+                        const promise = !ctrl ? Promise.resolve(true) : ctrl.shouldSerialize();
+                        promise.then(should => {
+                            if (should)
+                                result[s.id] = res;
+                            resolve(null);
+                        });
+                    });
+                });
+            });
+            Promise.all(serializers).then(() => resolve(result));
+        });
+    }
+    onFocus() {
+        this.markAsUntouched({ onlySelf: true });
+    }
+    onBlur() {
+        this.markAsTouched({ onlySelf: true });
+    }
+    showErrors() {
+        this.markAsTouched({ onlySelf: true });
+        this.mControls.forEach(ctrl => ctrl.showErrors());
+    }
+    reloadControls() {
+        let callback = () => { };
+        if (this.initialized === false) {
+            this.initialized = true;
+            this.loading = true;
+            callback = () => {
+                this.loading = false;
+                // this.cdr.detectChanges();
+                const root = this.form.root;
+                root.onInit.emit(root);
+                root.onStatusChange.emit(root);
+                // https://github.com/angular/angular/issues/14542
+                const statusTimer = TimerUtils.createInterval();
+                statusTimer.set(() => {
+                    if (this.status == "PENDING")
+                        return;
+                    statusTimer.clear();
+                    root.onStatusChange.emit(root);
+                }, 50);
+                setTimeout(statusTimer.clear, 5000);
+            };
+        }
+        const promise = new Promise(resolve => {
+            this.load().then(() => this.check().then(resolve));
+        });
+        promise.then(callback, callback);
+        return promise;
+    }
+    setup(model, info) {
+        this.mName = info.name || "";
+        this.mModel = model;
+        this.mControls.forEach(ctrl => this.removeControl(ctrl.id));
+        this.mControls = DynamicFormGroup.createFormControls(this, info.controls);
+        this.mControls.forEach((ctrl) => this.addControl(ctrl.id, ctrl));
+        this.mSerializers = DynamicFormGroup.createFormSerializers(this, info.serializers);
+        this.mFieldSets = info.fieldSets ? info.fieldSets.reduce((result, fs) => {
+            result[fs.id] = fs;
+            return result;
+        }, {}) : getFormFieldSets(Object.getPrototypeOf(model).constructor);
+    }
+    updateModel(control) {
+        this.model[control.id] = control.value;
+        this.changeTimer.clear();
+        this.changeTimer.set(() => {
+            this.check().then(() => this.reloadControlsFrom(control, new Set()).then(() => {
+                this.form.root.onChange.emit(control);
+            }));
+        }, 250);
+    }
+    reloadControlsFrom(control, controls) {
+        const data = control.data;
+        if (!data || !data.reload)
+            return Promise.resolve(null);
+        const reload = ObjectUtils.isArray(data.reload) ? data.reload : [data.reload];
+        return Promise.all(reload.map(id => {
+            const nextControl = this.getControl(id);
+            if (!nextControl || controls.has(nextControl))
+                return Promise.resolve(null);
+            controls.add(nextControl);
+            return new Promise(resolve => {
+                nextControl.load().then(() => {
+                    this.reloadControlsFrom(nextControl, controls).then(resolve);
+                });
+            });
+        }));
+    }
+}
+class DynamicFormControl extends FormControl {
+    constructor(control, group) {
+        super(group.model[control.id], { updateOn: control.data.updateOn || group.updateOn });
+        this.control = control;
+        this.group = group;
+        this.group.addControl(control.id, this);
+        this.helper = new DynamicFormControlHelper(this.form, control);
+        this.helper.findProvider(this);
+        this.valueChanges.subscribe(() => this.group.updateModel(this));
+        this.setAsyncValidators(createValidator(this));
+    }
+    get id() {
+        return this.helper.id;
+    }
+    get type() {
+        return this.helper.type;
+    }
+    get data() {
+        return this.helper.data;
+    }
+    get visible() {
+        return this.helper.visible;
+    }
+    get meta() {
+        return this.helper.meta;
+    }
+    get form() {
+        return this.group.form;
+    }
+    get injector() {
+        return this.form.injector;
+    }
+    get label() {
+        return this.data.label !== "" ? `${this.group.prefix}${this.data.label}` : "";
+    }
+    get provider() {
+        return this.helper.provider;
+    }
+    get model() {
+        return this.group.model;
+    }
+    get formId() {
+        return this.helper.formId;
+    }
+    getData() {
+        return this.data;
+    }
+    getControl(id) {
+        return null;
+    }
+    load() {
+        return this.helper.load(this);
+    }
+    check() {
+        const check = this.helper.check(this);
+        check.then(readonly => {
+            if (readonly || this.group.disabled)
+                this.disable({ emitEvent: false });
+            else
+                this.enable({ emitEvent: false });
+        });
+        return check;
+    }
+    shouldSerialize() {
+        return this.helper.shouldSerialize(this);
+    }
+    shouldValidate() {
+        return this.helper.shouldValidate(this);
+    }
+    serialize() {
+        return Promise.resolve(this.value);
+    }
+    onFocus() {
+        this.markAsUntouched({ onlySelf: true });
+    }
+    onBlur() {
+        this.markAsTouched({ onlySelf: true });
+    }
+    showErrors() {
+        this.markAsTouched({ onlySelf: true });
+    }
+}
 // --- Decorator functions ---
 const emptyArray = [];
 const emptyTester = () => {
@@ -14,8 +449,8 @@ const emptyTester = () => {
 };
 const ɵ0 = emptyTester;
 function defaultSerializer(id, parent) {
-    const control = parent.get(id);
-    return !control ? null : control.value;
+    const control = parent.getControl(id);
+    return !control ? Promise.resolve(parent.model[id]) : control.serialize();
 }
 function FormSerializable(serializer) {
     return (target, propertyKey) => {
@@ -66,6 +501,24 @@ function FormFieldSet(data) {
         ReflectUtils.defineMetadata("dynamicFormFieldSets", sets, target);
     };
 }
+function provideFormGroup(component) {
+    return {
+        provide: FORM_GROUP_TYPE,
+        useValue: component
+    };
+}
+function provideFormControl(component, acceptor, loader, priority = 0) {
+    return {
+        provide: FORM_CONTROL_PROVIDER,
+        multi: true,
+        useValue: {
+            component: component,
+            priority: priority,
+            acceptor: acceptor,
+            loader: loader
+        }
+    };
+}
 function defineFormControl(target, propertyKey, control) {
     ReflectUtils.defineMetadata("dynamicFormControl", control, target, propertyKey);
 }
@@ -98,15 +551,14 @@ function createFormInput(id, data, type = "text") {
     data = control.data;
     data.type = data.type || type;
     data.classes = !data.classes ? `form-group-${data.type}` : `${data.classes} form-group-${data.type}`;
-    data.placeholder = data.placeholder || (data.type == "mask" ? "_" : "");
+    data.placeholder = data.placeholder || "";
     data.step = data.step || 1;
-    data.mask = data.mask || [/\w*/gi];
     return control;
 }
 function createFormSelect(id, data) {
     const control = createFormControl(id, "select", data);
     data = control.data;
-    data.options = data.options || [];
+    data.options = data.options || (() => Promise.resolve([]));
     data.type = data.type || "select";
     const classType = data.type == "select" ? "select" : `select-${data.type}`;
     data.classes = !data.classes ? `form-group-${classType}` : `${data.classes} form-group-${classType}`;
@@ -139,447 +591,286 @@ function createFormFile(id, data) {
     return control;
 }
 
-function validateJSON(control) {
-    const value = control.value;
-    if (!value)
-        return null;
-    try {
-        JSON.parse(value);
-        return null;
-    }
-    catch (e) {
-        return { json: true };
+class DynamicFormService {
+    constructor(components, groupType, resolver, injector) {
+        this.components = components;
+        this.groupType = groupType;
+        this.resolver = resolver;
+        this.injector = injector;
+    }
+    findProvider(control) {
+        if (!control)
+            return null;
+        const providers = this.components.filter(p => p.acceptor(control));
+        if (providers.length == 0) {
+            throw new Error(`No component provider for control: ${JSON.stringify({
+                id: control.id,
+                type: control.type,
+                data: control.data
+            })}`);
+        }
+        // Sort providers
+        providers.sort((a, b) => ObjectUtils.compare(a.priority, b.priority));
+        return providers[0];
+    }
+    createComponent(vcr, provider) {
+        vcr.clear();
+        if (!provider)
+            return null;
+        const factory = this.resolver.resolveComponentFactory(provider.component);
+        return vcr.createComponent(factory).instance;
+    }
+    createGroup(vcr) {
+        vcr.clear();
+        const factory = this.resolver.resolveComponentFactory(this.groupType);
+        return vcr.createComponent(factory).instance;
     }
 }
-function validateRequiredTranslation(control) {
-    const value = control.value;
-    if (!value || value.length == 0)
-        return { requiredTranslation: true };
-    return value.findIndex(t => (t.lang == "de" || t.lang == "en") && !t.translation) < 0
-        ? null
-        : { requiredTranslation: true };
-}
-function validatePhone(control) {
-    const value = control.value;
-    if (!value)
-        return Promise.resolve(null);
-    const phoneRegexp = /^(?:\d){10,12}$/;
-    return phoneRegexp.test(value) ? null : { phone: true };
-}
+DynamicFormService.decorators = [
+    { type: Injectable }
+];
+DynamicFormService.ctorParameters = () => [
+    { type: Array, decorators: [{ type: Inject, args: [FORM_CONTROL_PROVIDER,] }] },
+    { type: Type, decorators: [{ type: Inject, args: [FORM_GROUP_TYPE,] }] },
+    { type: ComponentFactoryResolver },
+    { type: Injector }
+];
 
-class FormSubject extends Subject {
-    constructor(notifyCallback) {
-        super();
-        this.notifyCallback = notifyCallback;
+class FormUtilities {
+    static checkField(expression = `true`) {
+        // @dynamic
+        const lambda = (control) => {
+            return Promise.resolve(ObjectUtils.evaluate(expression, { control: control }));
+        };
+        return lambda;
     }
-    notify(controlModel, control) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let value = this.notifyCallback(controlModel, control);
-            if (value instanceof Promise) {
-                value = yield value;
-            }
-            this.next(value);
-        });
+    static checkReadonly(control) {
+        return Promise.resolve(control.visible && !control.disabled);
     }
-}
-
-class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
-    constructor(config, layout) {
-        super(config, layout);
-        this.additional = config.additional || {};
+    static readonly() {
+        return Promise.resolve(true);
     }
-}
-
-class DynamicFormService extends DynamicFormService$1 {
-    constructor(cs, vs, openApi) {
-        super(cs, vs);
-        this.openApi = openApi;
-        this.onDetectChanges = new EventEmitter();
-    }
-    get api() {
-        return this.openApi.api;
-    }
-    get language() {
-        return this.api.language;
-    }
-    patchGroup(value, formModel, formGroup) {
-        this.patchValueRecursive(value, formModel, formGroup);
-        this.detectChanges();
-        formGroup.patchValue(ObjectUtils.copy(value));
-    }
-    patchForm(value, component) {
-        this.patchValueRecursive(value, component.model, component.group);
-        this.detectChanges(component);
-        component.group.patchValue(value);
-    }
-    serialize(formModel, formGroup) {
-        return this.serializeRecursive(formModel, formGroup);
-    }
-    notifyChanges(formModel, formGroup) {
-        this.notifyChangesRecursive(formModel, formGroup);
-    }
-    updateSelectOptions(formControlModel, formControl) {
-        if (formControlModel instanceof DynamicSelectModel) {
-            let options = formControlModel.options$;
-            if (options instanceof FormSubject) {
-                options.notify(formControlModel, formControl);
-                return;
-            }
-            while (options instanceof Subject && options.source) {
-                options = options.source;
-                if (options instanceof FormSubject) {
-                    options.notify(formControlModel, formControl);
-                }
-            }
+    static validateJSON(control) {
+        const value = control.value;
+        if (!value)
+            return Promise.resolve(null);
+        try {
+            JSON.parse(value);
+            return Promise.resolve(null);
+        }
+        catch (e) {
+            return Promise.resolve("error.not-valid-json");
         }
     }
-    showErrors(form) {
-        this.showErrorsForGroup(form.group);
-        this.detectChanges(form);
-    }
-    detectChanges(formComponent) {
-        super.detectChanges(formComponent);
-        this.onDetectChanges.emit(formComponent);
-    }
-    patchValueRecursive(value, formModel, formGroup) {
-        Object.keys(value).forEach(key => {
-            const subModel = this.findModelById(key, formModel);
-            const subValue = value[key];
-            if (!subModel)
-                return;
-            const subControl = this.findControlByModel(subModel, formGroup);
-            if (subModel instanceof DynamicSelectModel && ObjectUtils.isObject(subValue)) {
-                value[key] = subValue.id || subValue._id || subValue;
-                return;
-            }
-            if (subModel instanceof DynamicFormArrayModel$1) {
-                const length = Array.isArray(subValue) ? subValue.length : 0;
-                const subArray = subControl;
-                while (subModel.size > length) {
-                    this.removeFormArrayGroup(0, subArray, subModel);
-                }
-                while (subModel.size < length) {
-                    this.insertFormArrayGroup(subModel.size, subArray, subModel);
-                }
-                for (let i = 0; i < length; i++) {
-                    const itemModel = subModel.get(i);
-                    this.patchValueRecursive(subValue[i], itemModel.group, subArray.at(i));
-                }
-                return;
-            }
-            if (subModel instanceof DynamicFormGroupModel) {
-                this.patchValueRecursive(subValue, subModel.group, subControl);
-            }
-        });
-    }
-    serializeRecursive(formModel, formGroup) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const result = {};
-            if (!formModel || !formGroup || !formGroup.value)
-                return result;
-            for (const i in formModel) {
-                const subModel = formModel[i];
-                const subControl = this.findControlByModel(subModel, formGroup);
-                const serializer = (_a = subModel.additional) === null || _a === void 0 ? void 0 : _a.serializer;
-                if (ObjectUtils.isFunction(serializer)) {
-                    result[subModel.id] = yield serializer(subModel, subControl);
-                    continue;
-                }
-                if (subModel instanceof DynamicFormArrayModel$1) {
-                    const length = Array.isArray(subControl.value) ? subControl.value.length : 0;
-                    const subArray = subControl;
-                    const resArray = [];
-                    for (let i = 0; i < length; i++) {
-                        const itemModel = subModel.get(i);
-                        resArray.push(yield this.serializeRecursive(itemModel.group, subArray.at(i)));
-                    }
-                    result[subModel.id] = resArray;
-                    continue;
-                }
-                if (subModel instanceof DynamicFormGroupModel) {
-                    result[subModel.id] = yield this.serializeRecursive(subModel.group, subControl);
-                    continue;
-                }
-                if (subModel instanceof DynamicInputModel && !ObjectUtils.isNullOrUndefined(subControl.value)) {
-                    result[subModel.id] = subModel.inputType == "number"
-                        ? (_b = parseFloat((`${subControl.value}` || "0").replace(/,/gi, "."))) !== null && _b !== void 0 ? _b : null : subControl.value;
-                    continue;
-                }
-                result[subModel.id] = subControl.value;
-            }
-            return result;
-        });
+    static validateRequired(control) {
+        const value = control.value;
+        return Promise.resolve(!ObjectUtils.isNumber(value) && !value ? "error.required" : null);
     }
-    notifyChangesRecursive(formModel, formGroup) {
-        if (!formModel || !formGroup)
-            return;
-        for (const i in formModel) {
-            const subModel = formModel[i];
-            const subControl = this.findControlByModel(subModel, formGroup);
-            if (subModel instanceof DynamicFormArrayModel$1) {
-                const length = Array.isArray(subControl.value) ? subControl.value.length : 0;
-                const subArray = subControl;
-                for (let i = 0; i < length; i++) {
-                    const itemModel = subModel.get(i);
-                    this.notifyChangesRecursive(itemModel.group, subArray.at(i));
-                }
-                continue;
+    static validateMinLength(length) {
+        // @dynamic
+        const lambda = (control) => {
+            const value = control.value;
+            if (!ObjectUtils.isString(value) || value.length < length) {
+                return Promise.resolve({ "error.min-length": { length: length } });
             }
-            if (subModel instanceof DynamicFormGroupModel) {
-                this.notifyChangesRecursive(subModel.group, subControl);
-                continue;
+            return Promise.resolve(null);
+        };
+        return lambda;
+    }
+    static validateMaxLength(length) {
+        // @dynamic
+        const lambda = (control) => {
+            const value = control.value;
+            if (!ObjectUtils.isString(value) || value.length > length) {
+                return Promise.resolve({ "error.max-length": { length: length } });
             }
-            this.updateSelectOptions(subModel, subControl);
-        }
+            return Promise.resolve(null);
+        };
+        return lambda;
+    }
+    static validateRequiredTranslation(control) {
+        const value = control.value;
+        if (!value || value.length == 0)
+            return Promise.resolve("error.required");
+        return Promise.resolve(value.findIndex(t => (t.lang == "de" || t.lang == "en") && !t.translation) < 0 ? null : "error.required");
+    }
+    static validateEmail(control) {
+        const value = control.value;
+        if (!value)
+            return Promise.resolve(null);
+        const emailRegexp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return Promise.resolve(emailRegexp.test(value) ? null : "error.invalid-email");
+    }
+    static validatePhone(control) {
+        const value = control.value;
+        if (!value)
+            return Promise.resolve(null);
+        const phoneRegexp = /^(?:\d){10,12}$/;
+        return Promise.resolve(phoneRegexp.test(value) ? null : "error.invalid-phone");
+    }
+    static serializeLogo(id, parent) {
+        const value = parent.model[id];
+        return Promise.resolve(!value || value.length == 0 ? null : value);
+    }
+    static serializeFile(id, parent) {
+        const value = parent.model[id];
+        if (ObjectUtils.isBlob(value))
+            return Promise.resolve(value);
+        return Promise.resolve(!ObjectUtils.isString(value) || !value.startsWith("data:") ? null : FileUtils.dataToBlob(value));
+    }
+    static serializeNumber(id, parent) {
+        const value = parent.model[id];
+        return Promise.resolve(!value || value.length == 0 ? 0 : parseFloat(value));
+    }
+    static serializeJSON(id, parent) {
+        const value = parent.model[id];
+        return Promise.resolve(!value ? {} : JSON.parse(value));
+    }
+    static serializeDate(date, format = "yyyy-MM-dd", defaultValue = "") {
+        // @dynamic
+        const lambda = (id, parent) => {
+            const value = parent.model[id];
+            if (!ObjectUtils.isDate(value))
+                return Promise.resolve(value || defaultValue);
+            return Promise.resolve(!format ? value : date.transform(value, format));
+        };
+        return lambda;
     }
-    showErrorsForGroup(formGroup) {
-        if (!formGroup)
-            return;
-        formGroup.markAsTouched({ onlySelf: true });
-        const controls = Object.keys(formGroup.controls).map(id => formGroup.controls[id]);
-        this.showErrorsForControls(controls);
-    }
-    showErrorsForControls(controls) {
-        controls.forEach(control => {
-            if (control instanceof FormGroup) {
-                this.showErrorsForGroup(control);
-                return;
-            }
-            control.markAsTouched({ onlySelf: true });
-            if (control instanceof FormArray) {
-                this.showErrorsForControls(control.controls);
-            }
-        });
+}
+__decorate([
+    FactoryDependencies(DatePipe)
+], FormUtilities, "serializeDate", null);
+
+class OpenApiService {
+    constructor(api) {
+        this.api = api;
+        const baseUrl = this.api.url("").replace("api/", "api-docs");
+        this.schemas = {};
+        this.schemasPromise = new Promise((resolve => {
+            this.api.client.get(baseUrl).subscribe((res) => {
+                this.schemas = res.definitions || {};
+                resolve(this.schemas);
+            }, () => {
+                resolve({});
+            });
+        }));
     }
-    getFormModelForSchema(name) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.api.cache = {};
-            this.schemas = yield this.openApi.getSchemas();
-            return this.getFormModelForSchemaDef(this.schemas[name]);
+    getFormInputsForSchema(name) {
+        this.api.cache = {};
+        return this.schemasPromise.then(schemas => {
+            const schema = schemas[name];
+            const inputs = this.getFormInputsForSchemaDef(schema);
+            return inputs;
         });
     }
-    getFormModelForSchemaDef(schema) {
+    getFormInputsForSchemaDef(schema) {
+        const inputs = {};
         if (!schema)
-            return [];
-        return Object.keys(schema.properties || {}).map(p => {
+            return inputs;
+        inputs.schema = schema;
+        inputs.serializers = {};
+        inputs.controls = Object.keys(schema.properties || {}).map(p => {
             const property = schema.properties[p];
-            return this.getFormControlModel(property, schema);
+            property.id = p;
+            inputs.serializers[p] = (id, parent) => {
+                return Promise.resolve(parent.model[id]);
+            };
+            return this.getFormControlForProperty(property, schema);
         }).filter(t => null !== t);
+        return inputs;
     }
-    getFormControlModel(property, schema) {
-        var _a, _b;
-        if (Array.isArray(property.enum) || ObjectUtils.isString(property.optionsPath)) {
-            return new DynamicSelectModel(this.getFormSelectConfig(property, schema));
+    getFormControlForProperty(property, schema) {
+        if (Array.isArray(property.enum)) {
+            return createFormSelect(property.id, this.getFormSelectData(property, schema));
         }
         switch (property.type) {
             case "string":
             case "number":
-            case "integer":
-                return new DynamicInputModel(this.getFormInputConfig(property, schema));
-            case "textarea":
-                return new DynamicTextAreaModel(this.getFormTextareaConfig(property, schema));
             case "boolean":
-                return new DynamicCheckboxModel(this.getFormCheckboxConfig(property, schema));
+            case "textarea":
+                return createFormInput(property.id, this.getFormInputData(property, schema));
             case "list":
-                return new DynamicSelectModel(this.getFormSelectConfig(property, schema));
-            case "array":
-                if (((_a = property.items) === null || _a === void 0 ? void 0 : _a.$ref) || property.$ref) {
-                    return new DynamicFormArrayModel(this.getFormArrayConfig(property, schema));
-                }
-                else if (((_b = property.items) === null || _b === void 0 ? void 0 : _b.enum) || property.enum) {
-                    return new DynamicSelectModel(this.getFormSelectConfig(property, schema));
-                }
-                else {
-                    return new DynamicInputModel(this.getFormInputConfig(property, schema));
-                }
+                return createFormSelect(property.id, this.getFormSelectData(property, schema));
             case "file":
-                return new DynamicFileUploadModel(this.getFormUploadConfig(property, schema));
-        }
-        if (property.$ref) {
-            return new DynamicFormGroupModel(this.getFormGroupConfig(property, schema));
+                return createFormFile(property.id, this.getFormFileData(property, schema));
         }
         return null;
     }
-    getFormControlConfig(property, schema) {
-        const validators = this.getValidators(property, schema);
-        const errorMessages = Object.keys(validators).reduce((res, key) => {
-            res[key] = `error.${key}`;
-            return res;
-        }, {});
+    getBaseFormData(property, schema) {
         return {
-            id: property.id,
-            label: ObjectUtils.isString(property.label) ? property.label : property.id,
-            hidden: property.hidden,
-            disabled: property.disabled,
-            validators,
-            errorMessages,
-            additional: Object.assign({}, property)
+            readonly: property.readonly ? FormUtilities.readonly : null,
+            shouldSerialize: FormUtilities.checkReadonly,
+            validators: this.getValidators(property, schema)
         };
     }
-    getFormArrayConfig(property, schema) {
-        var _a;
-        const ref = ((_a = property.items) === null || _a === void 0 ? void 0 : _a.$ref) || property.$ref || "";
-        const subSchema = this.schemas[ref.split("/").pop()];
-        return Object.assign(this.getFormControlConfig(property, schema), { groupFactory: () => this.getFormModelForSchemaDef(subSchema) });
-    }
-    getFormGroupConfig(property, schema) {
-        const ref = property.$ref || "";
-        const subSchema = this.schemas[ref.split("/").pop()];
-        return Object.assign(this.getFormControlConfig(property, schema), { group: this.getFormModelForSchemaDef(subSchema) });
-    }
-    getFormInputConfig(property, schema) {
-        var _a;
-        let inputType = StringUtils.has(property.id, "password", "Password") ? "password" : (((_a = property.items) === null || _a === void 0 ? void 0 : _a.type) || property.type);
-        switch (inputType) {
+    getFormInputData(property, schema) {
+        let type = StringUtils.has(property.id, "password", "Password") ? "password" : property.type;
+        switch (property.type) {
             case "boolean":
-                inputType = "checkbox";
+                type = "checkbox";
                 break;
             case "textarea":
-                inputType = "textarea";
-                break;
-            case "integer":
-                inputType = "number";
+                type = "textarea";
                 break;
         }
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            inputType,
-            autoComplete: property.autoComplete || "off",
-            multiple: property.type == "array",
-            accept: ObjectUtils.isString(property.accept) ? property.accept : null,
-            mask: ObjectUtils.isString(property.mask) ? property.mask : null,
-            pattern: ObjectUtils.isString(property.pattern) ? property.pattern : null,
-            step: isNaN(property.step) ? 1 : property.step,
-            min: isNaN(property.min) ? Number.MIN_SAFE_INTEGER : property.min,
-            max: isNaN(property.max) ? Number.MAX_SAFE_INTEGER : property.max,
-        });
-    }
-    getFormTextareaConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            cols: property.cols || null,
-            rows: property.rows || 10,
-            wrap: property.wrap || false,
-            autoComplete: property.autoComplete || "off",
-            multiple: property.type == "array"
-        });
+        return Object.assign(Object.assign({}, this.getBaseFormData(property, schema)), { type });
     }
-    getFormSelectConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            options: this.getFormSelectOptions(property, schema),
-            multiple: property.type == "array"
-        });
-    }
-    getFormCheckboxConfig(property, schema) {
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            indeterminate: property.indeterminate === true
-        });
-    }
-    translateOptions(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!options)
-                return [];
-            for (const option of options) {
-                option.label = yield this.language.getTranslation(option.label);
+    getFormSelectData(property, schema) {
+        const options = Array.isArray(property.enum)
+            ? () => {
+                return Promise.resolve(property.enum.map(id => ({ id, label: `${property.id}.${id}` })));
             }
-            return options;
-        });
-    }
-    getFormSelectOptions(property, schema) {
-        var _a;
-        const $enum = ((_a = property.items) === null || _a === void 0 ? void 0 : _a.enum) || property.enum;
-        if (property.optionsPath) {
-            return new FormSubject((formModel, control) => {
-                let path = property.optionsPath;
-                let target = control;
-                if (path.startsWith("$root")) {
-                    path = path.substr(5);
-                    while (target.parent) {
-                        target = target.parent;
-                    }
-                }
-                while (path.startsWith(".")) {
-                    path = path.substr(1);
-                    if (target.parent) {
-                        target = target.parent;
-                    }
-                }
-                const value = ObjectUtils.getValue(target.value, path);
-                const options = (!ObjectUtils.isArray(value) ? [] : value).map(value => ({ value, label: value }));
-                return this.translateOptions(options);
-            });
-        }
-        if (ObjectUtils.isArray($enum)) {
-            return new FormSubject(() => {
-                const options = $enum.map(value => {
-                    const label = property.translatable ? `${property.id}.${value}` : value;
-                    return { value, label };
-                });
-                return this.translateOptions(options);
-            });
-        }
-        return new FormSubject(() => __awaiter(this, void 0, void 0, function* () {
-            this.api.cache[property.endpoint] = this.api.cache[property.endpoint] || this.api.list(property.endpoint, this.api.makeListParams(1, -1)).then(result => {
-                return result.items.map(i => {
-                    return { value: i.id || i._id, label: i[property.labelField] || i.label || i.id || i._id };
+            : () => {
+                this.api.cache[property.endpoint] = this.api.cache[property.endpoint] || this.api.list(property.endpoint, this.api.makeListParams(1, -1)).then(result => {
+                    return result.items.map(i => {
+                        return { id: i._id, label: i.name };
+                    });
                 });
-            });
-            const options = (yield this.api.cache[property.endpoint]).map(t => Object.assign({}, t));
-            return this.translateOptions(options);
-        }));
+                return this.api.cache[property.endpoint];
+            };
+        return Object.assign(Object.assign({}, this.getBaseFormData(property, schema)), { options });
     }
-    getFormUploadConfig(property, schema) {
-        const url = this.api.url(property.url || "assets");
-        const { accept, autoUpload, maxSize, minSize, removeUrl, showFileList } = property;
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            url,
-            accept,
-            autoUpload,
-            maxSize,
-            minSize,
-            removeUrl,
-            showFileList
-        });
+    getFormFileData(property, schema) {
+        return Object.assign(Object.assign({}, this.getBaseFormData(property, schema)), { multi: property.multi });
     }
     getValidators(property, schema) {
-        const validators = {};
-        if (ObjectUtils.isArray(schema.required) && schema.required.indexOf(property.id) >= 0) {
-            validators.required = null;
+        const validators = [];
+        if (schema.required.indexOf(property.id) >= 0) {
+            validators.push(FormUtilities.validateRequired);
         }
         if (property.minLength) {
-            validators.minLength = property.minLength;
+            validators.push({
+                type: FormUtilities,
+                func: FormUtilities.validateMinLength,
+                params: [property.minLength]
+            });
         }
         if (property.maxLength) {
-            validators.maxLength = property.maxLength;
-        }
-        if (property.min) {
-            validators.min = property.min;
-        }
-        if (property.max) {
-            validators.max = property.max;
+            validators.push({
+                type: FormUtilities,
+                func: FormUtilities.validateMaxLength,
+                params: [property.maxLength]
+            });
         }
         switch (property.format) {
             case "email":
-                validators.email = null;
+                validators.push(FormUtilities.validateEmail);
                 break;
         }
         return validators;
     }
 }
-DynamicFormService.decorators = [
+OpenApiService.decorators = [
     { type: Injectable }
 ];
-DynamicFormService.ctorParameters = () => [
-    { type: DynamicFormComponentService },
-    { type: DynamicFormValidationService$1 },
-    { type: OpenApiService }
+OpenApiService.ctorParameters = () => [
+    { type: ApiService }
 ];
 
 class AsyncSubmitDirective {
     constructor(toaster, cdr, elem, renderer) {
         this.toaster = toaster;
         this.cdr = cdr;
-        this.elem = elem;
-        this.renderer = renderer;
         this.onSuccess = new EventEmitter();
         this.onError = new EventEmitter();
         if (elem.nativeElement.tagName !== "BUTTON")
@@ -589,26 +880,18 @@ class AsyncSubmitDirective {
     get isDisabled() {
         return this.disabled;
     }
-    set isDisabled(value) {
-        this.disabled = value;
-        if (value) {
-            this.renderer.setAttribute(this.elem.nativeElement, "disabled", "disabled");
-            return;
-        }
-        this.renderer.removeAttribute(this.elem.nativeElement, "disabled");
-    }
     get isLoading() {
         return this.loading;
     }
     ngOnInit() {
         if (!this.form)
             return;
-        this.isDisabled = this.form.status !== "VALID";
+        this.disabled = this.form.status !== "VALID";
         this.cdr.detectChanges();
-        this.onStatusChange = this.form.onStatusChange.subscribe(() => {
-            this.isDisabled = this.form.status !== "VALID";
+        this.onStatusChange = this.form.onStatusChange.subscribe(form => {
+            this.disabled = form.status !== "VALID";
             this.cdr.detectChanges();
-            if (!this.callback || this.form.status == "PENDING")
+            if (!this.callback || form.status == "PENDING")
                 return;
             if (!this.disabled) {
                 this.callback();
@@ -634,7 +917,7 @@ class AsyncSubmitDirective {
         if (this.loading)
             return;
         this.loading = true;
-        this.method(this.form, this.context).then(result => {
+        this.method(this.form).then(result => {
             this.loading = false;
             if (result) {
                 this.onSuccess.emit(result);
@@ -664,7 +947,6 @@ AsyncSubmitDirective.ctorParameters = () => [
 AsyncSubmitDirective.propDecorators = {
     method: [{ type: Input, args: ["async-submit",] }],
     form: [{ type: Input }],
-    context: [{ type: Input }],
     onSuccess: [{ type: Output }],
     onError: [{ type: Output }],
     isDisabled: [{ type: HostBinding, args: ["class.disabled",] }],
@@ -672,78 +954,194 @@ AsyncSubmitDirective.propDecorators = {
     click: [{ type: HostListener, args: ["click",] }]
 };
 
-class DynamicBaseFormComponent extends DynamicFormComponent {
-    constructor(formService, events, changeDetectorRef, componentService) {
-        super(changeDetectorRef, componentService);
+class DynamicFormControlDirective {
+    constructor(vcr, forms) {
+        this.vcr = vcr;
+        this.forms = forms;
+    }
+    get component() {
+        return this.comp;
+    }
+    ngOnChanges(changes) {
+        if (changes.control) {
+            this.comp = this.forms.createComponent(this.vcr, this.control.provider);
+        }
+        if (!this.comp)
+            return;
+        this.comp.control = this.control;
+    }
+}
+DynamicFormControlDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[form-control]",
+            },] }
+];
+DynamicFormControlDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: DynamicFormService }
+];
+DynamicFormControlDirective.propDecorators = {
+    control: [{ type: Input, args: ["form-control",] }]
+};
+
+class DynamicFormTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+DynamicFormTemplateDirective.decorators = [
+    { type: Directive, args: [{
+                selector: `ng-template[control],
+                ng-template[label],
+                ng-template[input],
+                ng-template[prefix],
+                ng-template[suffix],
+                ng-template[setPrefix],
+                ng-template[setSuffix],
+                ng-template[formPrefix],
+                ng-template[formSuffix],
+                ng-template[innerFormPrefix],
+                ng-template[innerFormSuffix]`
+            },] }
+];
+DynamicFormTemplateDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+DynamicFormTemplateDirective.propDecorators = {
+    control: [{ type: Input }],
+    label: [{ type: Input }],
+    input: [{ type: Input }],
+    prefix: [{ type: Input }],
+    suffix: [{ type: Input }],
+    setPrefix: [{ type: Input }],
+    setSuffix: [{ type: Input }],
+    formPrefix: [{ type: Input }],
+    formSuffix: [{ type: Input }],
+    innerFormPrefix: [{ type: Input }],
+    innerFormSuffix: [{ type: Input }]
+};
+
+class DynamicFormBaseComponent {
+    constructor(cdr, formService) {
         this.formService = formService;
-        this.events = events;
-        this.blur = new EventEmitter();
-        this.change = new EventEmitter();
-        this.focus = new EventEmitter();
+        this.name = "";
+        this.controlTemplates = {};
+        this.labelTemplates = {};
+        this.inputTemplates = {};
+        this.prefixTemplates = {};
+        this.suffixTemplates = {};
+        this.onChange = new EventEmitter();
         this.onStatusChange = new EventEmitter();
-        this.onValueChange = new EventEmitter();
+        this.onInit = new EventEmitter();
         this.onSubmit = new EventEmitter();
-        this.templates = new QueryList();
-        this.subscription = new Subscription();
-        this.groupSubscription = new Subscription();
-        this.labelPrefix = "label";
-    }
-    get status() {
-        return !this.group ? null : this.group.status;
+        this.injector = formService.injector;
+        this.cdr = cdr;
     }
-    ngOnChanges(changes) {
-        this.groupSubscription.unsubscribe();
-        if (this.group) {
-            this.groupSubscription = ObservableUtils.multiSubscription(this.group.statusChanges.subscribe(() => {
-                this.onStatusChange.emit(this);
-            }), this.group.valueChanges.subscribe(() => {
-                this.onValueChange.emit(this);
-                this.formService.notifyChanges(this.model, this.group);
-            }));
+    get root() {
+        let form = this;
+        while (ObjectUtils.isDefined(form.parent)) {
+            form = form.parent;
         }
+        return form;
     }
-    ngAfterViewInit() {
-        this.subscription = ObservableUtils.multiSubscription(ObservableUtils.subscribe({
-            subjects: [this.contentTemplates.changes, this.viewTemplates.changes],
-            cb: () => {
-                const templates = this.contentTemplates.toArray().concat(this.viewTemplates.toArray());
-                this.templates.reset(templates);
-            }
-        }), this.events.languageChanged.subscribe(() => {
-            this.formService.detectChanges(this);
-        }), this.ngForm.ngSubmit.subscribe(() => {
-            this.onSubmit.emit(this);
-        }));
+    findProvider(control) {
+        return this.formService.findProvider(control);
+    }
+    // --- Lifecycle hooks
+    ngAfterContentInit() {
+        this.wrapperTemplate = this.wrapperTemplate || this.cWrapperTemplate;
+        this.fieldSetTemplate = this.fieldSetTemplate || this.cFieldSetTemplate;
+        this.controlTemplate = this.controlTemplate || this.cControlTemplate;
+        this.controlTemplates = this.filterTemplates(this.controlTemplates, "control");
+        this.labelTemplates = this.filterTemplates(this.labelTemplates, "label");
+        this.inputTemplates = this.filterTemplates(this.inputTemplates, "input");
+        this.prefixTemplates = this.filterTemplates(this.prefixTemplates, "prefix");
+        this.suffixTemplates = this.filterTemplates(this.suffixTemplates, "suffix");
+        this.setPrefixTemplates = this.filterTemplates(this.setPrefixTemplates, "setPrefix");
+        this.setSuffixTemplates = this.filterTemplates(this.setSuffixTemplates, "setSuffix");
+    }
+    filterTemplates(templates, type) {
+        if (ObjectUtils.isObject(templates) && Object.keys(templates).length > 0)
+            return templates;
+        return this.templates.filter(t => !!t[type]).reduce((result, directive) => {
+            result[directive[type]] = directive.template;
+            return result;
+        }, {});
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.subscription.unsubscribe();
-        this.groupSubscription.unsubscribe();
+}
+DynamicFormBaseComponent.decorators = [
+    { type: Directive }
+];
+DynamicFormBaseComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DynamicFormService }
+];
+DynamicFormBaseComponent.propDecorators = {
+    name: [{ type: Input }],
+    readonly: [{ type: Input }],
+    updateOn: [{ type: Input }],
+    classes: [{ type: Input }],
+    parent: [{ type: Input }],
+    wrapperTemplate: [{ type: Input }],
+    fieldSetTemplate: [{ type: Input }],
+    controlTemplate: [{ type: Input }],
+    controlTemplates: [{ type: Input }],
+    labelTemplates: [{ type: Input }],
+    inputTemplates: [{ type: Input }],
+    prefixTemplates: [{ type: Input }],
+    suffixTemplates: [{ type: Input }],
+    setPrefixTemplates: [{ type: Input }],
+    setSuffixTemplates: [{ type: Input }],
+    onChange: [{ type: Output }],
+    onStatusChange: [{ type: Output }],
+    onInit: [{ type: Output }],
+    onSubmit: [{ type: Output }],
+    prefixTemplate: [{ type: ContentChild, args: ["prefixTemplate",] }],
+    suffixTemplate: [{ type: ContentChild, args: ["suffixTemplate",] }],
+    templates: [{ type: ContentChildren, args: [DynamicFormTemplateDirective,] }],
+    cWrapperTemplate: [{ type: ContentChild, args: ["wrapperTemplate",] }],
+    cFieldSetTemplate: [{ type: ContentChild, args: ["fieldSetTemplate",] }],
+    cControlTemplate: [{ type: ContentChild, args: ["controlTemplate",] }]
+};
+
+class DynamicFormComponent extends DynamicFormBaseComponent {
+    constructor(cdr, forms) {
+        super(cdr, forms);
+        this.group = new DynamicFormGroup(this);
+        this.defaultFieldSet = {
+            id: "",
+            title: "",
+            classes: ""
+        };
     }
-    insertFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.insertFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+    get status() {
+        return this.group.state;
     }
-    removeFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.removeFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+    get formControls() {
+        return this.group.formControls;
     }
-    moveFormArrayGroup(index, step, formArray, formArrayModel) {
-        this.formService.moveFormArrayGroup(index, step, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+    // --- Lifecycle hooks
+    ngOnChanges(changes) {
+        if (!this.data)
+            return;
+        if (changes.data || changes.controls || changes.serializers || changes.formGroup) {
+            if (this.group.id)
+                return;
+            this.group.setup(this.data, this);
+            this.group.reloadControls();
+        }
     }
-    clearFormArray(formArray, formArrayModel) {
-        this.formService.clearFormArray(formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
+    // --- Custom ---
+    onFormSubmit() {
+        const root = this.root;
+        root.validate().then(() => root.onSubmit.emit(this), () => { });
     }
+    // --- IDynamicForm ---
     validate(showErrors = true) {
-        if (!this.group)
-            return Promise.resolve();
         return new Promise((resolve, reject) => {
             this.group.statusChanges.pipe(first(status => status == "VALID" || status == "INVALID")).subscribe(status => {
-                if (showErrors) {
-                    this.formService.showErrors(this);
-                }
+                if (showErrors)
+                    this.group.showErrors();
                 if (status == "VALID") {
                     resolve(null);
                     return;
@@ -754,172 +1152,547 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
         });
     }
     serialize(validate) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.group)
-                return null;
+        return new Promise((resolve, reject) => {
+            const serialize = () => {
+                this.group.serialize().then(resolve);
+            };
             if (validate) {
-                yield this.validate();
+                this.validate().then(serialize, reject);
+                return;
             }
-            return yield this.formService.serialize(this.model, this.group);
+            serialize();
         });
     }
+    check() {
+        return this.group.check();
+    }
+    getControl(id) {
+        return this.group.getControl(id);
+    }
 }
-DynamicBaseFormComponent.decorators = [
+DynamicFormComponent.decorators = [
     { type: Component, args: [{
-                selector: "dynamic-base-form",
-                template: "",
-                changeDetection: ChangeDetectionStrategy.Default
+                moduleId: module.id,
+                selector: "dynamic-form, [dynamic-form]",
+                template: "<ng-template #defaultFieldSetTemplate let-id=\"id\" let-controls=\"controls\" let-fieldSet=\"fieldSet\">\r\n    <div [ngClass]=\"['form-fields', 'form-fields-' + id, fieldSet.classes]\">\r\n        <ng-container [ngxTemplateOutlet]=\"setPrefixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n        <div *ngIf=\"fieldSet.title\" [ngClass]=\"['form-title', fieldSet.titleClasses || '']\">\r\n            {{ group.prefix + fieldSet.title | translate }}\r\n        </div>\r\n        <ng-template #subControls>\r\n            <ng-container *ngFor=\"let control of controls\" [form-group]=\"control\" [visible]=\"control.visible\" [form]=\"this\">\r\n\r\n            </ng-container>\r\n        </ng-template>\r\n        <div *ngIf=\"fieldSet.setClasses; else subControls\" [ngClass]=\"fieldSet.setClasses\">\r\n            <div *ngIf=\"fieldSet.controlClasses; else subControls\" [ngClass]=\"fieldSet.controlClasses\">\r\n                <ng-container [ngTemplateOutlet]=\"subControls\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <ng-container [ngxTemplateOutlet]=\"setSuffixTemplates[fieldSet.id]\" [context]=\"fieldSet\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #fieldSetsTemplate>\r\n    <ng-container *ngFor=\"let fs of formControls | groupBy:'data.fieldSet'\"\r\n                  [ngxTemplateOutlet]=\"fieldSetTemplate || defaultFieldSetTemplate\"\r\n                  [context]=\"{form: this, id: fs.group, controls: fs.items, fieldSet: group.formFields[fs.group] || defaultFieldSet}\">\r\n    </ng-container>\r\n</ng-template>\r\n<ng-template #defaultWrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n                  [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n    <form class=\"dynamic-form\" [ngClass]=\"form.classes || ''\" [formGroup]=\"group\" (submit)=\"onFormSubmit()\">\r\n        <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n        <ng-content></ng-content>\r\n        <div *ngIf=\"form.status == 'PENDING'\" class=\"dynamic-form-validator\">\r\n            {{ group.prefix + 'message.pending' | translate }}\r\n        </div>\r\n        <button [ngStyle]=\"{display: 'none'}\">Submit</button>\r\n    </form>\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n                  [ngTemplateOutletContext]=\"{form: form, fieldSetsTemplate: fieldSetsTemplate}\"></ng-container>\r\n</ng-template>\r\n<ng-template #loadingTemplate>\r\n    <div *ngIf=\"status == 'LOADING'\" class=\"dynamic-form-loader\">\r\n        {{ group.prefix + 'message.loading' | translate }}\r\n    </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"wrapperTemplate || defaultWrapperTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this, fieldSetsTemplate: fieldSetsTemplate}\"\r\n              *ngIf=\"status !== 'LOADING'; else loadingTemplate\">\r\n</ng-container>\r\n",
+                providers: [{ provide: DynamicFormBaseComponent, useExisting: DynamicFormComponent }]
             },] }
 ];
-DynamicBaseFormComponent.ctorParameters = () => [
-    { type: DynamicFormService, decorators: [{ type: Inject, args: [DynamicFormService,] }] },
-    { type: EventsService, decorators: [{ type: Inject, args: [EventsService,] }] },
+DynamicFormComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
-    { type: DynamicFormComponentService }
+    { type: DynamicFormService }
 ];
-DynamicBaseFormComponent.propDecorators = {
+DynamicFormComponent.propDecorators = {
     group: [{ type: Input }],
-    model: [{ type: Input }],
-    layout: [{ type: Input }],
-    labelPrefix: [{ type: Input }],
-    blur: [{ type: Output }],
-    change: [{ type: Output }],
-    focus: [{ type: Output }],
-    contentTemplates: [{ type: ContentChildren, args: [DynamicTemplateDirective,] }],
-    viewTemplates: [{ type: ViewChildren, args: [DynamicTemplateDirective,] }],
-    onStatusChange: [{ type: Output }],
-    onValueChange: [{ type: Output }],
-    onSubmit: [{ type: Output }],
-    ngForm: [{ type: ViewChild, args: [NgForm,] }]
+    controls: [{ type: Input }],
+    serializers: [{ type: Input }],
+    fieldSets: [{ type: Input }],
+    data: [{ type: Input }]
 };
 
-class DynamicBaseFormControlContainerComponent extends DynamicFormControlContainerComponent {
-    constructor(form, changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService) {
-        super(changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService);
-        this.form = form;
-        this.changeDetectorRef = changeDetectorRef;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.layoutService = layoutService;
-        this.validationService = validationService;
-        this.componentService = componentService;
-        this.relationService = relationService;
-        this.context = null;
-        this.blur = new EventEmitter();
-        this.change = new EventEmitter();
-        this.focus = new EventEmitter();
-    }
-    get componentType() {
-        var _a;
-        return (_a = this.componentService.getCustomComponentType(this.model)) !== null && _a !== void 0 ? _a : this.getComponentType(this.model);
-    }
-    get startTemplate() {
-        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
-            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_START")
-            : this.layoutService.getStartTemplate(this.model, this.templates);
-    }
-    get endTemplate() {
-        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
-            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_END")
-            : this.layoutService.getEndTemplate(this.model, this.templates);
-    }
-    get formService() {
-        return this.form.formService;
+const statusPriority = ["LOADING", "PENDING", "DISABLED", "INVALID"];
+class DynamicFormsComponent extends DynamicFormBaseComponent {
+    constructor(cdr, formService) {
+        super(cdr, formService);
+        this.formPrefixTemplates = {};
+        this.formSuffixTemplates = {};
+        this.innerFormPrefixTemplates = {};
+        this.innerFormSuffixTemplates = {};
     }
-    ngOnInit() {
-        this.onDetectChanges = this.formService.onDetectChanges.subscribe(form => {
-            if (form !== this.form)
+    get status() {
+        for (let i = 0; i < statusPriority.length; i++) {
+            const status = statusPriority[i];
+            if (this.checkForms(f => f.status == status))
+                return status;
+        }
+        return "VALID";
+    }
+    // --- Lifecycle hooks
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this.containerTemplate = this.containerTemplate || this.cContainerTemplate;
+        this.formPrefixTemplates = this.filterTemplates(this.formPrefixTemplates, "formPrefix");
+        this.formSuffixTemplates = this.filterTemplates(this.formSuffixTemplates, "formSuffix");
+        this.innerFormPrefixTemplates = this.filterTemplates(this.innerFormPrefixTemplates, "innerFormPrefix");
+        this.innerFormSuffixTemplates = this.filterTemplates(this.innerFormSuffixTemplates, "innerFormSuffix");
+    }
+    ngOnChanges(changes) {
+        this.configs = this.createFormGroups(this.data);
+    }
+    // --- IDynamicFormBase ---
+    validate(showErrors = true) {
+        if (!this.forms)
+            return Promise.reject(null);
+        return Promise.all(this.forms.map(f => f.validate(showErrors)));
+    }
+    serialize(validate) {
+        if (!this.forms)
+            return validate ? Promise.reject(null) : Promise.resolve({});
+        return new Promise((resolve, reject) => {
+            const promises = this.forms.map(f => f.serialize(validate));
+            Promise.all(promises).then(results => {
+                let result = {};
+                results.forEach((data, ix) => {
+                    const config = this.data[ix];
+                    let path = null;
+                    if (ObjectUtils.isArray(config.path) && config.path.length > 0) {
+                        path = config.path;
+                    }
+                    else if (ObjectUtils.isString(config.path) && config.path.length > 0) {
+                        path = config.path.split(".");
+                    }
+                    else if (ObjectUtils.isNumber(config.path)) {
+                        path = [config.path];
+                    }
+                    if (!path) {
+                        result = ObjectUtils.assign(result, data);
+                        return;
+                    }
+                    result = ObjectUtils.mapToPath(result, data, path.map(p => `${p}`));
+                });
+                resolve(result);
+            }, reject);
+        });
+    }
+    check() {
+        if (!this.forms)
+            return Promise.resolve(null);
+        return Promise.all(this.forms.map(t => t.check()));
+    }
+    getControl(id) {
+        return this.getFromValue(f => f.getControl(id));
+    }
+    checkForms(check) {
+        this.cdr.detectChanges();
+        if (!this.forms)
+            return false;
+        return ObjectUtils.isDefined(this.forms.find(check));
+    }
+    getFromValue(check) {
+        if (!this.forms)
+            return null;
+        let value = null;
+        this.forms.find(f => {
+            value = check(f);
+            return ObjectUtils.isDefined(value);
+        });
+        return value;
+    }
+    createFormGroups(configs) {
+        return (configs || []).map((c) => {
+            if (c.multi)
+                return c;
+            const config = c;
+            const group = new DynamicFormGroup(this, {
+                id: config.id || UniqueUtils.uuid(),
+                type: "model",
+                data: config.controlData
+            });
+            config.group = group;
+            config.name = config.name || this.name;
+            group.setup(config.data, config);
+            group.reloadControls();
+            return config;
+        });
+    }
+}
+DynamicFormsComponent.decorators = [
+    { type: Component, args: [{
+                moduleId: module.id,
+                selector: "dynamic-forms, [dynamic-forms]",
+                template: "<ng-template #configTemplate let-formTemplate=\"formTemplate\" let-form=\"form\" let-config=\"config\" let-configTemplate>\r\n    <div [ngClass]=\"config.classes || ''\">\r\n        <ng-container [ngTemplateOutlet]=\"formPrefixTemplates[config.id]\"\r\n                      [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n        <ng-template #singleFormTemplate>\r\n            <div dynamic-form\r\n                 [hidden]=\"!config.group?.visible\"\r\n                 [ngClass]=\"config.formClasses || ''\"\r\n                 [name]=\"config.name || form.name\"\r\n                 [readonly]=\"form.readonly\"\r\n                 [updateOn]=\"form.updateOn\"\r\n                 [classes]=\"config.innerFormClasses\"\r\n                 [parent]=\"form\"\r\n\r\n                 [wrapperTemplate]=\"form.wrapperTemplate\"\r\n                 [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n                 [controlTemplates]=\"form.controlTemplates\"\r\n\r\n                 [controlTemplate]=\"form.controlTemplate\"\r\n                 [labelTemplates]=\"form.labelTemplates\"\r\n                 [inputTemplates]=\"form.inputTemplates\"\r\n                 [prefixTemplates]=\"form.prefixTemplates\"\r\n                 [suffixTemplates]=\"form.suffixTemplates\"\r\n                 [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n                 [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n                 [group]=\"config.group\"\r\n                 [fieldSets]=\"config.fieldSets\">\r\n                <ng-template #prefixTemplate let-subForm=\"form\">\r\n                    <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n                                  [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #suffixTemplate let-subForm=\"form\">\r\n                    <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n                                  [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n        <div dynamic-forms\r\n             [ngClass]=\"config.formClasses || ''\"\r\n             [name]=\"config.name || name\"\r\n             [readonly]=\"form.readonly\"\r\n             [updateOn]=\"form.updateOn\"\r\n             [classes]=\"config.innerFormClasses\"\r\n             [parent]=\"form\"\r\n\r\n             [wrapperTemplate]=\"form.wrapperTemplate\"\r\n             [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n             [controlTemplates]=\"form.controlTemplates\"\r\n\r\n             [controlTemplate]=\"form.controlTemplate\"\r\n             [labelTemplates]=\"form.labelTemplates\"\r\n             [inputTemplates]=\"form.inputTemplates\"\r\n             [prefixTemplates]=\"form.prefixTemplates\"\r\n             [suffixTemplates]=\"form.suffixTemplates\"\r\n             [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n             [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n             [data]=\"config.data\"\r\n             [containerTemplate]=\"form.containerTemplate\"\r\n             [formPrefixTemplates]=\"form.formPrefixTemplates\"\r\n             [formSuffixTemplates]=\"form.formSuffixTemplates\"\r\n             [innerFormPrefixTemplates]=\"form.innerFormPrefixTemplates\"\r\n             [innerFormSuffixTemplates]=\"form.innerFormSuffixTemplates\"\r\n\r\n             *ngIf=\"config.multi; else singleFormTemplate\">\r\n            <ng-template #prefixTemplate let-subForm=\"form\">\r\n                <ng-container [ngTemplateOutlet]=\"form.innerFormPrefixTemplates[config.id]\"\r\n                              [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n            </ng-template>\r\n            <ng-template #suffixTemplate let-subForm=\"form\">\r\n                <ng-container [ngTemplateOutlet]=\"form.innerFormSuffixTemplates[config.id]\"\r\n                              [ngTemplateOutletContext]=\"{config: config, form: subForm}\"></ng-container>\r\n            </ng-template>\r\n        </div>\r\n        <ng-container [ngTemplateOutlet]=\"formSuffixTemplates[config.id]\"\r\n                      [ngTemplateOutletContext]=\"{config: config, form: form}\"></ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template let-form=\"form\" let-configTemplate=\"configTemplate\" #defaultContainerTemplate>\r\n    <div class=\"dynamic-forms\" [ngClass]=\"classes || ''\">\r\n        <ng-container *ngFor=\"let config of form.configs\"\r\n                      [ngTemplateOutlet]=\"configTemplate\"\r\n                      [ngTemplateOutletContext]=\"{form: form, config: config}\"></ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n<ng-container [ngTemplateOutlet]=\"containerTemplate || defaultContainerTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this, configTemplate: configTemplate, defaultContainerTemplate: defaultContainerTemplate}\">\r\n</ng-container>\r\n<ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n              [ngTemplateOutletContext]=\"{form: this}\"></ng-container>\r\n",
+                providers: [{ provide: DynamicFormBaseComponent, useExisting: DynamicFormsComponent }]
+            },] }
+];
+DynamicFormsComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: DynamicFormService }
+];
+DynamicFormsComponent.propDecorators = {
+    data: [{ type: Input }],
+    containerTemplate: [{ type: Input }],
+    formPrefixTemplates: [{ type: Input }],
+    formSuffixTemplates: [{ type: Input }],
+    innerFormPrefixTemplates: [{ type: Input }],
+    innerFormSuffixTemplates: [{ type: Input }],
+    cContainerTemplate: [{ type: ContentChild, args: ["containerTemplate",] }],
+    forms: [{ type: ViewChildren, args: [DynamicFormBaseComponent,] }]
+};
+
+class DynamicFormGroupComponent {
+    get classes() {
+        if (!this.control)
+            return "form-group";
+        return ["form-group", "form-group-" + this.control.id, this.control.data.classes, this.control.errors && this.control.touched ? "form-group-invalid" : ""].join(" ");
+    }
+}
+DynamicFormGroupComponent.decorators = [
+    { type: Component, args: [{
+                moduleId: module.id,
+                selector: "div[dynamic-form-group]",
+                template: "<ng-template #labelTemplate>\r\n    <label [ngClass]=\"'control-label control-label-' + control.data.labelAlign\" [attr.for]=\"control.formId\">\r\n        {{ control.label | translate: control.model }}\r\n    </label>\r\n</ng-template>\r\n<ng-template #errorTemplate>\r\n    <div class=\"error-message\" *ngIf=\"control.errors && control.touched\">\r\n        <span class=\"help-block\" *ngFor=\"let error of control.errors | entries\">\r\n            {{ error.key | translate: error.value }}\r\n        </span>\r\n    </div>\r\n</ng-template>\r\n<ng-template #inputTemplate let-control=\"control\">\r\n    <ng-container [form-control]=\"control\"></ng-container>\r\n</ng-template>\r\n<ng-template #defaultControlTemplate\r\n             let-context\r\n             let-control=\"control\"\r\n             let-data=\"control.data\"\r\n             let-labelTemplate=\"labelTemplate\"\r\n             let-inputTemplate=\"inputTemplate\"\r\n             let-prefixTemplate=\"prefixTemplate\"\r\n             let-suffixTemplate=\"suffixTemplate\"\r\n             let-errorTemplate=\"errorTemplate\">\r\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container *ngIf=\"control.label && data.labelAlign == 'left'\"\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\">\r\n    </ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"inputTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container *ngIf=\"control.label && data.labelAlign == 'right'\"\r\n                  [ngTemplateOutlet]=\"labelTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\">\r\n    </ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"\r\n                  [ngTemplateOutletContext]=\"context\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngxTemplateOutlet]=\"form.controlTemplates[control.id] || form.controlTemplate || defaultControlTemplate\"\r\n              [context]=\"{\r\n                    control: control,\r\n                    labelTemplate: form.labelTemplates[control.id] || labelTemplate,\r\n                    inputTemplate: form.inputTemplates[control.id] || inputTemplate,\r\n                    prefixTemplate: form.prefixTemplates[control.id],\r\n                    suffixTemplate: form.suffixTemplates[control.id],\r\n                    errorTemplate: errorTemplate\r\n                  }\">\r\n</ng-container>\r\n"
+            },] }
+];
+DynamicFormGroupComponent.propDecorators = {
+    classes: [{ type: HostBinding, args: ["class",] }]
+};
+
+class DynamicFormFileComponent extends FormControlComponent {
+    constructor(api, toaster) {
+        super();
+        this.api = api;
+        this.toaster = toaster;
+        this.fileImageCache = [];
+    }
+    // Acceptor for provider
+    static acceptor(control) {
+        return control.type == "file";
+    }
+    // Loader for provider
+    static loader() {
+        return Promise.resolve();
+    }
+    onSelect(input) {
+        this.processFiles(input.files);
+        input.value = "";
+    }
+    processFiles(fileList) {
+        const files = [];
+        const accept = this.data.accept;
+        const types = ObjectUtils.isString(accept) && accept.length > 0 ? accept.toLowerCase().split(",") : null;
+        if (fileList.length == 0)
+            return;
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList.item(i);
+            const type = file.type.toLowerCase();
+            const ext = FileUtils.getExtension(file);
+            if (types && !ArrayUtils.has(types, type, ext))
+                continue;
+            files.push(file);
+        }
+        if (files.length == 0) {
+            this.toaster.error("message.error.wrong-files");
+            return;
+        }
+        this.upload(files);
+    }
+    upload(files) {
+        const single = !this.data.multi;
+        if (single)
+            files.length = Math.min(files.length, 1);
+        const promises = [];
+        files.forEach((file, ix) => {
+            if (this.data.asDataUrl) {
+                promises.push(FileUtils.readFileAsDataURL(file));
+                return;
+            }
+            if (this.data.asFile) {
+                promises.push(Promise.resolve(file));
                 return;
-            this.changeDetectorRef.detectChanges();
-            this.formService.updateSelectOptions(this.model, this.control);
+            }
+            promises.push(this.api.upload(this.data.uploadUrl, this.data.createUploadData(file), console.log, this.data.uploadOptions).then(asset => asset._id || asset, () => null));
+        });
+        Promise.all(promises).then(assets => {
+            if (single) {
+                this.control.setValue(assets[0]);
+                return;
+            }
+            const current = this.value || [];
+            this.control.setValue(current.concat(assets.filter(t => !!t)));
         });
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.onDetectChanges.unsubscribe();
-    }
-    createFormControlComponent() {
-        var _a;
-        super.createFormControlComponent();
-        const component = (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance;
-        if (!component || !ObjectUtils.isFunction(component.onCreated))
+    delete(index) {
+        if (this.data.multi) {
+            const current = Array.from(this.value || []);
+            current.splice(index, 1);
+            this.control.setValue(current);
             return;
-        component.onCreated();
+        }
+        this.control.setValue(null);
     }
-    getComponentType(model) {
-        return null;
+    getUrl(image) {
+        return `url('${this.getImgUrl(image)}')`;
+    }
+    getImgUrl(image) {
+        if (ObjectUtils.isBlob(image)) {
+            let cache = this.fileImageCache.find(t => t.file == image);
+            if (!cache) {
+                cache = { file: image, url: URL.createObjectURL(image) };
+                this.fileImageCache.push(cache);
+            }
+            return cache.url;
+        }
+        const url = !image ? null : image.imageUrl || image;
+        if (!ObjectUtils.isString(url))
+            return null;
+        if (url.startsWith("data:"))
+            return url;
+        if (!this.data.baseUrl) {
+            const subUrl = url.startsWith("/") ? url.substr(1) : url;
+            return this.api.url(subUrl);
+        }
+        return this.api.url(`${this.data.baseUrl}${url}`);
     }
 }
-DynamicBaseFormControlContainerComponent.decorators = [
+DynamicFormFileComponent.decorators = [
     { type: Component, args: [{
-                selector: "dynamic-base-form-control",
-                template: "",
-                changeDetection: ChangeDetectionStrategy.OnPush
+                selector: "dynamic-form-file",
+                template: "<div class=\"upload\">\r\n    <input type=\"file\" (change)=\"onSelect($event.target)\" [attr.accept]=\"data.accept\" multiple=\"multiple\"/>\r\n    <ul class=\"images\" *ngIf=\"!data.multi\">\r\n        <li class=\"image\" *ngIf=\"value\" [ngStyle]=\"{backgroundImage: getUrl(value)}\">\r\n            <a class=\"btn btn-delete\" (click)=\"delete()\"></a>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"images\" *ngIf=\"data.multi\">\r\n        <li class=\"image\" *ngFor=\"let image of value; let i = index\" [ngStyle]=\"{backgroundImage: getUrl(image)}\">\r\n            <a class=\"btn btn-delete\" (click)=\"delete(i)\"></a>\r\n        </li>\r\n    </ul>\r\n</div>\r\n",
+                styles: [".upload{display:inline-block}.upload ul{display:inline-flex;list-style:none;margin:10px 0 0;padding:0}.upload ul li{height:100px;width:100px;background:repeating-linear-gradient(45deg,gray,gray 10px,lightgray 10px,lightgray 20px) center center;background-size:cover;border:1px gray solid;margin-right:5px;position:relative}.upload .btn-delete{background:linear-gradient(to bottom,#c8607a,#a64d5a);border-color:#a64d5a;color:#fff;position:absolute;padding:0;right:5px;top:5px;width:20px;height:20px}.upload .btn-delete:before{color:#fff;display:block;position:absolute;top:0;right:6px;content:\"x\"}\n"]
             },] }
 ];
-DynamicBaseFormControlContainerComponent.ctorParameters = () => [
-    { type: DynamicBaseFormComponent },
-    { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: DynamicFormLayoutService },
-    { type: DynamicFormValidationService$1 },
-    { type: DynamicFormComponentService },
-    { type: DynamicFormRelationService }
+DynamicFormFileComponent.ctorParameters = () => [
+    { type: ApiService },
+    { type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] }
+];
+
+class DynamicFormInputComponent extends FormControlComponent {
+    constructor(language) {
+        super();
+        this.language = language;
+    }
+    // Acceptor for provider
+    static acceptor(control) {
+        return control.type == "input";
+    }
+    // Loader for provider
+    static loader() {
+        return Promise.resolve();
+    }
+    get isChecked() {
+        return this.data.type == "checkbox" && this.value;
+    }
+    onDateChange(value) {
+        const date = new Date(value);
+        const dateValue = date.valueOf();
+        if (isNaN(dateValue) || dateValue < -30610224000000)
+            return;
+        this.control.setValue(date);
+    }
+    onTextChange(value) {
+        if (!this.data.useLanguage) {
+            this.control.setValue(value);
+            return;
+        }
+        const translations = ObjectUtils.isArray(this.value) ? Array.from(this.value) : [];
+        const translation = translations.find(t => t.lang == this.language.editLanguage);
+        if (translation) {
+            translation.translation = value;
+        }
+        else {
+            translations.push({
+                lang: this.language.editLanguage,
+                translation: value
+            });
+        }
+        this.control.setValue(translations);
+    }
+    onNumberBlur() {
+        const value = this.value;
+        if (ObjectUtils.isNumber(this.data.max) && this.data.max < value) {
+            this.control.setValue(this.data.max);
+        }
+        else if (ObjectUtils.isNumber(this.data.min) && this.data.min > value) {
+            this.control.setValue(this.data.min);
+        }
+        this.control.onBlur();
+    }
+}
+DynamicFormInputComponent.decorators = [
+    { type: Component, args: [{
+                moduleId: module.id,
+                selector: "dynamic-form-input",
+                template: "<ng-container [ngSwitch]=\"data.type\">\r\n    <ng-container *ngSwitchCase=\"'textarea'\">\r\n        <textarea class=\"form-control\"\r\n                  rows=\"5\"\r\n                  [attr.autocomplete]=\"data.autocomplete\"\r\n                  [id]=\"control.formId\"\r\n                  [name]=\"control.formId\"\r\n                  [ngClass]=\"{disabled: control.disabled}\"\r\n                  [disabled]=\"control.disabled\"\r\n                  [ngModel]=\"value\"\r\n                  (ngModelChange)=\"control.setValue($event)\"\r\n                  (blur)=\"control.onBlur()\"\r\n                  (focus)=\"control.onFocus()\">{{ data.placeholder | translate }}</textarea>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'date'\">\r\n        <input class=\"form-control\"\r\n               type=\"date\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value | date: 'y-MM-dd'\"\r\n               (ngModelChange)=\"onDateChange($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'number'\">\r\n        <input class=\"form-control\"\r\n               type=\"number\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [min]=\"data.min\"\r\n               [max]=\"data.max\"\r\n               [step]=\"data.step\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"onNumberBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n        <input class=\"form-control\"\r\n               type=\"checkbox\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'text'\">\r\n        <input class=\"form-control\"\r\n               type=\"text\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [minlength]=\"data.min\"\r\n               [maxlength]=\"data.max\"\r\n               [placeholder]=\"data.placeholder | translate\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"data.useLanguage ? (value | translate) : value\"\r\n               (ngModelChange)=\"onTextChange($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n        <input class=\"form-control\"\r\n               [attr.autocomplete]=\"data.autocomplete\"\r\n               [minlength]=\"data.min\"\r\n               [maxlength]=\"data.max\"\r\n               [placeholder]=\"data.placeholder | translate\"\r\n               [type]=\"data.type\"\r\n               [id]=\"control.formId\"\r\n               [name]=\"control.formId\"\r\n               [ngClass]=\"{disabled: control.disabled}\"\r\n               [disabled]=\"control.disabled\"\r\n               [ngModel]=\"value\"\r\n               (ngModelChange)=\"control.setValue($event)\"\r\n               (blur)=\"control.onBlur()\"\r\n               (focus)=\"control.onFocus()\"/>\r\n    </ng-container>\r\n</ng-container>\r\n"
+            },] }
 ];
-DynamicBaseFormControlContainerComponent.propDecorators = {
-    contentTemplateList: [{ type: ContentChildren, args: [DynamicTemplateDirective,] }],
-    klass: [{ type: HostBinding, args: ["class",] }],
-    context: [{ type: Input }],
-    group: [{ type: Input }],
-    hostClass: [{ type: Input }],
-    inputTemplateList: [{ type: Input, args: ["templates",] }],
-    layout: [{ type: Input }],
-    model: [{ type: Input }],
-    blur: [{ type: Output }],
-    change: [{ type: Output }],
-    focus: [{ type: Output }],
-    componentViewContainerRef: [{ type: ViewChild, args: ["componentViewContainer", { read: ViewContainerRef, static: true },] }]
+DynamicFormInputComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [LANGUAGE_SERVICE,] }] }
+];
+DynamicFormInputComponent.propDecorators = {
+    isChecked: [{ type: HostBinding, args: ["class.checked",] }]
 };
 
-class DynamicFormValidationService extends DynamicFormValidationService$1 {
-    showErrorMessages(control, model, hasFocus) {
-        return super.showErrorMessages(control, model, hasFocus);
+class DynamicFormSelectComponent extends FormControlComponent {
+    // Acceptor for provider
+    static acceptor(control) {
+        return control.type == "select";
+    }
+    // Loader for provider
+    static loader(control) {
+        const data = control.getData();
+        if (data.type == "radio" && data.multi) {
+            return Promise.reject("Radio group doesn't support multi select!");
+        }
+        return new Promise(resolve => {
+            const getOptions = ReflectUtils.resolve(data.options, control.form.injector);
+            getOptions(control).then(options => {
+                if (data.emptyOption)
+                    options.unshift({ id: null, label: "" });
+                control.meta.options = options;
+                DynamicFormSelectComponent.fillOptions(control, options);
+                resolve(options);
+            });
+        });
+    }
+    static fillOptions(control, options) {
+        const data = control.getData();
+        const selected = control.value;
+        if (data.multi || options.length == 0 || options.findIndex(t => t.id == selected) >= 0)
+            return;
+        control.setValue(options[0].id);
+    }
+    onSelectChange(value) {
+        const isArray = ObjectUtils.isArray(value);
+        const current = this.value;
+        if (this.data.multi) {
+            if (isArray) {
+                this.control.setValue(value);
+                return;
+            }
+            if (ObjectUtils.isArray(current)) {
+                this.control.setValue(current.indexOf(value) < 0
+                    ? current.concat([value])
+                    : current.filter(c => c !== value));
+                return;
+            }
+            this.control.setValue([value]);
+            return;
+        }
+        if (isArray)
+            value = value[0];
+        if (current == value) {
+            const option = this.meta.options.find(o => o.id !== value);
+            value = option ? option.id : null;
+        }
+        this.control.setValue(value);
+    }
+    checkValue(option) {
+        const value = this.value;
+        return ObjectUtils.isArray(value) ? value.indexOf(option.id) >= 0 : option.id == value;
+    }
+    findOption(option, index, id) {
+        return option.id == id;
+    }
+}
+DynamicFormSelectComponent.decorators = [
+    { type: Component, args: [{
+                moduleId: module.id,
+                selector: "dynamic-form-select",
+                template: "<ng-template #selectTemplate let-selected=\"selected\">\r\n    <select class=\"form-control\"\r\n            [multiple]=\"data.multi\"\r\n            [id]=\"control.formId\"\r\n            [name]=\"control.formId\"\r\n            [ngClass]=\"{disabled: control.disabled}\"\r\n            [disabled]=\"control.disabled\"\r\n            [ngModel]=\"data.multi ? value : [value]\"\r\n            (ngModelChange)=\"onSelectChange($event)\"\r\n            (blur)=\"control.onBlur()\"\r\n            (focus)=\"control.onFocus()\">\r\n        <option *ngFor=\"let option of meta.options\" [value]=\"option.id\" [disabled]=\"option.selectable == false\">\r\n            {{ option.label | translate }}\r\n        </option>\r\n    </select>\r\n    <label class=\"form-control-description\" [attr.for]=\"control.formId\" *ngIf=\"!data.multi && selected?.description\">\r\n        {{ selected?.description | translate }}\r\n    </label>\r\n</ng-template>\r\n<ng-container [ngSwitch]=\"data.type\">\r\n    <ng-container *ngSwitchCase=\"'radio'\">\r\n        <ul class=\"radio-group\">\r\n            <li *ngFor=\"let option of meta.options\" class=\"radio\">\r\n                <label [ngClass]=\"{checked: value == option.id}\">\r\n                    <input type=\"radio\"\r\n                           [id]=\"control.formId + '-' + option.id\"\r\n                           [name]=\"control.formId + '-' + option.id\"\r\n                           [ngClass]=\"{disabled: control.disabled}\"\r\n                           [disabled]=\"control.disabled || option.selectable == false\"\r\n                           [value]=\"option.id\"\r\n                           [ngModel]=\"value\"\r\n                           (ngModelChange)=\"onSelectChange(option.id)\"\r\n                           (blur)=\"control.onBlur()\"\r\n                           (focus)=\"control.onFocus()\">\r\n                    {{ option.label | translate }}\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'checkbox'\">\r\n        <ul class=\"checkbox-group\">\r\n            <li *ngFor=\"let option of meta.options\" class=\"checkbox\">\r\n                <label [ngClass]=\"{checked: checkValue(option)}\">\r\n                    <input type=\"checkbox\"\r\n                           [id]=\"control.formId + '-' + option.id\"\r\n                           [name]=\"control.formId + '-' + option.id\"\r\n                           [ngClass]=\"{disabled: control.disabled}\"\r\n                           [disabled]=\"control.disabled || option.selectable == false\"\r\n                           [ngModel]=\"checkValue(option)\"\r\n                           (ngModelChange)=\"onSelectChange(option.id)\"\r\n                           (blur)=\"control.onBlur()\"\r\n                           (focus)=\"control.onFocus()\">\r\n                    {{ option.label | translate }}\r\n                </label>\r\n            </li>\r\n        </ul>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"selectTemplate\" [ngTemplateOutletContext]=\"{selected: meta?.options | find:findOption:value}\">\r\n\r\n    </ng-container>\r\n</ng-container>\r\n"
+            },] }
+];
+
+class DynamicFormStaticComponent extends FormControlComponent {
+    // Acceptor for provider
+    static acceptor(control) {
+        return control.type == "static";
+    }
+    // Loader for provider
+    static loader() {
+        return Promise.resolve();
     }
 }
-DynamicFormValidationService.decorators = [
-    { type: Injectable }
+DynamicFormStaticComponent.decorators = [
+    { type: Component, args: [{
+                moduleId: module.id,
+                selector: "dynamic-form-static",
+                template: "<unordered-list [listStyle]=\"data.style\" [ngClass]=\"{disabled: control.disabled}\"\r\n                [data]=\"!data.properties ? {value: value} : data.properties | remap: value\">\r\n    <ng-template [type]=\"!data.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\r\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\r\n        {{ item.value | date }}\r\n    </ng-template>\r\n</unordered-list>\r\n"
+            },] }
 ];
 
+class DynamicFormModelComponent extends FormControlComponent {
+    // Acceptor for provider
+    static acceptor(control) {
+        return control.type == "model";
+    }
+    // Loader for provider
+    static loader() {
+        return Promise.resolve();
+    }
+}
+DynamicFormModelComponent.decorators = [
+    { type: Component, args: [{
+                moduleId: module.id,
+                selector: "dynamic-form-model",
+                template: "<dynamic-form [name]=\"data.name || form.name\"\r\n              [group]=\"control\"\r\n              [data]=\"value\"\r\n              [updateOn]=\"control.updateOn\"\r\n              [parent]=\"form\"\r\n\r\n              [fieldSetTemplate]=\"form.fieldSetTemplate\"\r\n              [controlTemplates]=\"form.controlTemplates\"\r\n\r\n              [controlTemplate]=\"form.controlTemplate\"\r\n              [labelTemplates]=\"form.labelTemplates\"\r\n              [inputTemplates]=\"form.inputTemplates\"\r\n              [prefixTemplates]=\"form.prefixTemplates\"\r\n              [suffixTemplates]=\"form.suffixTemplates\"\r\n              [setPrefixTemplates]=\"form.setPrefixTemplates\"\r\n              [setSuffixTemplates]=\"form.setSuffixTemplates\"\r\n\r\n              #subForm>\r\n    <ng-template #wrapperTemplate let-form=\"form\" let-fieldSetsTemplate=\"fieldSetsTemplate\">\r\n        <ng-container [ngTemplateOutlet]=\"fieldSetsTemplate\"></ng-container>\r\n    </ng-template>\r\n</dynamic-form>\r\n"
+            },] }
+];
+DynamicFormModelComponent.propDecorators = {
+    subForm: [{ type: ViewChild, args: ["subForm",] }]
+};
+
+class DynamicFormGroupDirective {
+    constructor(vcr, forms) {
+        this.vcr = vcr;
+        this.forms = forms;
+    }
+    get component() {
+        return this.comp;
+    }
+    ngOnChanges(changes) {
+        if (changes.control || changes.form || changes.visible) {
+            if (!this.visible) {
+                this.vcr.clear();
+                this.comp = null;
+                return;
+            }
+            this.comp = this.forms.createGroup(this.vcr);
+        }
+        if (!this.comp)
+            return;
+        this.comp.form = this.form;
+        this.comp.control = this.control;
+    }
+}
+DynamicFormGroupDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[form-group]",
+            },] }
+];
+DynamicFormGroupDirective.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: DynamicFormService }
+];
+DynamicFormGroupDirective.propDecorators = {
+    control: [{ type: Input, args: ["form-group",] }],
+    form: [{ type: Input }],
+    visible: [{ type: Input }]
+};
+
 // --- Components ---
 const components = [
-    DynamicBaseFormComponent,
-    DynamicBaseFormControlContainerComponent
+    DynamicFormsComponent,
+    DynamicFormComponent,
+    DynamicFormGroupComponent,
+    DynamicFormFileComponent,
+    DynamicFormInputComponent,
+    DynamicFormSelectComponent,
+    DynamicFormStaticComponent,
+    DynamicFormModelComponent
 ];
 // --- Directives ---
 const directives = [
     AsyncSubmitDirective,
+    DynamicFormControlDirective,
+    DynamicFormGroupDirective,
+    DynamicFormTemplateDirective
 ];
 // --- Pipes ---
 const pipes = [];
-const ɵ0$1 = validateJSON, ɵ1 = validateRequiredTranslation, ɵ2 = validatePhone, ɵ3 = new Map([
-    ["validateJSON", validateJSON],
-    ["validateRequiredTranslation", validateRequiredTranslation],
-    ["validatePhone", validatePhone],
-]);
 class NgxDynamicFormModule {
-    static forRoot() {
+    static forRoot(controlProviders, groupProvider) {
         return {
             ngModule: NgxDynamicFormModule,
             providers: [
                 DynamicFormService,
-                DynamicFormValidationService,
-                {
-                    provide: DynamicFormService$1,
-                    useExisting: DynamicFormService
-                },
-                {
-                    provide: DynamicFormValidationService$1,
-                    useExisting: DynamicFormValidationService
-                }
+                OpenApiService,
+                provideFormControl(DynamicFormFileComponent, DynamicFormFileComponent.acceptor, DynamicFormFileComponent.loader),
+                provideFormControl(DynamicFormInputComponent, DynamicFormInputComponent.acceptor, DynamicFormInputComponent.loader),
+                provideFormControl(DynamicFormSelectComponent, DynamicFormSelectComponent.acceptor, DynamicFormSelectComponent.loader),
+                provideFormControl(DynamicFormStaticComponent, DynamicFormStaticComponent.acceptor, DynamicFormStaticComponent.loader),
+                provideFormControl(DynamicFormModelComponent, DynamicFormModelComponent.acceptor, DynamicFormModelComponent.loader),
+                ...(controlProviders || []),
+                groupProvider || provideFormGroup(DynamicFormGroupComponent)
             ]
         };
     }
@@ -946,16 +1719,7 @@ NgxDynamicFormModule.decorators = [
                     NgxUtilsModule
                 ],
                 entryComponents: components,
-                providers: [
-                    ...pipes,
-                    { provide: NG_VALIDATORS, useValue: ɵ0$1, multi: true },
-                    { provide: NG_VALIDATORS, useValue: ɵ1, multi: true },
-                    { provide: NG_VALIDATORS, useValue: ɵ2, multi: true },
-                    {
-                        provide: DYNAMIC_VALIDATORS,
-                        useValue: ɵ3
-                    }
-                ]
+                providers: pipes
             },] }
 ];
 
@@ -963,5 +1727,5 @@ NgxDynamicFormModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicBaseFormComponent, DynamicBaseFormControlContainerComponent, DynamicFormService, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormSubject, NgxDynamicFormModule, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, validateJSON, validatePhone, validateRequiredTranslation, components as ɵa, directives as ɵb, pipes as ɵc, DynamicFormValidationService as ɵd };
+export { AsyncSubmitDirective, DynamicFormBaseComponent, DynamicFormComponent, DynamicFormControl, DynamicFormControlDirective, DynamicFormFileComponent, DynamicFormGroup, DynamicFormGroupComponent, DynamicFormInputComponent, DynamicFormModelComponent, DynamicFormSelectComponent, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormsComponent, FORM_CONTROL_PROVIDER, FormControlComponent, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormUtilities, NgxDynamicFormModule, OpenApiService, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, provideFormControl, provideFormGroup, FORM_GROUP_TYPE as ɵa, components as ɵb, directives as ɵc, pipes as ɵd, DynamicFormGroupDirective as ɵe };
 //# sourceMappingURL=stemy-ngx-dynamic-form.js.map