mss-engine-forms
Version:
A simple typehead library developed by MSS development team to be used for dynamic forms
75 lines • 10.4 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 * 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.NUMBER,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.PHONE,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.SELECT,
component: DynamicSelectComponent
},
{
name: DynamicFormTypes.RADIO,
component: DynamicRadioComponent
},
{
name: DynamicFormTypes.DATE,
component: DynamicInputComponent
},
{
name: DynamicFormTypes.CHECKBOX,
component: DynamicCheckboxsComponent
}
];
}
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: "14.2.12", ngImport: i0, type: DynamicFieldComponent, deps: [{ token: i1.FormGroupDirective }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
DynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tc3MtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtZmllbGQvZHluYW1pYy1maWVsZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tc3MtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL2R5bmFtaWMtZmllbGQvZHluYW1pYy1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBSUwsU0FBUyxFQUNULEtBQUssRUFHTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHlDQUF5QyxDQUFDO0FBQzlFLE9BQU8sRUFBQyxzQkFBc0IsRUFBQyxNQUFNLDJDQUEyQyxDQUFDO0FBQ2pGLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHlDQUF5QyxDQUFDO0FBQzlFLE9BQU8sRUFBQyx5QkFBeUIsRUFBQyxNQUFNLGlEQUFpRCxDQUFDO0FBQzFGLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7QUFPekUsTUFBTSxPQUFPLHFCQUFxQjtJQW9DaEMsWUFBb0Isa0JBQXNDLEVBQVUsRUFBcUI7UUFBckUsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQUFVLE9BQUUsR0FBRixFQUFFLENBQW1CO1FBbEN6RiwrQkFBMEIsR0FBRztZQUMzQjtnQkFDRSxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsSUFBSTtnQkFDM0IsU0FBUyxFQUFFLHFCQUFxQjthQUNqQztZQUNEO2dCQUNFLElBQUksRUFBRSxnQkFBZ0IsQ0FBQyxNQUFNO2dCQUM3QixTQUFTLEVBQUUscUJBQXFCO2FBQ2pDO1lBQ0Q7Z0JBQ0UsSUFBSSxFQUFFLGdCQUFnQixDQUFDLEtBQUs7Z0JBQzVCLFNBQVMsRUFBRSxxQkFBcUI7YUFDakM7WUFDRDtnQkFDRSxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsTUFBTTtnQkFDN0IsU0FBUyxFQUFFLHNCQUFzQjthQUNsQztZQUNEO2dCQUNFLElBQUksRUFBRSxnQkFBZ0IsQ0FBQyxLQUFLO2dCQUM1QixTQUFTLEVBQUUscUJBQXFCO2FBQ2pDO1lBQ0Q7Z0JBQ0UsSUFBSSxFQUFFLGdCQUFnQixDQUFDLElBQUk7Z0JBQzNCLFNBQVMsRUFBRSxxQkFBcUI7YUFDakM7WUFDRDtnQkFDRSxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsUUFBUTtnQkFDL0IsU0FBUyxFQUFFLHlCQUF5QjthQUNyQztTQUNGLENBQUE7SUFPRCxDQUFDO0lBQ0QsV0FBVztRQUNULE9BQU8sQ0FBQyxHQUFHLENBQUMsRUFBQyxxQkFBcUIsRUFBQyxJQUFJLENBQUMsS0FBSyxFQUFDLENBQUMsQ0FBQTtRQUMvQyxJQUFHLElBQUksQ0FBQyxxQkFBcUIsSUFBSSxJQUFJLENBQUMsS0FBSztZQUFFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzNFLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7SUFDOUIsQ0FBQztJQUVPLG9CQUFvQjtRQUMxQixJQUFJLENBQUMscUJBQXFCLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDbkMsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUNsRSxNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxlQUFlLENBQUMsaUJBQWlCLENBQUMsQ0FBQTtRQUN0RixnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxJQUFZO1FBQzdCLElBQUksZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLDBCQUEwQixDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUM7UUFDbEYsT0FBTyxnQkFBZ0IsRUFBRSxTQUFTLElBQUkscUJBQXFCLENBQUM7SUFDOUQsQ0FBQzs7bUhBM0RVLHFCQUFxQjt1R0FBckIscUJBQXFCLDhMQWdDWSxnQkFBZ0Isa0RDdkQ5RCx3REFDZTs0RkRzQkYscUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLGlCQUFpQjt5SUFvQ29DLHFCQUFxQjtzQkFBbkYsU0FBUzt1QkFBQyx1QkFBdUIsRUFBRSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBQztnQkFDcEQsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0NvbnRhaW5lclJlZlxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHtGb3JtR3JvdXAsIEZvcm1Hcm91cERpcmVjdGl2ZX0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQge0R5bmFtaWNJbnB1dENvbXBvbmVudH0gZnJvbSBcIi4vZHluYW1pYy1pbnB1dC9keW5hbWljLWlucHV0LmNvbXBvbmVudFwiO1xuaW1wb3J0IHtEeW5hbWljU2VsZWN0Q29tcG9uZW50fSBmcm9tIFwiLi9keW5hbWljLXNlbGVjdC9keW5hbWljLXNlbGVjdC5jb21wb25lbnRcIjtcbmltcG9ydCB7RHluYW1pY1JhZGlvQ29tcG9uZW50fSBmcm9tIFwiLi9keW5hbWljLXJhZGlvL2R5bmFtaWMtcmFkaW8uY29tcG9uZW50XCI7XG5pbXBvcnQge0R5bmFtaWNDaGVja2JveHNDb21wb25lbnR9IGZyb20gXCIuL2R5bmFtaWMtY2hlY2tib3hzL2R5bmFtaWMtY2hlY2tib3hzLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgRHluYW1pY0Zvcm1UeXBlcyB9IGZyb20gXCIuLi8uLi9faGVscGVycy9keW5hbWljLWZvcm0tdHlwZS5lbnVtXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1maWVsZC1pbnB1dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9keW5hbWljLWZpZWxkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZHluYW1pYy1maWVsZC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIER5bmFtaWNGaWVsZENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uQ2hhbmdlcyB7XG5cbiAgc3VwcG9ydGVkRHluYW1pY0NvbXBvbmVudHMgPSBbXG4gICAge1xuICAgICAgbmFtZTogRHluYW1pY0Zvcm1UeXBlcy5URVhULFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljSW5wdXRDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuTlVNQkVSLFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljSW5wdXRDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuUEhPTkUsXG4gICAgICBjb21wb25lbnQ6IER5bmFtaWNJbnB1dENvbXBvbmVudFxuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogRHluYW1pY0Zvcm1UeXBlcy5TRUxFQ1QsXG4gICAgICBjb21wb25lbnQ6IER5bmFtaWNTZWxlY3RDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuUkFESU8sXG4gICAgICBjb21wb25lbnQ6IER5bmFtaWNSYWRpb0NvbXBvbmVudFxuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogRHluYW1pY0Zvcm1UeXBlcy5EQVRFLFxuICAgICAgY29tcG9uZW50OiBEeW5hbWljSW5wdXRDb21wb25lbnRcbiAgICB9LFxuICAgIHtcbiAgICAgIG5hbWU6IER5bmFtaWNGb3JtVHlwZXMuQ0hFQ0tCT1gsXG4gICAgICBjb21wb25lbnQ6IER5bmFtaWNDaGVja2JveHNDb21wb25lbnRcbiAgICB9XG4gIF1cbiAgQFZpZXdDaGlsZCgnZHluYW1pY0lucHV0Q29udGFpbmVyJywgeyByZWFkOiBWaWV3Q29udGFpbmVyUmVmfSkgZHluYW1pY0lucHV0Q29udGFpbmVyITogVmlld0NvbnRhaW5lclJlZjtcbiAgQElucHV0KCkgZmllbGQ6IGFueTtcbiAgZm9ybU5hbWU6IGFueTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGZvcm1ncm91cERpcmVjdGl2ZTogRm9ybUdyb3VwRGlyZWN0aXZlLCBwcml2YXRlIGNkOiBDaGFuZ2VEZXRlY3RvclJlZikge1xuXG4gIH1cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgY29uc29sZS5sb2coe0R5bmFtaWNGaWVsZENvbXBvbmVudDp0aGlzLmZpZWxkfSlcbiAgICBpZih0aGlzLmR5bmFtaWNJbnB1dENvbnRhaW5lciAmJiB0aGlzLmZpZWxkKSB0aGlzLnJlZ2lzdGVyRHluYW1pY0ZpZWxkKCk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5yZWdpc3RlckR5bmFtaWNGaWVsZCgpO1xuICB9XG5cbiAgcHJpdmF0ZSByZWdpc3RlckR5bmFtaWNGaWVsZCgpIHtcbiAgICB0aGlzLmR5bmFtaWNJbnB1dENvbnRhaW5lci5jbGVhcigpO1xuICAgIGNvbnN0IGNvbXBvbmVudEluc3RhbmNlID0gdGhpcy5nZXRDb21wb25lbnRCeVR5cGUodGhpcy5maWVsZC50eXBlKVxuICAgIGNvbnN0IGR5bmFtaWNDb21wb25lbnQgPSB0aGlzLmR5bmFtaWNJbnB1dENvbnRhaW5lci5jcmVhdGVDb21wb25lbnQoY29tcG9uZW50SW5zdGFuY2UpXG4gICAgZHluYW1pY0NvbXBvbmVudC5zZXRJbnB1dCgnZmllbGQnLCB0aGlzLmZpZWxkKTtcbiAgICB0aGlzLmNkLmRldGVjdENoYW5nZXMoKTtcbiAgfVxuXG4gIGdldENvbXBvbmVudEJ5VHlwZSh0eXBlOiBzdHJpbmcpOiBhbnkge1xuICAgIGxldCBjb21wb25lbnREeW5hbWljID0gdGhpcy5zdXBwb3J0ZWREeW5hbWljQ29tcG9uZW50cy5maW5kKGMgPT4gYy5uYW1lID09PSB0eXBlKTtcbiAgICByZXR1cm4gY29tcG9uZW50RHluYW1pYz8uY29tcG9uZW50IHx8IER5bmFtaWNJbnB1dENvbXBvbmVudDtcbiAgfVxuXG59XG4iLCI8bmctY29udGFpbmVyICNkeW5hbWljSW5wdXRDb250YWluZXI+XG48L25nLWNvbnRhaW5lcj4iXX0=