@stemy/ngx-dynamic-form 10.2.16 → 10.2.20

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

@@ -2,943 +2,966 @@ import { ReflectUtils, ObjectUtils, UniqueUtils, StringUtils, OpenApiService, TO
 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 { DynamicFormService as DynamicFormService$1, DynamicSelectModel, DynamicFormArrayModel, DynamicFormGroupModel, DynamicFileUploadModel, DynamicInputModel, 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 { 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 { first } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 
-// --- Decorator functions ---
-const emptyArray = [];
-const emptyTester = () => {
-    return Promise.resolve(false);
-};
-const ɵ0 = emptyTester;
-function defaultSerializer(id, parent) {
-    const control = parent.get(id);
-    return !control ? null : control.value;
-}
-function FormSerializable(serializer) {
-    return (target, propertyKey) => {
-        ReflectUtils.defineMetadata("dynamicFormSerializer", serializer || defaultSerializer, target, propertyKey);
-    };
-}
-function FormInput(data) {
-    return (target, propertyKey) => {
-        const meta = ReflectUtils.getOwnMetadata("design:type", target, propertyKey);
-        const type = meta ? meta.name : "";
-        let inputType = propertyKey.indexOf("password") < 0 ? "text" : "password";
-        switch (type) {
-            case "Number":
-                inputType = "number";
-                break;
-            case "Boolean":
-                inputType = "checkbox";
-                break;
-        }
-        defineFormControl(target, propertyKey, createFormInput(propertyKey, data, inputType));
-    };
-}
-function FormSelect(data) {
-    return (target, propertyKey) => {
-        defineFormControl(target, propertyKey, createFormSelect(propertyKey, data));
-    };
-}
-function FormStatic(data) {
-    return (target, propertyKey) => {
-        defineFormControl(target, propertyKey, createFormStatic(propertyKey, data));
-    };
-}
-function FormModel(data) {
-    return (target, propertyKey) => {
-        defineFormControl(target, propertyKey, createFormModel(propertyKey, data));
-    };
-}
-function FormFile(data) {
-    return (target, propertyKey) => {
-        defineFormControl(target, propertyKey, createFormFile(propertyKey, data));
-    };
-}
-function FormFieldSet(data) {
-    return (target) => {
-        const sets = getFormFieldSets(target);
-        data.classes = data.classes || "";
-        sets[data.id] = data;
-        ReflectUtils.defineMetadata("dynamicFormFieldSets", sets, target);
-    };
-}
-function defineFormControl(target, propertyKey, control) {
-    ReflectUtils.defineMetadata("dynamicFormControl", control, target, propertyKey);
-}
-function getFormFieldSets(target) {
-    return ReflectUtils.getMetadata("dynamicFormFieldSets", target) || {};
-}
-function getFormControl(target, propertyKey) {
-    return ReflectUtils.getMetadata("dynamicFormControl", target, propertyKey);
-}
-function getFormSerializer(target, propertyKey) {
-    return ReflectUtils.getMetadata("dynamicFormSerializer", target, propertyKey);
-}
-function createFormControl(id, type, data) {
-    data = data || {};
-    data.label = ObjectUtils.isNullOrUndefined(data.label) ? id : data.label;
-    data.labelAlign = data.labelAlign || "left";
-    data.fieldSet = data.fieldSet || UniqueUtils.uuid();
-    data.classes = data.classes || "";
-    data.readonly = data.readonly || emptyTester;
-    data.hidden = data.hidden || emptyTester;
-    data.validators = data.validators || emptyArray;
-    return {
-        id: id,
-        type: type,
-        data: data
-    };
-}
-function createFormInput(id, data, type = "text") {
-    const control = createFormControl(id, "input", data);
-    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.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.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}`;
-    return control;
-}
-function createFormStatic(id, data) {
-    const control = createFormControl(id, "static", data);
-    data = control.data;
-    data.style = data.style || "table";
-    return control;
-}
-function createFormModel(id, data) {
-    const control = createFormControl(id, "model", data);
-    data = control.data;
-    data.name = data.name || "";
-    return control;
-}
-function createFormFile(id, data) {
-    const control = createFormControl(id, "file", data);
-    data = control.data;
-    data.accept = data.accept || ".jpg,.jpeg,.png";
-    data.multi = data.multi || false;
-    data.baseUrl = ObjectUtils.isString(data.baseUrl) ? data.baseUrl : "assets/";
-    data.uploadUrl = ObjectUtils.isString(data.uploadUrl) ? data.uploadUrl : "assets";
-    data.createUploadData = data.createUploadData || ((file) => {
-        const form = new FormData();
-        form.append("file", file);
-        return form;
-    });
-    return control;
+// --- Decorator functions ---
+const emptyArray = [];
+const emptyTester = () => {
+    return Promise.resolve(false);
+};
+const ɵ0 = emptyTester;
+function defaultSerializer(id, parent) {
+    const control = parent.get(id);
+    return !control ? null : control.value;
+}
+function FormSerializable(serializer) {
+    return (target, propertyKey) => {
+        ReflectUtils.defineMetadata("dynamicFormSerializer", serializer || defaultSerializer, target, propertyKey);
+    };
+}
+function FormInput(data) {
+    return (target, propertyKey) => {
+        const meta = ReflectUtils.getOwnMetadata("design:type", target, propertyKey);
+        const type = meta ? meta.name : "";
+        let inputType = propertyKey.indexOf("password") < 0 ? "text" : "password";
+        switch (type) {
+            case "Number":
+                inputType = "number";
+                break;
+            case "Boolean":
+                inputType = "checkbox";
+                break;
+        }
+        defineFormControl(target, propertyKey, createFormInput(propertyKey, data, inputType));
+    };
+}
+function FormSelect(data) {
+    return (target, propertyKey) => {
+        defineFormControl(target, propertyKey, createFormSelect(propertyKey, data));
+    };
+}
+function FormStatic(data) {
+    return (target, propertyKey) => {
+        defineFormControl(target, propertyKey, createFormStatic(propertyKey, data));
+    };
+}
+function FormModel(data) {
+    return (target, propertyKey) => {
+        defineFormControl(target, propertyKey, createFormModel(propertyKey, data));
+    };
+}
+function FormFile(data) {
+    return (target, propertyKey) => {
+        defineFormControl(target, propertyKey, createFormFile(propertyKey, data));
+    };
+}
+function FormFieldSet(data) {
+    return (target) => {
+        const sets = getFormFieldSets(target);
+        data.classes = data.classes || "";
+        sets[data.id] = data;
+        ReflectUtils.defineMetadata("dynamicFormFieldSets", sets, target);
+    };
+}
+function defineFormControl(target, propertyKey, control) {
+    ReflectUtils.defineMetadata("dynamicFormControl", control, target, propertyKey);
+}
+function getFormFieldSets(target) {
+    return ReflectUtils.getMetadata("dynamicFormFieldSets", target) || {};
+}
+function getFormControl(target, propertyKey) {
+    return ReflectUtils.getMetadata("dynamicFormControl", target, propertyKey);
+}
+function getFormSerializer(target, propertyKey) {
+    return ReflectUtils.getMetadata("dynamicFormSerializer", target, propertyKey);
+}
+function createFormControl(id, type, data) {
+    data = data || {};
+    data.label = ObjectUtils.isNullOrUndefined(data.label) ? id : data.label;
+    data.labelAlign = data.labelAlign || "left";
+    data.fieldSet = data.fieldSet || UniqueUtils.uuid();
+    data.classes = data.classes || "";
+    data.readonly = data.readonly || emptyTester;
+    data.hidden = data.hidden || emptyTester;
+    data.validators = data.validators || emptyArray;
+    return {
+        id: id,
+        type: type,
+        data: data
+    };
+}
+function createFormInput(id, data, type = "text") {
+    const control = createFormControl(id, "input", data);
+    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.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.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}`;
+    return control;
+}
+function createFormStatic(id, data) {
+    const control = createFormControl(id, "static", data);
+    data = control.data;
+    data.style = data.style || "table";
+    return control;
+}
+function createFormModel(id, data) {
+    const control = createFormControl(id, "model", data);
+    data = control.data;
+    data.name = data.name || "";
+    return control;
+}
+function createFormFile(id, data) {
+    const control = createFormControl(id, "file", data);
+    data = control.data;
+    data.accept = data.accept || ".jpg,.jpeg,.png";
+    data.multi = data.multi || false;
+    data.baseUrl = ObjectUtils.isString(data.baseUrl) ? data.baseUrl : "assets/";
+    data.uploadUrl = ObjectUtils.isString(data.uploadUrl) ? data.uploadUrl : "assets";
+    data.createUploadData = data.createUploadData || ((file) => {
+        const form = new FormData();
+        form.append("file", file);
+        return form;
+    });
+    return control;
 }
 
-function validateJSON(control) {
-    const value = control.value;
-    if (!value)
-        return null;
-    try {
-        JSON.parse(value);
-        return null;
-    }
-    catch (e) {
-        return { json: true };
-    }
-}
-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 };
+function validateJSON(control) {
+    const value = control.value;
+    if (!value)
+        return null;
+    try {
+        JSON.parse(value);
+        return null;
+    }
+    catch (e) {
+        return { json: true };
+    }
+}
+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 };
 }
 
