ng-form-group-validation-messages
Version:
A simple validation library for Angular
193 lines (185 loc) • 8.68 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, ViewChild, ContentChild, Input, Optional, Inject, Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Validators, NgControl } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
class NgValidationService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NgValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NgValidationService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NgValidationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
const ERROR_MESSAGE = {
// error: {
required: (name, { ...args }) => `${name} is required`,
minlength: (name, { ...args }) => `${name} cannot be less than ${args?.["requiredLength"]} characters`,
maxlength: (name, { ...args }) => `${name} cannot be more than ${args?.["requiredLength"]} characters`,
min: (name, { ...args }) => `${name} cannot be less than ${args?.["min"]}`,
max: (name, { ...args }) => `${name} cannot be more than ${args?.["max"]}`,
email: (name, { ...args }) => `${name} is not a valid email`,
isAlphabet: (name, { ...args }) => `${name} should be alphabets`,
isSmallCase: (name, { ...args }) => `${name} should be smallcase charecters`,
isLargeCase: (name, { ...args }) => `${name} should be largecase charecters`,
isNumeric: (name, { ...args }) => `${name} should be number`,
isCode: (name, { ...args }) => `${name} should be alphanumeric`,
isUrl: (name, { ...args }) => `${name} should be url`,
isColourCode: (name, { ...args }) => `${name} should be color`,
isGeoLocation: (name, { ...args }) => `${name} should be geo location`,
ipv4: (name, { ...args }) => `${name} should be ipv4`,
ipv6: (name, { ...args }) => `${name} should be ipv6`,
// }
};
class NgValidationComponent {
constructor(customMessages = {}) {
this.customMessages = customMessages;
this.label = "field";
this.isControlError = false;
this.requiredStar = false;
this.errorMsg = new BehaviorSubject("");
}
ngAfterViewInit() {
this.formControl?.control?.valueChanges.subscribe(value => {
debugger;
if (this.formControl && this.formControl.control && this.formControl.control.errors) {
this.formGroup.nativeElement.classList.add('e-error');
this.isControlError = true;
this.errorMsg.next(this.getErrorMessage(this.formControl, this.label));
}
if (this.formControl && this.formControl.control && !this.formControl.control.errors) {
this.formGroup.nativeElement.classList.remove('e-error');
this.isControlError = false;
}
});
}
get validator() {
return this?.formControl?.control?.hasValidator(Validators.required);
}
getErrorMessage(formControl, field) {
let name = field || 'This Field';
name = name.charAt(0).toUpperCase() + name.slice(1);
if (formControl.invalid) {
const errors = formControl.control?.errors;
const [errorKey] = Object.keys(errors);
let message = `${name} is invalid`;
if (this.customMessages && errorKey in this.customMessages) {
return this.customMessages[errorKey](name, errors[errorKey]);
}
else if (errorKey in ERROR_MESSAGE) {
return ERROR_MESSAGE[errorKey](name, errors[errorKey]);
}
return message;
}
return (`${name} is invalid`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NgValidationComponent, deps: [{ token: 'CUSTOM_MESSAGES', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: NgValidationComponent, isStandalone: true, selector: "validate", inputs: { label: "label" }, queries: [{ propertyName: "formControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "formControlElement", first: true, predicate: ["control"], descendants: true }], viewQueries: [{ propertyName: "formGroup", first: true, predicate: ["formGroup"], descendants: true }], ngImport: i0, template: `
<div #formGroup class="form-group">
<div>
{{label}} @if (validator) {<sup class="mandatory-sign">*</sup>}
</div>
<div>
<ng-content></ng-content>
@if (isControlError)
{<div class="error-message">
{{errorMsg| async}}
</div>
}
</div>
</div>
`, isInline: true, styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NgValidationComponent, decorators: [{
type: Component,
args: [{ selector: 'validate', standalone: true, imports: [AsyncPipe], template: `
<div #formGroup class="form-group">
<div>
{{label}} @if (validator) {<sup class="mandatory-sign">*</sup>}
</div>
<div>
<ng-content></ng-content>
@if (isControlError)
{<div class="error-message">
{{errorMsg| async}}
</div>
}
</div>
</div>
` }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: ['CUSTOM_MESSAGES']
}] }], propDecorators: { label: [{
type: Input
}], formControl: [{
type: ContentChild,
args: [NgControl]
}], formControlElement: [{
type: ContentChild,
args: ['control']
}], formGroup: [{
type: ViewChild,
args: ['formGroup']
}] } });
function lowercaseValidator() {
return (control) => {
const value = control.value;
return value && /^[a-z]+$/.test(value) ? null : { isSmallCase: true };
};
}
function uppercaseValidator() {
return (control) => {
const value = control.value;
return value && /^[A-Z]+$/.test(value) ? null : { isLargeCase: true };
};
}
function alphabetValidator() {
return (control) => {
const value = control.value;
return value && /^[A-Za-z]+$/.test(value) ? null : { isNumeric: true };
};
}
function alphanumericValidator() {
return (control) => {
const value = control.value;
return value && /^[a-zA-Z0-9]+$/.test(value) ? null : { isCode: true };
};
}
function urlValidator() {
return (control) => {
const value = control.value;
return value && /^(https?:\/\/)?([\w\-]+(\.[\w\-]+)+)(:[0-9]{1,5})?(\/[^\s]*)?$/.test(value) ? null : { isUrl: true };
};
}
function hexColorCodeValidator() {
return (control) => {
const value = control.value;
return value && /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value) ? null : { isColourCode: true };
};
}
function ipv4Validator() {
return (control) => {
const value = control.value;
return value && /^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.|$)){4}$/.test(value) ? null : { ipv4: true };
};
}
function ipv6Validator() {
return (control) => {
const value = control.value;
return value && /^(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|::|(([0-9a-fA-F]{1,4}:){1,6}:)|(([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2})|(([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3})|(([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4})|(([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5})|([0-9a-fA-F]{1,4}:)((:[0-9a-fA-F]{1,4}){1,6}))$/.test(value) ? null : { ipv6: true };
};
}
/*
* Public API Surface of ng-validation
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgValidationComponent, NgValidationService, alphabetValidator, alphanumericValidator, hexColorCodeValidator, ipv4Validator, ipv6Validator, lowercaseValidator, uppercaseValidator, urlValidator };
//# sourceMappingURL=ng-form-group-validation-messages.mjs.map