@stemy/ngx-dynamic-form 12.0.0 → 12.0.2

package/bundles/stemy-ngx-dynamic-form.umd.js

@@ -315,16 +315,22 @@
 
     var FORM_GROUP_TYPE = new core.InjectionToken("form-group-provider");
     var FORM_CONTROL_PROVIDER = new core.InjectionToken("form-control-provider");
+    var DYNAMIC_FORM = new core.InjectionToken("dynamic-form-base");
     var FormControlComponent = /** @class */ (function () {
-        function FormControlComponent() {
+        function FormControlComponent(api, form, language, toaster) {
+            this.api = api;
+            this.form = form;
+            this.language = language;
+            this.toaster = toaster;
+            this.ctrInit();
         }
-        Object.defineProperty(FormControlComponent.prototype, "form", {
-            get: function () {
-                return !this.control ? null : this.control.form;
-            },
-            enumerable: false,
-            configurable: true
-        });
+        FormControlComponent.prototype.ctrInit = function () {
+        };
+        FormControlComponent.prototype.ngOnInit = function () {
+            if (!this.control)
+                return;
+            this.control.form = this.form;
+        };
         Object.defineProperty(FormControlComponent.prototype, "data", {
             get: function () {
                 return (!this.control ? {} : this.control.data);
@@ -346,6 +352,15 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(FormControlComponent.prototype, "testId", {
+            get: function () {
+                var _a, _b;
+                var prefix = ((_a = this.form) === null || _a === void 0 ? void 0 : _a.testId) || "form";
+                return prefix + "-" + (((_b = this.control) === null || _b === void 0 ? void 0 : _b.id) || "ctrl");
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(FormControlComponent.prototype, "inputClass", {
             get: function () {
                 return true;
@@ -358,6 +373,12 @@
     FormControlComponent.decorators = [
         { type: core.Directive }
     ];
+    FormControlComponent.ctorParameters = function () { return [
+        { type: ngxUtils.ApiService },
+        { type: undefined, decorators: [{ type: core.Inject, args: [DYNAMIC_FORM,] }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.LANGUAGE_SERVICE,] }] },
+        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.TOASTER_SERVICE,] }] }
+    ]; };
     FormControlComponent.propDecorators = {
         inputClass: [{ type: core.HostBinding, args: ["class.form-input",] }]
     };
@@ -792,6 +813,7 @@
             _this.control = control;
             _this.group = group;
             _this.group.addControl(control.id, _this);
+            _this.form = _this.group.form;
             _this.helper = new DynamicFormControlHelper(_this.form, control);
             _this.helper.findProvider(_this);
             _this.valueChanges.subscribe(function () { return _this.group.updateModel(_this); });
@@ -833,13 +855,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DynamicFormControl.prototype, "form", {
-            get: function () {
-                return this.group.form;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(DynamicFormControl.prototype, "injector", {
             get: function () {
                 return this.form.injector;
@@ -1516,10 +1531,52 @@
         innerFormSuffix: [{ type: core.Input }]
     };
 
+    var DynamicFormGroupDirective = /** @class */ (function () {
+        function DynamicFormGroupDirective(vcr, forms) {
+            this.vcr = vcr;
+            this.forms = forms;
+        }
+        Object.defineProperty(DynamicFormGroupDirective.prototype, "component", {
+            get: function () {
+                return this.comp;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DynamicFormGroupDirective.prototype.ngOnChanges = function (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.control = this.control;
+        };
+        return DynamicFormGroupDirective;
+    }());
+    DynamicFormGroupDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: "[form-group]",
+                },] }
+    ];
+    DynamicFormGroupDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: DynamicFormService }
+    ]; };
+    DynamicFormGroupDirective.propDecorators = {
+        control: [{ type: core.Input, args: ["form-group",] }],
+        visible: [{ type: core.Input }]
+    };
+
     var DynamicFormBaseComponent = /** @class */ (function () {
         function DynamicFormBaseComponent(cdr, formService) {
             this.formService = formService;
             this.name = "";
+            this.testId = "form";
             this.controlTemplates = {};
             this.labelTemplates = {};
             this.inputTemplates = {};
@@ -1578,6 +1635,7 @@
     ]; };
     DynamicFormBaseComponent.propDecorators = {
         name: [{ type: core.Input }],
+        testId: [{ type: core.Input }],
         readonly: [{ type: core.Input }],
         updateOn: [{ type: core.Input }],
         classes: [{ type: core.Input }],
@@ -1689,8 +1747,17 @@
         { type: core.Component, args: [{
                     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 }]
+                    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\">\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
+                        },
+                        {
+                            provide: DYNAMIC_FORM,
+                            useExisting: DynamicFormComponent
+                        }
+                    ]
                 },] }
     ];
     DynamicFormComponent.ctorParameters = function () { return [
@@ -1831,8 +1898,17 @@
         { type: core.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 }]
+                    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                 [testId]=\"testId + '-' + (config.testId || 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                 [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             [testId]=\"testId + '-' + (config.testId || 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
+                        },
+                        {
+                            provide: DYNAMIC_FORM,
+                            useExisting: DynamicFormsComponent
+                        }
+                    ]
                 },] }
     ];
     DynamicFormsComponent.ctorParameters = function () { return [
@@ -1851,7 +1927,8 @@
     };
 
     var DynamicFormGroupComponent = /** @class */ (function () {
-        function DynamicFormGroupComponent() {
+        function DynamicFormGroupComponent(form) {
+            this.form = form;
         }
         Object.defineProperty(DynamicFormGroupComponent.prototype, "classes", {
             get: function () {
@@ -1871,18 +1948,17 @@
                     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.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: core.Inject, args: [DYNAMIC_FORM,] }] }
+    ]; };
     DynamicFormGroupComponent.propDecorators = {
         classes: [{ type: core.HostBinding, args: ["class",] }]
     };
 
     var DynamicFormFileComponent = /** @class */ (function (_super) {
         __extends(DynamicFormFileComponent, _super);
-        function DynamicFormFileComponent(api, toaster) {
-            var _this = _super.call(this) || this;
-            _this.api = api;
-            _this.toaster = toaster;
-            _this.fileImageCache = [];
-            return _this;
+        function DynamicFormFileComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
         // Acceptor for provider
         DynamicFormFileComponent.acceptor = function (control) {
@@ -1892,6 +1968,9 @@
         DynamicFormFileComponent.loader = function () {
             return Promise.resolve();
         };
+        DynamicFormFileComponent.prototype.ctrInit = function () {
+            this.fileImageCache = [];
+        };
         DynamicFormFileComponent.prototype.onSelect = function (input) {
             this.processFiles(input.files);
             input.value = "";
@@ -1979,21 +2058,15 @@
     DynamicFormFileComponent.decorators = [
         { type: core.Component, args: [{
                     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",
+                    template: "<div class=\"upload\">\r\n    <input type=\"file\"\r\n           multiple=\"multiple\"\r\n           [attr.data-testid]=\"testId\"\r\n           [attr.accept]=\"data.accept\"\r\n           (change)=\"onSelect($event.target)\" />\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"]
                 },] }
-    ];
-    DynamicFormFileComponent.ctorParameters = function () { return [
-        { type: ngxUtils.ApiService },
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.TOASTER_SERVICE,] }] }
-    ]; };
+    ];
 
     var DynamicFormInputComponent = /** @class */ (function (_super) {
         __extends(DynamicFormInputComponent, _super);
-        function DynamicFormInputComponent(language) {
-            var _this = _super.call(this) || this;
-            _this.language = language;
-            return _this;
+        function DynamicFormInputComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
         // Acceptor for provider
         DynamicFormInputComponent.acceptor = function (control) {
@@ -2052,12 +2125,9 @@
         { type: core.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"
+                    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                  [attr.data-testid]=\"testId\"\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               [attr.data-testid]=\"testId\"\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               [attr.data-testid]=\"testId\"\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               [attr.data-testid]=\"testId\"\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               [attr.data-testid]=\"testId\"\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               [attr.data-testid]=\"testId\"\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"
                 },] }
     ];
-    DynamicFormInputComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [ngxUtils.LANGUAGE_SERVICE,] }] }
-    ]; };
     DynamicFormInputComponent.propDecorators = {
         isChecked: [{ type: core.HostBinding, args: ["class.checked",] }]
     };