-class FormSubject extends Subject {
-    constructor(notifyCallback) {
-        super();
-        this.notifyCallback = notifyCallback;
-    }
-    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);
-        });
-    }
+class FormSubject extends Subject {
+    constructor(notifyCallback) {
+        super();
+        this.notifyCallback = notifyCallback;
+    }
+    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);
+        });
+    }
 }
 
-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);
-                }
-            }
-        }
-    }
-    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) {
-                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;
-        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) {
-                    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;
-                }
-                result[subModel.id] = subControl.value;
-            }
-            return result;
-        });
-    }
-    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) {
-                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;
-            }
-            if (subModel instanceof DynamicFormGroupModel) {
-                this.notifyChangesRecursive(subModel.group, subControl);
-                continue;
-            }
-            this.updateSelectOptions(subModel, subControl);
-        }
-    }
-    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);
-            }
-        });
-    }
-    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]);
-        });
-    }
-    getFormModelForSchemaDef(schema) {
-        if (!schema)
-            return [];
-        return Object.keys(schema.properties || {}).map(p => {
-            const property = schema.properties[p];
-            return this.getFormControlModel(property, schema);
-        }).filter(t => null !== t);
-    }
-    getFormControlModel(property, schema) {
-        var _a, _b;
-        if (Array.isArray(property.enum) || ObjectUtils.isString(property.optionsPath)) {
-            return new DynamicSelectModel(this.getFormSelectConfig(property, schema));
-        }
-        switch (property.type) {
-            case "string":
-            case "number":
-                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 "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));
-                }
-            case "file":
-                return new DynamicFileUploadModel(this.getFormUploadConfig(property, schema));
-        }
-        if (property.$ref) {
-            return new DynamicFormGroupModel(this.getFormGroupConfig(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;
-        }, {});
-        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)
-        };
-    }
-    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) {
-            case "boolean":
-                inputType = "checkbox";
-                break;
-            case "textarea":
-                inputType = "textarea";
-                break;
-        }
-        return Object.assign(this.getFormControlConfig(property, schema), {
-            inputType,
-            autoComplete: property.autoComplete || "off",
-            multiple: property.type == "array"
-        });
-    }
-    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"
-        });
-    }
-    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);
-            }
-            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 };
-                });
-            });
-            const options = (yield this.api.cache[property.endpoint]).map(t => Object.assign({}, t));
-            return this.translateOptions(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
-        });
-    }
-    getValidators(property, schema) {
-        const validators = {};
-        if (schema.required.indexOf(property.id) >= 0) {
-            validators.required = null;
-        }
-        if (property.minLength) {
-            validators.minLength = property.minLength;
-        }
-        if (property.maxLength) {
-            validators.maxLength = property.maxLength;
-        }
-        if (property.min) {
-            validators.min = property.min;
-        }
-        if (property.max) {
-            validators.max = property.max;
-        }
-        switch (property.format) {
-            case "email":
-                validators.email = null;
-                break;
-        }
-        return validators;
-    }
+class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
+    constructor(config, layout) {
+        super(config, layout);
+        this.additional = config.additional || {};
+    }
 }
-DynamicFormService.decorators = [
-    { type: Injectable }
-];
-DynamicFormService.ctorParameters = () => [
-    { type: DynamicFormComponentService },
-    { type: DynamicFormValidationService$1 },
-    { type: OpenApiService }
-];
 
-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")
-            return;
-        renderer.setAttribute(elem.nativeElement, "type", "button");
-    }
-    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.cdr.detectChanges();
-        this.onStatusChange = this.form.onStatusChange.subscribe(() => {
-            this.isDisabled = this.form.status !== "VALID";
-            this.cdr.detectChanges();
-            if (!this.callback || this.form.status == "PENDING")
-                return;
-            if (!this.disabled) {
-                this.callback();
-            }
-            this.callback = null;
-        });
-        this.onSubmit = this.form.onSubmit.subscribe(() => this.callMethod());
-    }
-    ngOnDestroy() {
-        if (this.onStatusChange)
-            this.onStatusChange.unsubscribe();
-        if (this.onSubmit)
-            this.onSubmit.unsubscribe();
-    }
-    click() {
-        this.callback = () => this.callMethod();
-        if (this.form.status !== "VALID" && this.form.status !== "INVALID")
-            return;
-        this.callback();
-        this.callback = null;
-    }
-    callMethod() {
-        if (this.loading)
-            return;
-        this.loading = true;
-        this.method(this.form, this.context).then(result => {
-            this.loading = false;
-            if (result) {
-                this.onSuccess.emit(result);
-                this.toaster.success(result.message, result.context);
-            }
-        }, reason => {
-            if (!reason || !reason.message)
-                throw new Error("Reason must implement IAsyncMessage interface");
-            this.loading = false;
-            this.onError.emit(reason);
-            this.toaster.error(reason.message, reason.context);
-        });
-    }
-}
-AsyncSubmitDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[async-submit]",
-                exportAs: "async-submit"
-            },] }
+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);
+                }
+            }
+        }
+    }
+    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;
+        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"
+                        ? parseFloat((`${subControl.value}` || "0").replace(/,/gi, ".")) || null
+                        : subControl.value;
+                    continue;
+                }
+                result[subModel.id] = subControl.value;
+            }
+            return result;
+        });
+    }
+    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;
+            }
+            if (subModel instanceof DynamicFormGroupModel) {
+                this.notifyChangesRecursive(subModel.group, subControl);
+                continue;
+            }
+            this.updateSelectOptions(subModel, subControl);
+        }
+    }
+    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);
+            }
+        });
+    }
+    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]);
+        });
+    }
+    getFormModelForSchemaDef(schema) {
+        if (!schema)
+            return [];
+        return Object.keys(schema.properties || {}).map(p => {
+            const property = schema.properties[p];
+            return this.getFormControlModel(property, schema);
+        }).filter(t => null !== t);
+    }
+    getFormControlModel(property, schema) {
+        var _a, _b;
+        if (Array.isArray(property.enum) || ObjectUtils.isString(property.optionsPath)) {
+            return new DynamicSelectModel(this.getFormSelectConfig(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 "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));
+                }
+            case "file":
+                return new DynamicFileUploadModel(this.getFormUploadConfig(property, schema));
+        }
+        if (property.$ref) {
+            return new DynamicFormGroupModel(this.getFormGroupConfig(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;
+        }, {});
+        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)
+        };
+    }
+    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) {
+            case "boolean":
+                inputType = "checkbox";
+                break;
+            case "textarea":
+                inputType = "textarea";
+                break;
+            case "integer":
+                inputType = "number";
+                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"
+        });
+    }
+    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);
+            }
+            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 };
+                });
+            });
+            const options = (yield this.api.cache[property.endpoint]).map(t => Object.assign({}, t));
+            return this.translateOptions(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
+        });
+    }
+    getValidators(property, schema) {
+        const validators = {};
+        if (ObjectUtils.isArray(schema.required) && schema.required.indexOf(property.id) >= 0) {
+            validators.required = null;
+        }
+        if (property.minLength) {
+            validators.minLength = property.minLength;
+        }
+        if (property.maxLength) {
+            validators.maxLength = property.maxLength;
+        }
+        if (property.min) {
+            validators.min = property.min;
+        }
+        if (property.max) {
+            validators.max = property.max;
+        }
+        switch (property.format) {
+            case "email":
+                validators.email = null;
+                break;
+        }
+        return validators;
+    }
+}
+DynamicFormService.decorators = [
+    { type: Injectable }
+];
+DynamicFormService.ctorParameters = () => [
+    { type: DynamicFormComponentService },
+    { type: DynamicFormValidationService$1 },
+    { type: OpenApiService }
 ];
