ngx-form-lib
Version:
Dynamic form library for Angular 18 with Material 3 support. Create complex reactive forms easily using JSON configuration with modern Angular 18 control flow syntax.
53 lines • 7.77 kB
JavaScript
import { Component, Input, ViewChild, ViewContainerRef, } from '@angular/core';
import { ButtonComponent } from '../../features/button/button.component';
import { CheckboxComponent } from '../../features/checkbox/checkbox.component';
import { DropdownComponent } from '../../features/dropdown/dropdown.component';
import { InputComponent } from '../../features/input/input.component';
import { RadioComponent } from '../../features/radio/radio.component';
import { TextareaComponent } from '../../features/textarea/textarea.component';
import * as i0 from "@angular/core";
const componentMapping = {
button: ButtonComponent,
checkbox: CheckboxComponent,
dropdown: DropdownComponent,
input: InputComponent,
radio: RadioComponent,
textarea: TextareaComponent,
};
export class ContainerComponent {
constructor() {
this.config = {};
this.group = null;
this.parentConfig = null;
}
ngOnInit() {
this.loadDynamicFields();
}
loadDynamicFields() {
if (this.dynamicComponent && this.config?.type) {
const componentRef = this.dynamicComponent.createComponent(componentMapping[this.config.type]);
componentRef.instance.config = this.config;
componentRef.instance.group = this.group;
componentRef.instance.parentConfig = this.parentConfig;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContainerComponent, selector: "ngf-container", inputs: { config: "config", group: "group", parentConfig: "parentConfig" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-template #dynamicComponent></ng-template>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerComponent, decorators: [{
type: Component,
args: [{
selector: 'ngf-container',
template: `<ng-template #dynamicComponent></ng-template>`,
}]
}], propDecorators: { config: [{
type: Input
}], group: [{
type: Input
}], parentConfig: [{
type: Input
}], dynamicComponent: [{
type: ViewChild,
args: ['dynamicComponent', { static: true, read: ViewContainerRef }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mb3JtLWxpYi9zcmMvbGliL2NvcmUvY29udGFpbmVycy9jb250YWluZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUdMLFNBQVMsRUFDVCxnQkFBZ0IsR0FDakIsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQ3pFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN0RSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNENBQTRDLENBQUM7O0FBTS9FLE1BQU0sZ0JBQWdCLEdBRWxCO0lBQ0YsTUFBTSxFQUFFLGVBQWU7SUFDdkIsUUFBUSxFQUFFLGlCQUFpQjtJQUMzQixRQUFRLEVBQUUsaUJBQWlCO0lBQzNCLEtBQUssRUFBRSxjQUFjO0lBQ3JCLEtBQUssRUFBRSxjQUFjO0lBQ3JCLFFBQVEsRUFBRSxpQkFBaUI7Q0FDNUIsQ0FBQztBQU1GLE1BQU0sT0FBTyxrQkFBa0I7SUFKL0I7UUFLVyxXQUFNLEdBQW1CLEVBQW9CLENBQUM7UUFDOUMsVUFBSyxHQUE0QixJQUFJLENBQUM7UUFDdEMsaUJBQVksR0FBd0IsSUFBSSxDQUFDO0tBbUJuRDtJQWZDLFFBQVE7UUFDTixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRU8saUJBQWlCO1FBQ3ZCLElBQUksSUFBSSxDQUFDLGdCQUFnQixJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7WUFDL0MsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FDeEQsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FDbkMsQ0FBQztZQUVGLFlBQVksQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7WUFDM0MsWUFBWSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUN6QyxZQUFZLENBQUMsUUFBUSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1FBQ3pELENBQUM7SUFDSCxDQUFDOytHQXJCVSxrQkFBa0I7bUdBQWxCLGtCQUFrQixrT0FJd0IsZ0JBQWdCLDJDQU4zRCwrQ0FBK0M7OzRGQUU5QyxrQkFBa0I7a0JBSjlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFFBQVEsRUFBRSwrQ0FBK0M7aUJBQzFEOzhCQUVVLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFTixnQkFBZ0I7c0JBRGYsU0FBUzt1QkFBQyxrQkFBa0IsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgSW5wdXQsXHJcbiAgT25Jbml0LFxyXG4gIFR5cGUsXHJcbiAgVmlld0NoaWxkLFxyXG4gIFZpZXdDb250YWluZXJSZWYsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFVudHlwZWRGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9mZWF0dXJlcy9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IENoZWNrYm94Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZmVhdHVyZXMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50JztcclxuaW1wb3J0IHsgRHJvcGRvd25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9mZWF0dXJlcy9kcm9wZG93bi9kcm9wZG93bi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2ZlYXR1cmVzL2lucHV0L2lucHV0LmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFJhZGlvQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZmVhdHVyZXMvcmFkaW8vcmFkaW8uY29tcG9uZW50JztcclxuaW1wb3J0IHsgVGV4dGFyZWFDb21wb25lbnQgfSBmcm9tICcuLi8uLi9mZWF0dXJlcy90ZXh0YXJlYS90ZXh0YXJlYS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGaWVsZFR5cGVFbnVtIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2VudW1zL2ZpZWxkLXR5cGUuZW51bSc7XHJcbmltcG9ydCB7IFBhcmVudENvbmZpZyB9IGZyb20gJy4uLy4uL3NoYXJlZC9tb2RlbHMvcGFyZW50LWNvbmZpZy5tb2RlbCc7XHJcbmltcG9ydCB7IEJhc2VDb21wb25lbnQgfSBmcm9tICcuLi9jb21wb25lbnRzL2Jhc2UvYmFzZS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGaWVsZCB9IGZyb20gJy4uLy4uL3NoYXJlZC9tb2RlbHMvZmllbGQubW9kZWwnO1xyXG5cclxuY29uc3QgY29tcG9uZW50TWFwcGluZzoge1xyXG4gIFtrZXkgaW4gRmllbGRUeXBlRW51bV06IFR5cGU8QmFzZUNvbXBvbmVudDx1bmtub3duPj47XHJcbn0gPSB7XHJcbiAgYnV0dG9uOiBCdXR0b25Db21wb25lbnQsXHJcbiAgY2hlY2tib3g6IENoZWNrYm94Q29tcG9uZW50LFxyXG4gIGRyb3Bkb3duOiBEcm9wZG93bkNvbXBvbmVudCxcclxuICBpbnB1dDogSW5wdXRDb21wb25lbnQsXHJcbiAgcmFkaW86IFJhZGlvQ29tcG9uZW50LFxyXG4gIHRleHRhcmVhOiBUZXh0YXJlYUNvbXBvbmVudCxcclxufTtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmdmLWNvbnRhaW5lcicsXHJcbiAgdGVtcGxhdGU6IGA8bmctdGVtcGxhdGUgI2R5bmFtaWNDb21wb25lbnQ+PC9uZy10ZW1wbGF0ZT5gLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29udGFpbmVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBjb25maWc6IEZpZWxkPHVua25vd24+ID0ge30gYXMgRmllbGQ8dW5rbm93bj47XHJcbiAgQElucHV0KCkgZ3JvdXA6IFVudHlwZWRGb3JtR3JvdXAgfCBudWxsID0gbnVsbDtcclxuICBASW5wdXQoKSBwYXJlbnRDb25maWc6IFBhcmVudENvbmZpZyB8IG51bGwgPSBudWxsO1xyXG4gIEBWaWV3Q2hpbGQoJ2R5bmFtaWNDb21wb25lbnQnLCB7IHN0YXRpYzogdHJ1ZSwgcmVhZDogVmlld0NvbnRhaW5lclJlZiB9KVxyXG4gIGR5bmFtaWNDb21wb25lbnQhOiBWaWV3Q29udGFpbmVyUmVmO1xyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMubG9hZER5bmFtaWNGaWVsZHMoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgbG9hZER5bmFtaWNGaWVsZHMoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5keW5hbWljQ29tcG9uZW50ICYmIHRoaXMuY29uZmlnPy50eXBlKSB7XHJcbiAgICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IHRoaXMuZHluYW1pY0NvbXBvbmVudC5jcmVhdGVDb21wb25lbnQoXHJcbiAgICAgICAgY29tcG9uZW50TWFwcGluZ1t0aGlzLmNvbmZpZy50eXBlXVxyXG4gICAgICApO1xyXG5cclxuICAgICAgY29tcG9uZW50UmVmLmluc3RhbmNlLmNvbmZpZyA9IHRoaXMuY29uZmlnO1xyXG4gICAgICBjb21wb25lbnRSZWYuaW5zdGFuY2UuZ3JvdXAgPSB0aGlzLmdyb3VwO1xyXG4gICAgICBjb21wb25lbnRSZWYuaW5zdGFuY2UucGFyZW50Q29uZmlnID0gdGhpcy5wYXJlbnRDb25maWc7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==