@@ -2133,7 +2203,7 @@
         { type: core.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"
+                    template: "<ng-template #selectTemplate let-selected=\"selected\">\r\n    <select class=\"form-control\"\r\n            [attr.data-testid]=\"testId\"\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                           [attr.data-testid]=\"testId + '-' + option.id\"\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                           [attr.data-testid]=\"testId + '-' + option.id\"\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"
                 },] }
     ];
 
@@ -2179,56 +2249,13 @@
         { type: core.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"
+                    template: "<dynamic-form [testId]=\"form.testId + '-' + control.id\"\r\n              [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: core.ViewChild, args: ["subForm",] }]
     };
 
-    var DynamicFormGroupDirective = /** @class */ (function () {
-        function DynamicFormGroupDirective(vcr, forms) {
-            this.vcr = vcr;
-            this.forms = forms;
-        }
-        Object.defineProperty(DynamicFormGroupDirective.prototype, "component", {
-            get: function () {
-                return this.comp;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DynamicFormGroupDirective.prototype.ngOnChanges = function (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;
-        };
-        return DynamicFormGroupDirective;
-    }());
-    DynamicFormGroupDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: "[form-group]",
-                },] }
-    ];
-    DynamicFormGroupDirective.ctorParameters = function () { return [
-        { type: core.ViewContainerRef },
-        { type: DynamicFormService }
-    ]; };
-    DynamicFormGroupDirective.propDecorators = {
-        control: [{ type: core.Input, args: ["form-group",] }],
-        form: [{ type: core.Input }],
-        visible: [{ type: core.Input }]
-    };
-
     // --- Components ---
     var components = [
         DynamicFormsComponent,
@@ -2294,6 +2321,7 @@
      */
 
     exports.AsyncSubmitDirective = AsyncSubmitDirective;
+    exports.DYNAMIC_FORM = DYNAMIC_FORM;
     exports.DynamicFormBaseComponent = DynamicFormBaseComponent;
     exports.DynamicFormComponent = DynamicFormComponent;
     exports.DynamicFormControl = DynamicFormControl;
@@ -2301,6 +2329,7 @@
     exports.DynamicFormFileComponent = DynamicFormFileComponent;
     exports.DynamicFormGroup = DynamicFormGroup;
     exports.DynamicFormGroupComponent = DynamicFormGroupComponent;
+    exports.DynamicFormGroupDirective = DynamicFormGroupDirective;
     exports.DynamicFormInputComponent = DynamicFormInputComponent;
     exports.DynamicFormModelComponent = DynamicFormModelComponent;
     exports.DynamicFormSelectComponent = DynamicFormSelectComponent;
@@ -2336,7 +2365,6 @@
     exports["ɵb"] = components;
     exports["ɵc"] = directives;
     exports["ɵd"] = pipes;
-    exports["ɵe"] = DynamicFormGroupDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });