@yyasinaslan/easyform
Version:
Angular Easy Form
42 lines • 8.53 kB
JavaScript
import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
import { KeyValuePipe, NgTemplateOutlet } from "@angular/common";
import { ObservePipe } from "../../pipes/observe";
import * as i0 from "@angular/core";
export class EfErrorsComponent {
get _control() {
if (this.control)
return this.control;
if (!this.path || !this.form)
throw new Error('Path and form inputs are required');
return this.form.getControl(this.path);
}
get _formField() {
if (this.formField)
return this.formField;
if (!this.path || !this.form)
throw new Error('Path and form inputs are required');
return this.form.getSchema(this.path);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EfErrorsComponent, isStandalone: true, selector: "ef-errors", inputs: { form: "form", path: "path", control: "control", formField: "formField" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #defaultErrorMessage let-message>\r\n @if (message) {\r\n <div class=\"ef-errors\">{{ message | observe }}</div>\r\n }\r\n</ng-template>\r\n\r\n@if (_control && _formField && _formField.validations) {\r\n @for (validation of (_formField.validations | keyvalue); track validation.key) {\r\n @if (_control.hasError(validation.key)) {\r\n <ng-container [ngTemplateOutlet]=\"messageTemplate ?? defaultErrorMessage\"\r\n [ngTemplateOutletContext]=\"{$implicit: validation.value.message}\"/>\r\n }\r\n }\r\n}\r\n", styles: [":host{display:none}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty){display:block}.ef-errors{color:hsl(var(--ef-invalid-color, 0 100% 50%));font-size:var(--ef-form-errors-font-size, .8em)}\n"], dependencies: [{ kind: "pipe", type: ObservePipe, name: "observe" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfErrorsComponent, decorators: [{
type: Component,
args: [{ selector: 'ef-errors', standalone: true, imports: [
ObservePipe,
NgTemplateOutlet,
KeyValuePipe
], template: "<ng-template #defaultErrorMessage let-message>\r\n @if (message) {\r\n <div class=\"ef-errors\">{{ message | observe }}</div>\r\n }\r\n</ng-template>\r\n\r\n@if (_control && _formField && _formField.validations) {\r\n @for (validation of (_formField.validations | keyvalue); track validation.key) {\r\n @if (_control.hasError(validation.key)) {\r\n <ng-container [ngTemplateOutlet]=\"messageTemplate ?? defaultErrorMessage\"\r\n [ngTemplateOutletContext]=\"{$implicit: validation.value.message}\"/>\r\n }\r\n }\r\n}\r\n", styles: [":host{display:none}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty){display:block}.ef-errors{color:hsl(var(--ef-invalid-color, 0 100% 50%));font-size:var(--ef-form-errors-font-size, .8em)}\n"] }]
}], propDecorators: { messageTemplate: [{
type: ContentChild,
args: ['messageTemplate', { read: TemplateRef }]
}], form: [{
type: Input
}], path: [{
type: Input
}], control: [{
type: Input
}], formField: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWYtZXJyb3JzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Vhc3ktZm9ybS9zcmMvbGliL2NvbXBvbmVudHMvZWYtZXJyb3JzL2VmLWVycm9ycy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lYXN5LWZvcm0vc3JjL2xpYi9jb21wb25lbnRzL2VmLWVycm9ycy9lZi1lcnJvcnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUUxRSxPQUFPLEVBQUMsWUFBWSxFQUFFLGdCQUFnQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDL0QsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQWVoRCxNQUFNLE9BQU8saUJBQWlCO0lBUTVCLElBQUksUUFBUTtRQUNWLElBQUksSUFBSSxDQUFDLE9BQU87WUFBRSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDdEMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSTtZQUFFLE1BQU0sSUFBSSxLQUFLLENBQUMsbUNBQW1DLENBQUMsQ0FBQztRQUNuRixPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRUQsSUFBSSxVQUFVO1FBQ1osSUFBSSxJQUFJLENBQUMsU0FBUztZQUFFLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUMxQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJO1lBQUUsTUFBTSxJQUFJLEtBQUssQ0FBQyxtQ0FBbUMsQ0FBQyxDQUFDO1FBQ25GLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBa0IsQ0FBQztJQUN6RCxDQUFDOytHQWxCVSxpQkFBaUI7bUdBQWpCLGlCQUFpQixvUEFDWSxXQUFXLDZCQ25CckQsOGlCQWNBLHdVREhJLFdBQVcsZ0RBQ1gsZ0JBQWdCLCtJQUNoQixZQUFZOzs0RkFLSCxpQkFBaUI7a0JBWDdCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUDt3QkFDUCxXQUFXO3dCQUNYLGdCQUFnQjt3QkFDaEIsWUFBWTtxQkFDYjs4QkFLcUQsZUFBZTtzQkFBcEUsWUFBWTt1QkFBQyxpQkFBaUIsRUFBRSxFQUFDLElBQUksRUFBRSxXQUFXLEVBQUM7Z0JBRTNDLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgVGVtcGxhdGVSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0Zvcm1Db250cm9sfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcclxuaW1wb3J0IHtLZXlWYWx1ZVBpcGUsIE5nVGVtcGxhdGVPdXRsZXR9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcclxuaW1wb3J0IHtPYnNlcnZlUGlwZX0gZnJvbSBcIi4uLy4uL3BpcGVzL29ic2VydmVcIjtcclxuaW1wb3J0IHtFYXN5Rm9ybX0gZnJvbSBcIi4uLy4uL2Vhc3ktZm9ybVwiO1xyXG5pbXBvcnQge0Vhc3lGb3JtRmllbGR9IGZyb20gXCIuLi8uLi9lYXN5LWZvcm0tZmllbGRcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZWYtZXJyb3JzJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIE9ic2VydmVQaXBlLFxyXG4gICAgTmdUZW1wbGF0ZU91dGxldCxcclxuICAgIEtleVZhbHVlUGlwZVxyXG4gIF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2VmLWVycm9ycy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2VmLWVycm9ycy5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEVmRXJyb3JzQ29tcG9uZW50IHtcclxuICBAQ29udGVudENoaWxkKCdtZXNzYWdlVGVtcGxhdGUnLCB7cmVhZDogVGVtcGxhdGVSZWZ9KSBtZXNzYWdlVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx7ICRpbXBsaWNpdDogc3RyaW5nIH0+O1xyXG5cclxuICBASW5wdXQoKSBmb3JtPzogRWFzeUZvcm07XHJcbiAgQElucHV0KCkgcGF0aD86IHN0cmluZyB8IChudW1iZXIgfCBzdHJpbmcpW107XHJcbiAgQElucHV0KCkgY29udHJvbD86IEZvcm1Db250cm9sO1xyXG4gIEBJbnB1dCgpIGZvcm1GaWVsZD86IEVhc3lGb3JtRmllbGQ7XHJcblxyXG4gIGdldCBfY29udHJvbCgpIHtcclxuICAgIGlmICh0aGlzLmNvbnRyb2wpIHJldHVybiB0aGlzLmNvbnRyb2w7XHJcbiAgICBpZiAoIXRoaXMucGF0aCB8fCAhdGhpcy5mb3JtKSB0aHJvdyBuZXcgRXJyb3IoJ1BhdGggYW5kIGZvcm0gaW5wdXRzIGFyZSByZXF1aXJlZCcpO1xyXG4gICAgcmV0dXJuIHRoaXMuZm9ybS5nZXRDb250cm9sKHRoaXMucGF0aCk7XHJcbiAgfVxyXG5cclxuICBnZXQgX2Zvcm1GaWVsZCgpIHtcclxuICAgIGlmICh0aGlzLmZvcm1GaWVsZCkgcmV0dXJuIHRoaXMuZm9ybUZpZWxkO1xyXG4gICAgaWYgKCF0aGlzLnBhdGggfHwgIXRoaXMuZm9ybSkgdGhyb3cgbmV3IEVycm9yKCdQYXRoIGFuZCBmb3JtIGlucHV0cyBhcmUgcmVxdWlyZWQnKTtcclxuICAgIHJldHVybiB0aGlzLmZvcm0uZ2V0U2NoZW1hKHRoaXMucGF0aCkgYXMgRWFzeUZvcm1GaWVsZDtcclxuICB9XHJcblxyXG59XHJcbiIsIjxuZy10ZW1wbGF0ZSAjZGVmYXVsdEVycm9yTWVzc2FnZSBsZXQtbWVzc2FnZT5cclxuICBAaWYgKG1lc3NhZ2UpIHtcclxuICAgIDxkaXYgY2xhc3M9XCJlZi1lcnJvcnNcIj57eyBtZXNzYWdlIHwgb2JzZXJ2ZSB9fTwvZGl2PlxyXG4gIH1cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbkBpZiAoX2NvbnRyb2wgJiYgX2Zvcm1GaWVsZCAmJiBfZm9ybUZpZWxkLnZhbGlkYXRpb25zKSB7XHJcbiAgQGZvciAodmFsaWRhdGlvbiBvZiAoX2Zvcm1GaWVsZC52YWxpZGF0aW9ucyB8IGtleXZhbHVlKTsgdHJhY2sgdmFsaWRhdGlvbi5rZXkpIHtcclxuICAgIEBpZiAoX2NvbnRyb2wuaGFzRXJyb3IodmFsaWRhdGlvbi5rZXkpKSB7XHJcbiAgICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwibWVzc2FnZVRlbXBsYXRlID8/IGRlZmF1bHRFcnJvck1lc3NhZ2VcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7JGltcGxpY2l0OiB2YWxpZGF0aW9uLnZhbHVlLm1lc3NhZ2V9XCIvPlxyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=