@yyasinaslan/easyform
Version:
Angular Easy Form
82 lines • 11.7 kB
JavaScript
import { Component, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
import { EASY_FORM_CONFIG } from "../tokens/easy-form-config";
import { ReactiveFormsModule } from "@angular/forms";
import { EfTextAreaComponent } from "../controls/ef-textarea/ef-textarea.component";
import { EfSelectComponent } from "../controls/ef-select/ef-select.component";
import { EfCheckboxComponent } from "../controls/ef-checkbox/ef-checkbox.component";
import { EfRadioComponent } from "../controls/ef-radio/ef-radio.component";
import { EfSwitchComponent } from "../controls/ef-switch/ef-switch.component";
import { EfTextComponent } from "../controls/ef-text/ef-text.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
/**
* EasyFormComponent is the main component that is used to create forms
*
* @see `EasyForm`
*/
export class EasyFormComponent {
constructor() {
this.elementRef = inject(ElementRef);
this._formConfig = inject(EASY_FORM_CONFIG, { optional: true });
this.formConfig = this.defaultConfig();
this.focusFirstError = true;
/**
* Submit event output
*/
this.efSubmit = new EventEmitter();
if (this._formConfig) {
Object.assign(this.formConfig.controls, this._formConfig.controls);
}
}
ngAfterContentInit() {
}
getComponentType(type) {
return this.formConfig.controls[type];
}
handleSubmit($event) {
if (this.form.invalid && this.focusFirstError && this.elementRef) {
const firstError = this.elementRef.nativeElement.querySelector('.ng-invalid:not(form), ef-errors:has(*)');
if (firstError) {
setTimeout(() => {
if (firstError.tagName == 'EF-ERRORS') {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
else {
firstError.focus();
}
}, 100);
}
}
this.efSubmit.emit(this.form.formGroup);
}
defaultConfig() {
return {
controls: {
text: EfTextComponent,
textarea: EfTextAreaComponent,
select: EfSelectComponent,
checkbox: EfCheckboxComponent,
radio: EfRadioComponent,
switch: EfSwitchComponent
}
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EasyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EasyFormComponent, isStandalone: true, selector: "easy-form", inputs: { form: "form", focusFirstError: "focusFirstError" }, outputs: { efSubmit: "efSubmit" }, host: { properties: { "class": "'show-errors-' + form.options.showErrors" } }, ngImport: i0, template: "@if (form) {\r\n <form [formGroup]=\"form.formGroup\" (ngSubmit)=\"handleSubmit($event)\">\r\n <ng-content/>\r\n </form>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EasyFormComponent, decorators: [{
type: Component,
args: [{ selector: 'easy-form', standalone: true, imports: [
ReactiveFormsModule
], host: {
'[class]': `'show-errors-' + form.options.showErrors`
}, template: "@if (form) {\r\n <form [formGroup]=\"form.formGroup\" (ngSubmit)=\"handleSubmit($event)\">\r\n <ng-content/>\r\n </form>\r\n}\r\n" }]
}], ctorParameters: () => [], propDecorators: { form: [{
type: Input,
args: [{ required: true }]
}], focusFirstError: [{
type: Input
}], efSubmit: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWFzeS1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Vhc3ktZm9ybS9zcmMvbGliL2Vhc3ktZm9ybS9lYXN5LWZvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvZWFzeS1mb3JtL2Vhc3ktZm9ybS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW1CLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQzNHLE9BQU8sRUFBQyxnQkFBZ0IsRUFBaUIsTUFBTSw0QkFBNEIsQ0FBQztBQUU1RSxPQUFPLEVBQVksbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5RCxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSwrQ0FBK0MsQ0FBQztBQUNsRixPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUM1RSxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSwrQ0FBK0MsQ0FBQztBQUNsRixPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5Q0FBeUMsQ0FBQztBQUN6RSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSwyQ0FBMkMsQ0FBQztBQUM1RSxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sdUNBQXVDLENBQUM7OztBQUV0RTs7OztHQUlHO0FBYUgsTUFBTSxPQUFPLGlCQUFpQjtJQW1CNUI7UUFsQkEsZUFBVSxHQUFHLE1BQU0sQ0FBNkIsVUFBVSxDQUFDLENBQUM7UUFDNUQsZ0JBQVcsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsQ0FBQztRQUV6RCxlQUFVLEdBQW1CLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQVF6QyxvQkFBZSxHQUFHLElBQUksQ0FBQztRQUVoQzs7V0FFRztRQUNPLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO1FBR2pELElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3JCLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNyRSxDQUFDO0lBQ0gsQ0FBQztJQUVELGtCQUFrQjtJQUVsQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsSUFBWTtRQUMzQixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxZQUFZLENBQUMsTUFBVztRQUN0QixJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxlQUFlLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ2pFLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyx5Q0FBeUMsQ0FBQyxDQUFDO1lBQzFHLElBQUksVUFBVSxFQUFFLENBQUM7Z0JBQ2YsVUFBVSxDQUFDLEdBQUcsRUFBRTtvQkFDZCxJQUFJLFVBQVUsQ0FBQyxPQUFPLElBQUksV0FBVyxFQUFFLENBQUM7d0JBQ3RDLFVBQVUsQ0FBQyxjQUFjLENBQUMsRUFBQyxRQUFRLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUMsQ0FBQyxDQUFBO29CQUNsRSxDQUFDO3lCQUFNLENBQUM7d0JBQ0wsVUFBMEIsQ0FBQyxLQUFLLEVBQUUsQ0FBQTtvQkFDckMsQ0FBQztnQkFDSCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUE7WUFDVCxDQUFDO1FBQ0gsQ0FBQztRQUNELElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUE7SUFDekMsQ0FBQztJQUVPLGFBQWE7UUFDbkIsT0FBTztZQUNMLFFBQVEsRUFBRTtnQkFDUixJQUFJLEVBQUUsZUFBZTtnQkFDckIsUUFBUSxFQUFFLG1CQUFtQjtnQkFDN0IsTUFBTSxFQUFFLGlCQUFpQjtnQkFDekIsUUFBUSxFQUFFLG1CQUFtQjtnQkFDN0IsS0FBSyxFQUFFLGdCQUFnQjtnQkFDdkIsTUFBTSxFQUFFLGlCQUFpQjthQUMxQjtTQUNGLENBQUE7SUFDSCxDQUFDOytHQTVEVSxpQkFBaUI7bUdBQWpCLGlCQUFpQixxUEM1QjlCLHdJQUtBLHlERGVJLG1CQUFtQjs7NEZBUVYsaUJBQWlCO2tCQVo3QixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1A7d0JBQ1AsbUJBQW1CO3FCQUNwQixRQUdLO3dCQUNKLFNBQVMsRUFBRSwwQ0FBMEM7cUJBQ3REO3dEQWF3QixJQUFJO3NCQUE1QixLQUFLO3VCQUFDLEVBQUMsUUFBUSxFQUFFLElBQUksRUFBQztnQkFDZCxlQUFlO3NCQUF2QixLQUFLO2dCQUtJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBpbmplY3QsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0VBU1lfRk9STV9DT05GSUcsIEVhc3lGb3JtQ29uZmlnfSBmcm9tIFwiLi4vdG9rZW5zL2Vhc3ktZm9ybS1jb25maWdcIjtcclxuaW1wb3J0IHtFYXN5Rm9ybX0gZnJvbSBcIi4uL2Vhc3ktZm9ybVwiO1xyXG5pbXBvcnQge0Zvcm1Hcm91cCwgUmVhY3RpdmVGb3Jtc01vZHVsZX0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XHJcbmltcG9ydCB7RWZUZXh0QXJlYUNvbXBvbmVudH0gZnJvbSBcIi4uL2NvbnRyb2xzL2VmLXRleHRhcmVhL2VmLXRleHRhcmVhLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQge0VmU2VsZWN0Q29tcG9uZW50fSBmcm9tIFwiLi4vY29udHJvbHMvZWYtc2VsZWN0L2VmLXNlbGVjdC5jb21wb25lbnRcIjtcclxuaW1wb3J0IHtFZkNoZWNrYm94Q29tcG9uZW50fSBmcm9tIFwiLi4vY29udHJvbHMvZWYtY2hlY2tib3gvZWYtY2hlY2tib3guY29tcG9uZW50XCI7XHJcbmltcG9ydCB7RWZSYWRpb0NvbXBvbmVudH0gZnJvbSBcIi4uL2NvbnRyb2xzL2VmLXJhZGlvL2VmLXJhZGlvLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQge0VmU3dpdGNoQ29tcG9uZW50fSBmcm9tIFwiLi4vY29udHJvbHMvZWYtc3dpdGNoL2VmLXN3aXRjaC5jb21wb25lbnRcIjtcclxuaW1wb3J0IHtFZlRleHRDb21wb25lbnR9IGZyb20gXCIuLi9jb250cm9scy9lZi10ZXh0L2VmLXRleHQuY29tcG9uZW50XCI7XHJcblxyXG4vKipcclxuICogRWFzeUZvcm1Db21wb25lbnQgaXMgdGhlIG1haW4gY29tcG9uZW50IHRoYXQgaXMgdXNlZCB0byBjcmVhdGUgZm9ybXNcclxuICpcclxuICogQHNlZSBgRWFzeUZvcm1gXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2Vhc3ktZm9ybScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlXHJcbiAgXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vZWFzeS1mb3JtLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vZWFzeS1mb3JtLmNvbXBvbmVudC5zY3NzJyxcclxuICBob3N0OiB7XHJcbiAgICAnW2NsYXNzXSc6IGAnc2hvdy1lcnJvcnMtJyArIGZvcm0ub3B0aW9ucy5zaG93RXJyb3JzYFxyXG4gIH1cclxufSlcclxuZXhwb3J0IGNsYXNzIEVhc3lGb3JtQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XHJcbiAgZWxlbWVudFJlZiA9IGluamVjdDxFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50Pj4oRWxlbWVudFJlZik7XHJcbiAgX2Zvcm1Db25maWcgPSBpbmplY3QoRUFTWV9GT1JNX0NPTkZJRywge29wdGlvbmFsOiB0cnVlfSk7XHJcblxyXG4gIGZvcm1Db25maWc6IEVhc3lGb3JtQ29uZmlnID0gdGhpcy5kZWZhdWx0Q29uZmlnKCk7XHJcblxyXG4gIC8qKlxyXG4gICAqIEVhc3lGb3JtIGluc3RhbmNlXHJcbiAgICpcclxuICAgKiBAdHlwZSBgRWFzeUZvcm1gXHJcbiAgICovXHJcbiAgQElucHV0KHtyZXF1aXJlZDogdHJ1ZX0pIGZvcm0hOiBFYXN5Rm9ybTtcclxuICBASW5wdXQoKSBmb2N1c0ZpcnN0RXJyb3IgPSB0cnVlO1xyXG5cclxuICAvKipcclxuICAgKiBTdWJtaXQgZXZlbnQgb3V0cHV0XHJcbiAgICovXHJcbiAgQE91dHB1dCgpIGVmU3VibWl0ID0gbmV3IEV2ZW50RW1pdHRlcjxGb3JtR3JvdXA+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gICAgaWYgKHRoaXMuX2Zvcm1Db25maWcpIHtcclxuICAgICAgT2JqZWN0LmFzc2lnbih0aGlzLmZvcm1Db25maWcuY29udHJvbHMsIHRoaXMuX2Zvcm1Db25maWcuY29udHJvbHMpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xyXG5cclxuICB9XHJcblxyXG4gIGdldENvbXBvbmVudFR5cGUodHlwZTogc3RyaW5nKSB7XHJcbiAgICByZXR1cm4gdGhpcy5mb3JtQ29uZmlnLmNvbnRyb2xzW3R5cGVdO1xyXG4gIH1cclxuXHJcbiAgaGFuZGxlU3VibWl0KCRldmVudDogYW55KSB7XHJcbiAgICBpZiAodGhpcy5mb3JtLmludmFsaWQgJiYgdGhpcy5mb2N1c0ZpcnN0RXJyb3IgJiYgdGhpcy5lbGVtZW50UmVmKSB7XHJcbiAgICAgIGNvbnN0IGZpcnN0RXJyb3IgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcubmctaW52YWxpZDpub3QoZm9ybSksIGVmLWVycm9yczpoYXMoKiknKTtcclxuICAgICAgaWYgKGZpcnN0RXJyb3IpIHtcclxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICAgIGlmIChmaXJzdEVycm9yLnRhZ05hbWUgPT0gJ0VGLUVSUk9SUycpIHtcclxuICAgICAgICAgICAgZmlyc3RFcnJvci5zY3JvbGxJbnRvVmlldyh7YmVoYXZpb3I6ICdzbW9vdGgnLCBibG9jazogJ2NlbnRlcid9KVxyXG4gICAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgKGZpcnN0RXJyb3IgYXMgSFRNTEVsZW1lbnQpLmZvY3VzKClcclxuICAgICAgICAgIH1cclxuICAgICAgICB9LCAxMDApXHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIHRoaXMuZWZTdWJtaXQuZW1pdCh0aGlzLmZvcm0uZm9ybUdyb3VwKVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBkZWZhdWx0Q29uZmlnKCkge1xyXG4gICAgcmV0dXJuIHtcclxuICAgICAgY29udHJvbHM6IHtcclxuICAgICAgICB0ZXh0OiBFZlRleHRDb21wb25lbnQsXHJcbiAgICAgICAgdGV4dGFyZWE6IEVmVGV4dEFyZWFDb21wb25lbnQsXHJcbiAgICAgICAgc2VsZWN0OiBFZlNlbGVjdENvbXBvbmVudCxcclxuICAgICAgICBjaGVja2JveDogRWZDaGVja2JveENvbXBvbmVudCxcclxuICAgICAgICByYWRpbzogRWZSYWRpb0NvbXBvbmVudCxcclxuICAgICAgICBzd2l0Y2g6IEVmU3dpdGNoQ29tcG9uZW50XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn1cclxuIiwiQGlmIChmb3JtKSB7XHJcbiAgPGZvcm0gW2Zvcm1Hcm91cF09XCJmb3JtLmZvcm1Hcm91cFwiIChuZ1N1Ym1pdCk9XCJoYW5kbGVTdWJtaXQoJGV2ZW50KVwiPlxyXG4gICAgPG5nLWNvbnRlbnQvPlxyXG4gIDwvZm9ybT5cclxufVxyXG4iXX0=