@bsachref/ng-form
Version:
A dynamic form component for Angular using PrimeNG or Angular Material
29 lines • 7.98 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class ValidationMessagesComponent {
control; // The form control to validate
controlName; // The name of the control (for displaying in messages)
config; // The configuration for the control
getValidatorValue(validatorName, key) {
return this.control?.errors?.[validatorName]?.[key];
}
getCustomErrorMessage() {
if (this.control?.errors?.['custom']) {
return this.control.errors['custom'].message ?? 'Invalid input';
}
return null;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ValidationMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ValidationMessagesComponent, isStandalone: true, selector: "validation-messages", inputs: { control: "control", controlName: "controlName", config: "config" }, ngImport: i0, template: "@if (control?.invalid && control?.touched) {\n <section class=\"error-messages\" style=\"color: red\">\n @if (control?.errors?.[\"required\"]) {\n <small>{{ controlName }} is required</small>\n }\n @if (control?.errors?.[\"minlength\"]) {\n <small\n >Minimum length:\n {{ getValidatorValue(\"minlength\", \"requiredLength\") }}</small\n >\n }\n @if (control?.errors?.[\"maxlength\"]) {\n <small\n >Maximum length:\n {{ getValidatorValue(\"maxlength\", \"requiredLength\") }}</small\n >\n }\n @if (control?.errors?.[\"pattern\"]) {\n <small>Invalid format</small>\n }\n @if (control?.errors?.[\"email\"]) {\n <small>Invalid email address</small>\n }\n @if (control?.errors?.[\"min\"]) {\n <small\n >Value must be at least {{ getValidatorValue(\"min\", \"min\") }}</small\n >\n }\n @if (control?.errors?.[\"max\"]) {\n <small>Value must not exceed {{ getValidatorValue(\"max\", \"max\") }}</small>\n }\n @if (control?.errors?.[\"custom\"]) {\n <small>{{ getCustomErrorMessage() }}</small>\n }\n </section>\n}\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ValidationMessagesComponent, decorators: [{
type: Component,
args: [{ selector: 'validation-messages', standalone: true, imports: [], template: "@if (control?.invalid && control?.touched) {\n <section class=\"error-messages\" style=\"color: red\">\n @if (control?.errors?.[\"required\"]) {\n <small>{{ controlName }} is required</small>\n }\n @if (control?.errors?.[\"minlength\"]) {\n <small\n >Minimum length:\n {{ getValidatorValue(\"minlength\", \"requiredLength\") }}</small\n >\n }\n @if (control?.errors?.[\"maxlength\"]) {\n <small\n >Maximum length:\n {{ getValidatorValue(\"maxlength\", \"requiredLength\") }}</small\n >\n }\n @if (control?.errors?.[\"pattern\"]) {\n <small>Invalid format</small>\n }\n @if (control?.errors?.[\"email\"]) {\n <small>Invalid email address</small>\n }\n @if (control?.errors?.[\"min\"]) {\n <small\n >Value must be at least {{ getValidatorValue(\"min\", \"min\") }}</small\n >\n }\n @if (control?.errors?.[\"max\"]) {\n <small>Value must not exceed {{ getValidatorValue(\"max\", \"max\") }}</small>\n }\n @if (control?.errors?.[\"custom\"]) {\n <small>{{ getCustomErrorMessage() }}</small>\n }\n </section>\n}\n" }]
}], propDecorators: { control: [{
type: Input
}], controlName: [{
type: Input
}], config: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsaWRhdGlvbi1tZXNzYWdlcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9uZ0Zvcm0vc3JjL2FwcC92YWxpZGF0aW9uLW1lc3NhZ2VzL3ZhbGlkYXRpb24tbWVzc2FnZXMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbmdGb3JtL3NyYy9hcHAvdmFsaWRhdGlvbi1tZXNzYWdlcy92YWxpZGF0aW9uLW1lc3NhZ2VzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVVqRCxNQUFNLE9BQU8sMkJBQTJCO0lBQzdCLE9BQU8sQ0FBMEIsQ0FBQywrQkFBK0I7SUFDakUsV0FBVyxDQUFVLENBQUMsdURBQXVEO0lBQzdFLE1BQU0sQ0FBcUIsQ0FBQyxvQ0FBb0M7SUFFekUsaUJBQWlCLENBQUMsYUFBcUMsRUFBRSxHQUFXO1FBQ2xFLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCxxQkFBcUI7UUFDbkIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUM7WUFDckMsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxPQUFPLElBQUksZUFBZSxDQUFDO1FBQ2xFLENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7d0dBZFUsMkJBQTJCOzRGQUEzQiwyQkFBMkIsNkpDVnhDLDhuQ0FvQ0E7OzRGRDFCYSwyQkFBMkI7a0JBTnZDLFNBQVM7K0JBQ0UscUJBQXFCLGNBQ25CLElBQUksV0FDUCxFQUFFOzhCQUlGLE9BQU87c0JBQWYsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgVmFsaWRhdGlvbkVycm9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEZvcm1Db250cm9sQ29uZmlnIH0gZnJvbSAnLi4vZm9ybUNvbnRyb2xDb25maWcnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWxpZGF0aW9uLW1lc3NhZ2VzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlVXJsOiAnLi92YWxpZGF0aW9uLW1lc3NhZ2VzLmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgVmFsaWRhdGlvbk1lc3NhZ2VzQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY29udHJvbCE6IEFic3RyYWN0Q29udHJvbCB8IG51bGw7IC8vIFRoZSBmb3JtIGNvbnRyb2wgdG8gdmFsaWRhdGVcbiAgQElucHV0KCkgY29udHJvbE5hbWUhOiBzdHJpbmc7IC8vIFRoZSBuYW1lIG9mIHRoZSBjb250cm9sIChmb3IgZGlzcGxheWluZyBpbiBtZXNzYWdlcylcbiAgQElucHV0KCkgY29uZmlnITogRm9ybUNvbnRyb2xDb25maWc7IC8vIFRoZSBjb25maWd1cmF0aW9uIGZvciB0aGUgY29udHJvbFxuXG4gIGdldFZhbGlkYXRvclZhbHVlKHZhbGlkYXRvck5hbWU6IGtleW9mIFZhbGlkYXRpb25FcnJvcnMsIGtleTogc3RyaW5nKTogYW55IHtcbiAgICByZXR1cm4gdGhpcy5jb250cm9sPy5lcnJvcnM/Llt2YWxpZGF0b3JOYW1lXT8uW2tleV07XG4gIH1cblxuICBnZXRDdXN0b21FcnJvck1lc3NhZ2UoKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgaWYgKHRoaXMuY29udHJvbD8uZXJyb3JzPy5bJ2N1c3RvbSddKSB7XG4gICAgICByZXR1cm4gdGhpcy5jb250cm9sLmVycm9yc1snY3VzdG9tJ10ubWVzc2FnZSA/PyAnSW52YWxpZCBpbnB1dCc7XG4gICAgfVxuICAgIHJldHVybiBudWxsO1xuICB9XG59XG4iLCJAaWYgKGNvbnRyb2w/LmludmFsaWQgJiYgY29udHJvbD8udG91Y2hlZCkge1xuICA8c2VjdGlvbiBjbGFzcz1cImVycm9yLW1lc3NhZ2VzXCIgc3R5bGU9XCJjb2xvcjogcmVkXCI+XG4gICAgQGlmIChjb250cm9sPy5lcnJvcnM/LltcInJlcXVpcmVkXCJdKSB7XG4gICAgICA8c21hbGw+e3sgY29udHJvbE5hbWUgfX0gaXMgcmVxdWlyZWQ8L3NtYWxsPlxuICAgIH1cbiAgICBAaWYgKGNvbnRyb2w/LmVycm9ycz8uW1wibWlubGVuZ3RoXCJdKSB7XG4gICAgICA8c21hbGxcbiAgICAgICAgPk1pbmltdW0gbGVuZ3RoOlxuICAgICAgICB7eyBnZXRWYWxpZGF0b3JWYWx1ZShcIm1pbmxlbmd0aFwiLCBcInJlcXVpcmVkTGVuZ3RoXCIpIH19PC9zbWFsbFxuICAgICAgPlxuICAgIH1cbiAgICBAaWYgKGNvbnRyb2w/LmVycm9ycz8uW1wibWF4bGVuZ3RoXCJdKSB7XG4gICAgICA8c21hbGxcbiAgICAgICAgPk1heGltdW0gbGVuZ3RoOlxuICAgICAgICB7eyBnZXRWYWxpZGF0b3JWYWx1ZShcIm1heGxlbmd0aFwiLCBcInJlcXVpcmVkTGVuZ3RoXCIpIH19PC9zbWFsbFxuICAgICAgPlxuICAgIH1cbiAgICBAaWYgKGNvbnRyb2w/LmVycm9ycz8uW1wicGF0dGVyblwiXSkge1xuICAgICAgPHNtYWxsPkludmFsaWQgZm9ybWF0PC9zbWFsbD5cbiAgICB9XG4gICAgQGlmIChjb250cm9sPy5lcnJvcnM/LltcImVtYWlsXCJdKSB7XG4gICAgICA8c21hbGw+SW52YWxpZCBlbWFpbCBhZGRyZXNzPC9zbWFsbD5cbiAgICB9XG4gICAgQGlmIChjb250cm9sPy5lcnJvcnM/LltcIm1pblwiXSkge1xuICAgICAgPHNtYWxsXG4gICAgICAgID5WYWx1ZSBtdXN0IGJlIGF0IGxlYXN0IHt7IGdldFZhbGlkYXRvclZhbHVlKFwibWluXCIsIFwibWluXCIpIH19PC9zbWFsbFxuICAgICAgPlxuICAgIH1cbiAgICBAaWYgKGNvbnRyb2w/LmVycm9ycz8uW1wibWF4XCJdKSB7XG4gICAgICA8c21hbGw+VmFsdWUgbXVzdCBub3QgZXhjZWVkIHt7IGdldFZhbGlkYXRvclZhbHVlKFwibWF4XCIsIFwibWF4XCIpIH19PC9zbWFsbD5cbiAgICB9XG4gICAgQGlmIChjb250cm9sPy5lcnJvcnM/LltcImN1c3RvbVwiXSkge1xuICAgICAgPHNtYWxsPnt7IGdldEN1c3RvbUVycm9yTWVzc2FnZSgpIH19PC9zbWFsbD5cbiAgICB9XG4gIDwvc2VjdGlvbj5cbn1cbiJdfQ==