@yoursabhishekabhi7/modal-popup-ng-all/esm2022/lib/boot-starp-components/boot-strap-dynamic-form/boot-strap-dynamic-form.component.mjs

Reusable Angular modal popup components supporting Angular 14 to 18

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
export class BootStrapDynamicFormComponent {
    form = new FormGroup({}); // Initialize with an empty FormGroup
    formData = [];
    event = new EventEmitter();
    ngOnInit() {
    }
    ngOnChanges(changes) {
        this.form = this.createFormGroup(this.formData);
    }
    createFormGroup(formData) {
        const group = {};
        formData.forEach(field => {
            const control = new FormControl(field.value || '', field.required ? Validators.required : null);
            group[field.name] = control;
        });
        return new FormGroup(group);
    }
    onSubmit() {
        console.log(this.form?.value);
        this.event.emit(this.form);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: BootStrapDynamicFormComponent, selector: "boot-strap-dynamic-form", inputs: { formData: "formData" }, outputs: { event: "event" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n    <div *ngFor=\"let field of formData\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>{{ field?.label }}</mat-label>\r\n            <ng-container [ngSwitch]=\"field?.type\">\r\n                <input *ngSwitchCase=\"'text'\" matInput [formControlName]=\"field.name\" type=\"text\" />\r\n                <input *ngSwitchCase=\"'email'\" matInput [formControlName]=\"field.name\" type=\"email\" />\r\n                <input *ngSwitchCase=\"'number'\" matInput [formControlName]=\"field.name\" type=\"number\" />\r\n                <mat-select *ngSwitchCase=\"'select'\" [formControlName]=\"field.name\">\r\n                    <mat-option *ngFor=\"let option of field?.options\" [value]=\"option\">\r\n                        {{ option }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </ng-container>\r\n            <mat-error *ngIf=\"form.get(field.name)?.invalid && form?.get(field.name)?.touched\">\r\n                {{ field?.label }} is required\r\n            </mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form?.invalid\">\r\n        Submit\r\n    </button>\r\n</form>", styles: [".full-width{width:100%;margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: BootStrapDynamicFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'boot-strap-dynamic-form', template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n    <div *ngFor=\"let field of formData\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>{{ field?.label }}</mat-label>\r\n            <ng-container [ngSwitch]=\"field?.type\">\r\n                <input *ngSwitchCase=\"'text'\" matInput [formControlName]=\"field.name\" type=\"text\" />\r\n                <input *ngSwitchCase=\"'email'\" matInput [formControlName]=\"field.name\" type=\"email\" />\r\n                <input *ngSwitchCase=\"'number'\" matInput [formControlName]=\"field.name\" type=\"number\" />\r\n                <mat-select *ngSwitchCase=\"'select'\" [formControlName]=\"field.name\">\r\n                    <mat-option *ngFor=\"let option of field?.options\" [value]=\"option\">\r\n                        {{ option }}\r\n                    </mat-option>\r\n                </mat-select>\r\n            </ng-container>\r\n            <mat-error *ngIf=\"form.get(field.name)?.invalid && form?.get(field.name)?.touched\">\r\n                {{ field?.label }} is required\r\n            </mat-error>\r\n        </mat-form-field>\r\n    </div>\r\n    <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form?.invalid\">\r\n        Submit\r\n    </button>\r\n</form>", styles: [".full-width{width:100%;margin-bottom:16px}\n"] }]
        }], propDecorators: { formData: [{
                type: Input,
                args: ["formData"]
            }], event: [{
                type: Output,
                args: ["event"]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9vdC1zdHJhcC1keW5hbWljLWZvcm0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbW9kYWwtcG9wdXAtbmcxNC0xOC9zcmMvbGliL2Jvb3Qtc3RhcnAtY29tcG9uZW50cy9ib290LXN0cmFwLWR5bmFtaWMtZm9ybS9ib290LXN0cmFwLWR5bmFtaWMtZm9ybS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tb2RhbC1wb3B1cC1uZzE0LTE4L3NyYy9saWIvYm9vdC1zdGFycC1jb21wb25lbnRzL2Jvb3Qtc3RyYXAtZHluYW1pYy1mb3JtL2Jvb3Qtc3RyYXAtZHluYW1pYy1mb3JtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUN6RyxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7OztBQWdCcEUsTUFBTSxPQUFPLDZCQUE2QjtJQUN4QyxJQUFJLEdBQWMsSUFBSSxTQUFTLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxxQ0FBcUM7SUFDdkQsUUFBUSxHQUFnQixFQUFFLENBQUM7SUFDN0IsS0FBSyxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBRS9ELFFBQVE7SUFDUixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVELGVBQWUsQ0FBQyxRQUFlO1FBQzdCLE1BQU0sS0FBSyxHQUFRLEVBQUUsQ0FBQztRQUN0QixRQUFRLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3ZCLE1BQU0sT0FBTyxHQUFHLElBQUksV0FBVyxDQUM3QixLQUFLLENBQUMsS0FBSyxJQUFJLEVBQUUsRUFDakIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUM1QyxDQUFDO1lBQ0YsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxPQUFPLENBQUM7UUFDOUIsQ0FBQyxDQUFDLENBQUM7UUFDSCxPQUFPLElBQUksU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRCxRQUFRO1FBQ04sT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQzlCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUM1QixDQUFDO3VHQTNCVSw2QkFBNkI7MkZBQTdCLDZCQUE2QixtSkNqQjFDLGl5Q0FzQk87OzJGRExNLDZCQUE2QjtrQkFMekMsU0FBUzsrQkFDRSx5QkFBeUI7OEJBTWhCLFFBQVE7c0JBQTFCLEtBQUs7dUJBQUMsVUFBVTtnQkFDQSxLQUFLO3NCQUFyQixNQUFNO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUdyb3VwLCBGb3JtQ29udHJvbCwgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbmludGVyZmFjZSBGb3JtRmllbGQge1xyXG4gIGxhYmVsOiBzdHJpbmc7XHJcbiAgdHlwZTogJ3RleHQnIHwgJ2VtYWlsJyB8ICdudW1iZXInIHwgJ3NlbGVjdCc7XHJcbiAgbmFtZTogc3RyaW5nIHwgJyc7XHJcbiAgdmFsdWU6IHN0cmluZyB8IG51bWJlcjtcclxuICByZXF1aXJlZDogYm9vbGVhbjtcclxuICBvcHRpb25zPzogc3RyaW5nW107XHJcbn1cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYm9vdC1zdHJhcC1keW5hbWljLWZvcm0nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9ib290LXN0cmFwLWR5bmFtaWMtZm9ybS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vYm9vdC1zdHJhcC1keW5hbWljLWZvcm0uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQm9vdFN0cmFwRHluYW1pY0Zvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcbiAgZm9ybTogRm9ybUdyb3VwID0gbmV3IEZvcm1Hcm91cCh7fSk7IC8vIEluaXRpYWxpemUgd2l0aCBhbiBlbXB0eSBGb3JtR3JvdXBcclxuICBASW5wdXQoXCJmb3JtRGF0YVwiKSBmb3JtRGF0YTogRm9ybUZpZWxkW10gPSBbXTtcclxuICBAT3V0cHV0KFwiZXZlbnRcIikgZXZlbnQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgIHRoaXMuZm9ybSA9IHRoaXMuY3JlYXRlRm9ybUdyb3VwKHRoaXMuZm9ybURhdGEpO1xyXG4gIH1cclxuXHJcbiAgY3JlYXRlRm9ybUdyb3VwKGZvcm1EYXRhOiBhbnlbXSk6IEZvcm1Hcm91cCB7XHJcbiAgICBjb25zdCBncm91cDogYW55ID0ge307XHJcbiAgICBmb3JtRGF0YS5mb3JFYWNoKGZpZWxkID0+IHtcclxuICAgICAgY29uc3QgY29udHJvbCA9IG5ldyBGb3JtQ29udHJvbChcclxuICAgICAgICBmaWVsZC52YWx1ZSB8fCAnJyxcclxuICAgICAgICBmaWVsZC5yZXF1aXJlZCA/IFZhbGlkYXRvcnMucmVxdWlyZWQgOiBudWxsXHJcbiAgICAgICk7XHJcbiAgICAgIGdyb3VwW2ZpZWxkLm5hbWVdID0gY29udHJvbDtcclxuICAgIH0pO1xyXG4gICAgcmV0dXJuIG5ldyBGb3JtR3JvdXAoZ3JvdXApO1xyXG4gIH1cclxuXHJcbiAgb25TdWJtaXQoKSB7XHJcbiAgICBjb25zb2xlLmxvZyh0aGlzLmZvcm0/LnZhbHVlKTtcclxuICAgIHRoaXMuZXZlbnQuZW1pdCh0aGlzLmZvcm0pXHJcbiAgfVxyXG5cclxufVxyXG4iLCI8Zm9ybSBbZm9ybUdyb3VwXT1cImZvcm1cIiAobmdTdWJtaXQpPVwib25TdWJtaXQoKVwiPlxyXG4gICAgPGRpdiAqbmdGb3I9XCJsZXQgZmllbGQgb2YgZm9ybURhdGFcIj5cclxuICAgICAgICA8bWF0LWZvcm0tZmllbGQgYXBwZWFyYW5jZT1cImZpbGxcIiBjbGFzcz1cImZ1bGwtd2lkdGhcIj5cclxuICAgICAgICAgICAgPG1hdC1sYWJlbD57eyBmaWVsZD8ubGFiZWwgfX08L21hdC1sYWJlbD5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdTd2l0Y2hdPVwiZmllbGQ/LnR5cGVcIj5cclxuICAgICAgICAgICAgICAgIDxpbnB1dCAqbmdTd2l0Y2hDYXNlPVwiJ3RleHQnXCIgbWF0SW5wdXQgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZC5uYW1lXCIgdHlwZT1cInRleHRcIiAvPlxyXG4gICAgICAgICAgICAgICAgPGlucHV0ICpuZ1N3aXRjaENhc2U9XCInZW1haWwnXCIgbWF0SW5wdXQgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZC5uYW1lXCIgdHlwZT1cImVtYWlsXCIgLz5cclxuICAgICAgICAgICAgICAgIDxpbnB1dCAqbmdTd2l0Y2hDYXNlPVwiJ251bWJlcidcIiBtYXRJbnB1dCBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkLm5hbWVcIiB0eXBlPVwibnVtYmVyXCIgLz5cclxuICAgICAgICAgICAgICAgIDxtYXQtc2VsZWN0ICpuZ1N3aXRjaENhc2U9XCInc2VsZWN0J1wiIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGQubmFtZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmllbGQ/Lm9wdGlvbnNcIiBbdmFsdWVdPVwib3B0aW9uXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IG9wdGlvbiB9fVxyXG4gICAgICAgICAgICAgICAgICAgIDwvbWF0LW9wdGlvbj5cclxuICAgICAgICAgICAgICAgIDwvbWF0LXNlbGVjdD5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJmb3JtLmdldChmaWVsZC5uYW1lKT8uaW52YWxpZCAmJiBmb3JtPy5nZXQoZmllbGQubmFtZSk/LnRvdWNoZWRcIj5cclxuICAgICAgICAgICAgICAgIHt7IGZpZWxkPy5sYWJlbCB9fSBpcyByZXF1aXJlZFxyXG4gICAgICAgICAgICA8L21hdC1lcnJvcj5cclxuICAgICAgICA8L21hdC1mb3JtLWZpZWxkPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8YnV0dG9uIG1hdC1yYWlzZWQtYnV0dG9uIGNvbG9yPVwicHJpbWFyeVwiIHR5cGU9XCJzdWJtaXRcIiBbZGlzYWJsZWRdPVwiZm9ybT8uaW52YWxpZFwiPlxyXG4gICAgICAgIFN1Ym1pdFxyXG4gICAgPC9idXR0b24+XHJcbjwvZm9ybT4iXX0=