mss-engine-forms
Version:
A simple typehead library developed by MSS development team to be used for dynamic forms
86 lines • 11.8 kB
JavaScript
import { Component, Input, ViewChild, ViewContainerRef } from "@angular/core";
import { DynamicInputComponent } from "./dynamic-input/dynamic-input.component";
import { DynamicSelectComponent } from "./dynamic-select/dynamic-select.component";
import { DynamicRadioComponent } from "./dynamic-radio/dynamic-radio.component";
import { DynamicCheckboxsComponent } from "./dynamic-checkboxs/dynamic-checkboxs.component";
import { DynamicFormTypes } from "../../_helpers/dynamic-form-type.enum";
import { DynamicTextareaComponent } from "./dynamic-textarea/dynamic-textarea.component";
import { DynamicSliderComponent } from "./dynamic-slider/dynamic-slider.component";
import { DynamicDateComponent } from "./dynamic-date/dynamic-date.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class DynamicFieldComponent {
constructor(formgroupDirective, cd) {
this.formgroupDirective = formgroupDirective;
this.cd = cd;
this.supportedDynamicComponents = [
{
name: DynamicFormTypes.TEXT,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.TEXTAREA,
component: DynamicTextareaComponent
},
{
name: DynamicFormTypes.NUMBER,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.PHONE,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.SELECT,
component: DynamicSelectComponent
},
{
name: DynamicFormTypes.RADIO,
component: DynamicRadioComponent
},
{
name: DynamicFormTypes.DATE,
component: DynamicDateComponent
},
{
name: DynamicFormTypes.CHECKBOX,
component: DynamicCheckboxsComponent
},
{
name: DynamicFormTypes.SLIDER,
component: DynamicSliderComponent
}
];
}
ngOnChanges() {
console.log({ DynamicFieldComponent: this.field });
if (this.dynamicInputContainer && this.field)
this.registerDynamicField();
}
ngAfterViewInit() {
this.registerDynamicField();
}
registerDynamicField() {
this.dynamicInputContainer.clear();
const componentInstance = this.getComponentByType(this.field.type);
const dynamicComponent = this.dynamicInputContainer.createComponent(componentInstance);
dynamicComponent.setInput('field', this.field);
this.cd.detectChanges();
}
getComponentByType(type) {
let componentDynamic = this.supportedDynamicComponents.find(c => c.name === type);
return componentDynamic?.component || DynamicInputComponent;
}
}
DynamicFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicFieldComponent, deps: [{ token: i1.FormGroupDirective }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicFieldComponent, selector: "app-field-input", inputs: { field: "field" }, viewQueries: [{ propertyName: "dynamicInputContainer", first: true, predicate: ["dynamicInputContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container #dynamicInputContainer>\n</ng-container>", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicFieldComponent, decorators: [{
type: Component,
args: [{ selector: 'app-field-input', template: "<ng-container #dynamicInputContainer>\n</ng-container>" }]
}], ctorParameters: function () { return [{ type: i1.FormGroupDirective }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dynamicInputContainer: [{
type: ViewChild,
args: ['dynamicInputContainer', { read: ViewContainerRef }]
}], field: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tc3MtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtZmllbGQvZHluYW1pYy1maWVsZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tc3MtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtZmllbGQvZHluYW1pYy1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBSUwsU0FBUyxFQUNULEtBQUssRUFHTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ25GLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQ2hGLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLGlEQUFpRCxDQUFDO0FBQzVGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ25GLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7QUFPN0UsTUFBTSxPQUFPLHFCQUFxQjtJQTRDaEMsWUFBb0Isa0JBQXNDLEVBQVUsRUFBcUI7UUFBckUsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQUFVLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBMUN6RiwrQkFBMEIsR0FBRztZQUMzQjtnQkFDRSxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsSUFBSTtnQkFDM0IsU0FBUyxFQUFFLHFCQUFxQjthQUNqQztZQUNEO2dCQUNFLElBQUksRUFBRSxnQkFBZ0IsQ0FBQyxRQUFRO2dCQUMvQixTQUFTLEVBQUUsd0JBQXdCO2FBQ3BDO1lBQ0Q7Z0JBQ0UsSUFBSSxFQUFFLGdCQUFnQixDQUFDLE1BQU07Z0JBQzdCLFNBQVMsRUFBRSxxQkFBcUI7YUFDakM7WUFDRDtnQkFDRSxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsS0FBSztnQkFDNUIsU0FBUyxFQUFFLHFCQUFxQjthQUNqQztZQUNEO2dCQUNFLElBQUksRUFBRSxnQkFBZ0IsQ0FBQyxNQUFNO2dCQUM3QixTQUFTLEVBQUUsc0JBQXNCO2FBQ2xDO1lBQ0Q7Z0JBQ0UsSUFBSSxFQUFFLGdCQUFnQixDQUFDLEtBQUs7Z0JBQzVCLFNBQVMsRUFBRSxxQkFBcUI7YUFDakM7WUFDRDtnQkFDRSxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsSUFBSTtnQkFDM0IsU0FBUyxFQUFFLG9CQUFvQjthQUNoQztZQUNEO2dCQUNFLElBQUksRUFBRSxnQkFBZ0IsQ0FBQyxRQUFRO2dCQUMvQixTQUFTLEVBQUUseUJBQXlCO2FBQ3JDO1lBQ0Q7Z0JBQ0UsSUFBSSxFQUFFLGdCQUFnQixDQUFDLE1BQU07Z0JBQzdCLFNBQVMsRUFBRSxzQkFBc0I7YUFDbEM7U0FDRixDQUFBO0lBT0QsQ0FBQztJQUNELFdBQVc7UUFDVCxPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUUscUJBQXFCLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUE7UUFDbEQsSUFBSSxJQUFJLENBQUMscUJBQXFCLElBQUksSUFBSSxDQUFDLEtBQUs7WUFBRSxJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztJQUM1RSxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFTyxvQkFBb0I7UUFDMUIsSUFBSSxDQUFDLHFCQUFxQixDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ25DLE1BQU0saUJBQWlCLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDbEUsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLENBQUE7UUFDdEYsZ0JBQWdCLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDL0MsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQsa0JBQWtCLENBQUMsSUFBWTtRQUM3QixJQUFJLGdCQUFnQixHQUFHLElBQUksQ0FBQywwQkFBMEIsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxDQUFDO1FBQ2xGLE9BQU8sZ0JBQWdCLEVBQUUsU0FBUyxJQUFJLHFCQUFxQixDQUFDO0lBQzlELENBQUM7O21IQW5FVSxxQkFBcUI7dUdBQXJCLHFCQUFxQiw4TEF3Q1ksZ0JBQWdCLGtEQ2xFOUQsd0RBQ2U7NEZEeUJGLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxpQkFBaUI7eUlBNENxQyxxQkFBcUI7c0JBQXBGLFNBQVM7dUJBQUMsdUJBQXVCLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBQ3JELEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWZcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEZvcm1Hcm91cCwgRm9ybUdyb3VwRGlyZWN0aXZlIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBEeW5hbWljSW5wdXRDb21wb25lbnQgfSBmcm9tIFwiLi9keW5hbWljLWlucHV0L2R5bmFtaWMtaW5wdXQuY29tcG9uZW50XCI7XG5pbXBvcnQgeyBEeW5hbWljU2VsZWN0Q29tcG9uZW50IH0gZnJvbSBcIi4vZHluYW1pYy1zZWxlY3QvZHluYW1pYy1zZWxlY3QuY29tcG9uZW50XCI7XG5pbXBvcnQgeyBEeW5hbWljUmFkaW9Db21wb25lbnQgfSBmcm9tIFwiLi9keW5hbWljLXJhZGlvL2R5bmFtaWMtcmFkaW8uY29tcG9uZW50XCI7XG5pbXBvcnQgeyBEeW5hbWljQ2hlY2tib3hzQ29tcG9uZW50IH0gZnJvbSBcIi4vZHluYW1pYy1jaGVja2JveHMvZHluYW1pYy1jaGVja2JveHMuY29tcG9uZW50XCI7XG5pbXBvcnQgeyBEeW5hbWljRm9ybVR5cGVzIH0gZnJvbSBcIi4uLy4uL19oZWxwZXJzL2R5bmFtaWMtZm9ybS10eXBlLmVudW1cIjtcbmltcG9ydCB7IER5bmFtaWNUZXh0YXJlYUNvbXBvbmVudCB9IGZyb20gXCIuL2R5bmFtaWMtdGV4dGFyZWEvZHluYW1pYy10ZXh0YXJlYS5jb21wb25lbnRcIjtcbmltcG9ydCB7IER5bmFtaWNTbGlkZXJDb21wb25lbnQgfSBmcm9tIFwiLi9keW5hbWljLXNsaWRlci9keW5hbWljLXNsaWRlci5jb21wb25lbnRcIjtcbmltcG9ydCB7IER5bmFtaWNEYXRlQ29tcG9uZW50IH0gZnJvbSBcIi4vZHluYW1pYy1kYXRlL2R5bmFtaWMtZGF0ZS5jb21wb25lbnRcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWZpZWxkLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2R5bmFtaWMtZmllbGQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9keW5hbWljLWZpZWxkLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRHluYW1pY0ZpZWxkQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzIHtcblxuICBzdXBwb3J0ZWREeW5hbWljQ29tcG9uZW50cyA9IFtcbiAgICB7XG4gICAgICBuYW1lOiBEeW5hbWljRm9ybVR5cGVzLlRFWFQsXG4gICAgICBjb21wb25lbnQ6IER5bmFtaWNJbnB1dENvbXBvbmVudFxuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogRHluYW1pY0Zvcm1UeXBlcy5URVhUQVJFQSxcbiAgICAgIGNvbXBvbmVudDogRHluYW1pY1RleHRhcmVhQ29tcG9uZW50XG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiBEeW5hbWljRm9ybVR5cGVzLk5VTUJFUixcbiAgICAgIGNvbXBvbmVudDogRHluYW1pY0lucHV0Q29tcG9uZW50XG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiBEeW5hbWljRm9ybVR5cGVzLlBIT05FLFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljSW5wdXRDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuU0VMRUNULFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljU2VsZWN0Q29tcG9uZW50XG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiBEeW5hbWljRm9ybVR5cGVzLlJBRElPLFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljUmFkaW9Db21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuREFURSxcbiAgICAgIGNvbXBvbmVudDogRHluYW1pY0RhdGVDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuQ0hFQ0tCT1gsXG4gICAgICBjb21wb25lbnQ6IER5bmFtaWNDaGVja2JveHNDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuU0xJREVSLFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljU2xpZGVyQ29tcG9uZW50XG4gICAgfVxuICBdXG4gIEBWaWV3Q2hpbGQoJ2R5bmFtaWNJbnB1dENvbnRhaW5lcicsIHsgcmVhZDogVmlld0NvbnRhaW5lclJlZiB9KSBkeW5hbWljSW5wdXRDb250YWluZXIhOiBWaWV3Q29udGFpbmVyUmVmO1xuICBASW5wdXQoKSBmaWVsZDogYW55O1xuICBmb3JtTmFtZTogYW55O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZm9ybWdyb3VwRGlyZWN0aXZlOiBGb3JtR3JvdXBEaXJlY3RpdmUsIHByaXZhdGUgY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7XG5cbiAgfVxuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICBjb25zb2xlLmxvZyh7IER5bmFtaWNGaWVsZENvbXBvbmVudDogdGhpcy5maWVsZCB9KVxuICAgIGlmICh0aGlzLmR5bmFtaWNJbnB1dENvbnRhaW5lciAmJiB0aGlzLmZpZWxkKSB0aGlzLnJlZ2lzdGVyRHluYW1pY0ZpZWxkKCk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5yZWdpc3RlckR5bmFtaWNGaWVsZCgpO1xuICB9XG5cbiAgcHJpdmF0ZSByZWdpc3RlckR5bmFtaWNGaWVsZCgpIHtcbiAgICB0aGlzLmR5bmFtaWNJbnB1dENvbnRhaW5lci5jbGVhcigpO1xuICAgIGNvbnN0IGNvbXBvbmVudEluc3RhbmNlID0gdGhpcy5nZXRDb21wb25lbnRCeVR5cGUodGhpcy5maWVsZC50eXBlKVxuICAgIGNvbnN0IGR5bmFtaWNDb21wb25lbnQgPSB0aGlzLmR5bmFtaWNJbnB1dENvbnRhaW5lci5jcmVhdGVDb21wb25lbnQoY29tcG9uZW50SW5zdGFuY2UpXG4gICAgZHluYW1pY0NvbXBvbmVudC5zZXRJbnB1dCgnZmllbGQnLCB0aGlzLmZpZWxkKTtcbiAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKTtcbiAgfVxuXG4gIGdldENvbXBvbmVudEJ5VHlwZSh0eXBlOiBzdHJpbmcpOiBhbnkge1xuICAgIGxldCBjb21wb25lbnREeW5hbWljID0gdGhpcy5zdXBwb3J0ZWREeW5hbWljQ29tcG9uZW50cy5maW5kKGMgPT4gYy5uYW1lID09PSB0eXBlKTtcbiAgICByZXR1cm4gY29tcG9uZW50RHluYW1pYz8uY29tcG9uZW50IHx8IER5bmFtaWNJbnB1dENvbXBvbmVudDtcbiAgfVxuXG59XG4iLCI8bmctY29udGFpbmVyICNkeW5hbWljSW5wdXRDb250YWluZXI+XG48L25nLWNvbnRhaW5lcj4iXX0=