-AsyncSubmitDirective.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] },
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-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",] }],
-    isLoading: [{ type: HostBinding, args: ["class.loading",] }],
-    click: [{ type: HostListener, args: ["click",] }]
+
+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")
+            return;
+        renderer.setAttribute(elem.nativeElement, "type", "button");
+    }
+    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.cdr.detectChanges();
+        this.onStatusChange = this.form.onStatusChange.subscribe(() => {
+            this.isDisabled = this.form.status !== "VALID";
+            this.cdr.detectChanges();
+            if (!this.callback || this.form.status == "PENDING")
+                return;
+            if (!this.disabled) {
+                this.callback();
+            }
+            this.callback = null;
+        });
+        this.onSubmit = this.form.onSubmit.subscribe(() => this.callMethod());
+    }
+    ngOnDestroy() {
+        if (this.onStatusChange)
+            this.onStatusChange.unsubscribe();
+        if (this.onSubmit)
+            this.onSubmit.unsubscribe();
+    }
+    click() {
+        this.callback = () => this.callMethod();
+        if (this.form.status !== "VALID" && this.form.status !== "INVALID")
+            return;
+        this.callback();
+        this.callback = null;
+    }
+    callMethod() {
+        if (this.loading)
+            return;
+        this.loading = true;
+        this.method(this.form, this.context).then(result => {
+            this.loading = false;
+            if (result) {
+                this.onSuccess.emit(result);
+                this.toaster.success(result.message, result.context);
+            }
+        }, reason => {
+            if (!reason || !reason.message)
+                throw new Error("Reason must implement IAsyncMessage interface");
+            this.loading = false;
+            this.onError.emit(reason);
+            this.toaster.error(reason.message, reason.context);
+        });
+    }
+}
+AsyncSubmitDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[async-submit]",
+                exportAs: "async-submit"
+            },] }
+];
+AsyncSubmitDirective.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [TOASTER_SERVICE,] }] },
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+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",] }],
+    isLoading: [{ type: HostBinding, args: ["class.loading",] }],
+    click: [{ type: HostListener, args: ["click",] }]
 };
 
-class DynamicBaseFormComponent extends DynamicFormComponent {
-    constructor(formService, events, changeDetectorRef, componentService) {
-        super(changeDetectorRef, componentService);
-        this.formService = formService;
-        this.events = events;
-        this.blur = new EventEmitter();
-        this.change = new EventEmitter();
-        this.focus = new EventEmitter();
-        this.onStatusChange = new EventEmitter();
-        this.onValueChange = 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;
-    }
-    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);
-            }));
-        }
-    }
-    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);
-        }));
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.subscription.unsubscribe();
-        this.groupSubscription.unsubscribe();
-    }
-    insertFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.insertFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
-    }
-    removeFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.removeFormArrayGroup(index, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
-    }
-    moveFormArrayGroup(index, step, formArray, formArrayModel) {
-        this.formService.moveFormArrayGroup(index, step, formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
-    }
-    clearFormArray(formArray, formArrayModel) {
-        this.formService.clearFormArray(formArray, formArrayModel);
-        this.changeDetectorRef.detectChanges();
-    }
-    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 (status == "VALID") {
-                    resolve(null);
-                    return;
-                }
-                reject(null);
-            });
-            this.group.updateValueAndValidity();
-        });
-    }
-    serialize(validate) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.group)
-                return null;
-            if (validate) {
-                yield this.validate();
-            }
-            return yield this.formService.serialize(this.model, this.group);
-        });
-    }
-}
-DynamicBaseFormComponent.decorators = [
-    { type: Component, args: [{
-                selector: "dynamic-base-form",
-                template: "",
-                changeDetection: ChangeDetectionStrategy.Default
-            },] }
-];
-DynamicBaseFormComponent.ctorParameters = () => [
-    { type: DynamicFormService, decorators: [{ type: Inject, args: [DynamicFormService,] }] },
-    { type: EventsService, decorators: [{ type: Inject, args: [EventsService,] }] },
-    { type: ChangeDetectorRef },
-    { type: DynamicFormComponentService }
-];
-DynamicBaseFormComponent.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,] }]
+class DynamicBaseFormComponent extends DynamicFormComponent {
+    constructor(formService, events, changeDetectorRef, componentService) {
+        super(changeDetectorRef, componentService);
+        this.formService = formService;
+        this.events = events;
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.focus = new EventEmitter();
+        this.onStatusChange = new EventEmitter();
+        this.onValueChange = 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;
+    }
+    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);
+            }));
+        }
+    }
+    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);
+        }));
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.subscription.unsubscribe();
+        this.groupSubscription.unsubscribe();
+    }
+    insertFormArrayGroup(index, formArray, formArrayModel) {
+        this.formService.insertFormArrayGroup(index, formArray, formArrayModel);
+        this.changeDetectorRef.detectChanges();
+    }
+    removeFormArrayGroup(index, formArray, formArrayModel) {
+        this.formService.removeFormArrayGroup(index, formArray, formArrayModel);
+        this.changeDetectorRef.detectChanges();
+    }
+    moveFormArrayGroup(index, step, formArray, formArrayModel) {
+        this.formService.moveFormArrayGroup(index, step, formArray, formArrayModel);
+        this.changeDetectorRef.detectChanges();
+    }
+    clearFormArray(formArray, formArrayModel) {
+        this.formService.clearFormArray(formArray, formArrayModel);
+        this.changeDetectorRef.detectChanges();
+    }
+    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 (status == "VALID") {
+                    resolve(null);
+                    return;
+                }
+                reject(null);
+            });
+            this.group.updateValueAndValidity();
+        });
+    }
+    serialize(validate) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.group)
+                return null;
+            if (validate) {
+                yield this.validate();
+            }
+            return yield this.formService.serialize(this.model, this.group);
+        });
+    }
+}
+DynamicBaseFormComponent.decorators = [
+    { type: Component, args: [{
+                selector: "dynamic-base-form",
+                template: "",
+                changeDetection: ChangeDetectionStrategy.Default
+            },] }
+];
+DynamicBaseFormComponent.ctorParameters = () => [
+    { type: DynamicFormService, decorators: [{ type: Inject, args: [DynamicFormService,] }] },
+    { type: EventsService, decorators: [{ type: Inject, args: [EventsService,] }] },
+    { type: ChangeDetectorRef },
+    { type: DynamicFormComponentService }
+];
+DynamicBaseFormComponent.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,] }]
 };
 
-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;
-    }
-    ngOnInit() {
-        this.onDetectChanges = this.formService.onDetectChanges.subscribe(form => {
-            if (form !== this.form)
-                return;
-            this.changeDetectorRef.detectChanges();
-            this.formService.updateSelectOptions(this.model, this.control);
-        });
-    }
-    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))
-            return;
-        component.onCreated();
-    }
-    getComponentType(model) {
-        return null;
-    }
-}
-DynamicBaseFormControlContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: "dynamic-base-form-control",
-                template: "",
-                changeDetection: ChangeDetectionStrategy.OnPush
-            },] }
-];
-DynamicBaseFormControlContainerComponent.ctorParameters = () => [
-    { type: DynamicBaseFormComponent },
-    { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: DynamicFormLayoutService },
-    { type: DynamicFormValidationService$1 },
-    { type: DynamicFormComponentService },
-    { type: DynamicFormRelationService }
-];
-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 },] }]
+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;
+    }
+    ngOnInit() {
+        this.onDetectChanges = this.formService.onDetectChanges.subscribe(form => {
+            if (form !== this.form)
+                return;
+            this.changeDetectorRef.detectChanges();
+            this.formService.updateSelectOptions(this.model, this.control);
+        });
+    }
+    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))
+            return;
+        component.onCreated();
+    }
+    getComponentType(model) {
+        return null;
+    }
+}
+DynamicBaseFormControlContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: "dynamic-base-form-control",
+                template: "",
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DynamicBaseFormControlContainerComponent.ctorParameters = () => [
+    { type: DynamicBaseFormComponent },
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: DynamicFormLayoutService },
+    { type: DynamicFormValidationService$1 },
+    { type: DynamicFormComponentService },
+    { type: DynamicFormRelationService }
+];
+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 },] }]
 };
 
-class DynamicFormValidationService extends DynamicFormValidationService$1 {
-    showErrorMessages(control, model, hasFocus) {
-        return super.showErrorMessages(control, model, hasFocus);
-    }
-}
-DynamicFormValidationService.decorators = [
-    { type: Injectable }
+class DynamicFormValidationService extends DynamicFormValidationService$1 {
+    showErrorMessages(control, model, hasFocus) {
+        return super.showErrorMessages(control, model, hasFocus);
+    }
+}
+DynamicFormValidationService.decorators = [
+    { type: Injectable }
 ];
 
-// --- Components ---
-const components = [
-    DynamicBaseFormComponent,
-    DynamicBaseFormControlContainerComponent
-];
-// --- Directives ---
-const directives = [
-    AsyncSubmitDirective,
-];
-// --- Pipes ---
-const pipes = [];
-const ɵ0$1 = validateJSON, ɵ1 = validateRequiredTranslation, ɵ2 = validatePhone, ɵ3 = new Map([
-    ["validateJSON", validateJSON],
-    ["validateRequiredTranslation", validateRequiredTranslation],
-    ["validatePhone", validatePhone],
-]);
-class NgxDynamicFormModule {
-    static forRoot() {
-        return {
-            ngModule: NgxDynamicFormModule,
-            providers: [
-                DynamicFormService,
-                DynamicFormValidationService,
-                {
-                    provide: DynamicFormService$1,
-                    useExisting: DynamicFormService
-                },
-                {
-                    provide: DynamicFormValidationService$1,
-                    useExisting: DynamicFormValidationService
-                }
-            ]
-        };
-    }
-}
-NgxDynamicFormModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ...components,
-                    ...directives,
-                    ...pipes
-                ],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    NgxUtilsModule
-                ],
-                exports: [
-                    ...components,
-                    ...directives,
-                    ...pipes,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    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
-                    }
-                ]
-            },] }
+// --- Components ---
+const components = [
+    DynamicBaseFormComponent,
+    DynamicBaseFormControlContainerComponent
+];
+// --- Directives ---
+const directives = [
+    AsyncSubmitDirective,
+];
+// --- Pipes ---
+const pipes = [];
+const ɵ0$1 = validateJSON, ɵ1 = validateRequiredTranslation, ɵ2 = validatePhone, ɵ3 = new Map([
+    ["validateJSON", validateJSON],
+    ["validateRequiredTranslation", validateRequiredTranslation],
+    ["validatePhone", validatePhone],
+]);
+class NgxDynamicFormModule {
+    static forRoot() {
+        return {
+            ngModule: NgxDynamicFormModule,
+            providers: [
+                DynamicFormService,
+                DynamicFormValidationService,
+                {
+                    provide: DynamicFormService$1,
+                    useExisting: DynamicFormService
+                },
+                {
+                    provide: DynamicFormValidationService$1,
+                    useExisting: DynamicFormValidationService
+                }
+            ]
+        };
+    }
+}
+NgxDynamicFormModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ...components,
+                    ...directives,
+                    ...pipes
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    NgxUtilsModule
+                ],
+                exports: [
+                    ...components,
+                    ...directives,
+                    ...pipes,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    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
+                    }
+                ]
+            },] }
 ];
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * 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 };