feat: sync validation errors with error messages

npm/ng-packs/packages/core/src/lib/tests/validators.spec.ts

@@ -7,7 +7,7 @@ import { validateUrl } from '../validators/url.validator';
 
 describe('Validators', () => {
   describe('Credit Card Validator', () => {
-    const error = { creditCardNumber: true };
+    const error = { creditCard: true };
 
     test.each`
       input                                       | expected
@@ -49,7 +49,7 @@ describe('Validators', () => {
 
   describe('Email Validator', () => {
     it('should return email validator of Angular', () => {
-      expect(AbpValidators.email()).toBe(Validators.email);
+      expect(AbpValidators.emailAddress()).toBe(Validators.email);
     });
   });
 
@@ -61,12 +61,12 @@ describe('Validators', () => {
       ${''}        | ${undefined}                  | ${null}
       ${0}         | ${undefined}                  | ${null}
       ${Infinity}  | ${undefined}                  | ${null}
-      ${'-1'}      | ${{ minimum: 0 }}             | ${{ min: 0, max: Infinity }}
-      ${-1}        | ${{ minimum: 0 }}             | ${{ min: 0, max: Infinity }}
-      ${2}         | ${{ minimum: 3, maximum: 5 }} | ${{ min: 3, max: 5 }}
+      ${'-1'}      | ${{ minimum: 0 }}             | ${{ range: { min: 0, max: Infinity } }}
+      ${-1}        | ${{ minimum: 0 }}             | ${{ range: { min: 0, max: Infinity } }}
+      ${2}         | ${{ minimum: 3, maximum: 5 }} | ${{ range: { min: 3, max: 5 } }}
       ${3}         | ${{ minimum: 3, maximum: 5 }} | ${null}
       ${5}         | ${{ minimum: 3, maximum: 5 }} | ${null}
-      ${6}         | ${{ minimum: 3, maximum: 5 }} | ${{ min: 3, max: 5 }}
+      ${6}         | ${{ minimum: 3, maximum: 5 }} | ${{ range: { min: 3, max: 5 } }}
     `(
       'should return $expected when input is $input and options are $options',
       ({ input, options, expected }) => {
@@ -126,9 +126,9 @@ describe('Validators', () => {
       ${null}      | ${undefined}            | ${null}
       ${undefined} | ${undefined}            | ${null}
       ${''}        | ${undefined}            | ${null}
-      ${'ab'}      | ${{ minimumLength: 3 }} | ${{ minlength: 3 }}
+      ${'ab'}      | ${{ minimumLength: 3 }} | ${{ minlength: { requiredLength: 3 } }}
       ${'abp'}     | ${{ minimumLength: 3 }} | ${null}
-      ${'abp'}     | ${{ maximumLength: 2 }} | ${{ maxlength: 2 }}
+      ${'abp'}     | ${{ maximumLength: 2 }} | ${{ maxlength: { requiredLength: 2 } }}
       ${'abp'}     | ${{ maximumLength: 3 }} | ${null}
     `(
       'should return $expected when input is $input and options are $options',

npm/ng-packs/packages/core/src/lib/validators/credit-card.validator.ts

@@ -1,7 +1,7 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
 
 export interface CreditCardError {
-  creditCardNumber: true;
+  creditCard: true;
 }
 
 export function validateCreditCard(): ValidatorFn {
@@ -10,7 +10,7 @@ export function validateCreditCard(): ValidatorFn {
 
     if (['', null, undefined].indexOf(control.value) > -1) return null;
 
-    return isValidCreditCard(String(control.value)) ? null : { creditCardNumber: true };
+    return isValidCreditCard(String(control.value)) ? null : { creditCard: true };
   };
 }
 

npm/ng-packs/packages/core/src/lib/validators/index.ts

@@ -12,7 +12,7 @@ export * from './url.validator';
 
 export const AbpValidators = {
   creditCard: validateCreditCard,
-  email: () => Validators.email,
+  emailAddress: () => Validators.email,
   range: validateRange,
   required: validateRequired,
   stringLength: validateStringLength,

npm/ng-packs/packages/core/src/lib/validators/range.validator.ts

@@ -1,8 +1,10 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
 
 export interface RangeError {
-  max: number;
-  min: number;
+  range: {
+    max: number;
+    min: number;
+  };
 }
 
 export interface RangeOptions {
@@ -22,9 +24,9 @@ export function validateRange({ maximum = Infinity, minimum = 0 }: RangeOptions
 }
 
 function getMaxError(value: number, max: number, min: number): RangeError {
-  return value > max ? { max, min } : null;
+  return value > max ? { range: { max, min } } : null;
 }
 
 function getMinError(value: number, min: number, max: number): RangeError {
-  return value < min ? { min, max } : null;
+  return value < min ? { range: { min, max } } : null;
 }

npm/ng-packs/packages/core/src/lib/validators/string-length.validator.ts

@@ -1,8 +1,12 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
 
 export interface StringLengthError {
-  maxlength?: number;
-  minlength?: number;
+  maxlength?: {
+    requiredLength: number;
+  };
+  minlength?: {
+    requiredLength: number;
+  };
 }
 
 export interface StringLengthOptions {
@@ -25,10 +29,10 @@ export function validateStringLength({
   };
 }
 
-function getMaxLengthError(value: string, maxlength: number): StringLengthError {
-  return value.length > maxlength ? { maxlength } : null;
+function getMaxLengthError(value: string, requiredLength: number): StringLengthError {
+  return value.length > requiredLength ? { maxlength: { requiredLength } } : null;
 }
 
-function getMinLengthError(value: string, minlength: number): StringLengthError {
-  return value.length < minlength ? { minlength } : null;
+function getMinLengthError(value: string, requiredLength: number): StringLengthError {
+  return value.length < requiredLength ? { minlength: { requiredLength } } : null;
 }

npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts

@@ -7,12 +7,12 @@ import { NgxsModule } from '@ngxs/store';
 import { AccountLayoutComponent } from './components/account-layout/account-layout.component';
 import { ApplicationLayoutComponent } from './components/application-layout/application-layout.component';
 import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component';
-import { LayoutState } from './states/layout.state';
-import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
-import { InitialService } from './services/initial.service';
 import { LogoComponent } from './components/logo/logo.component';
-import { RoutesComponent } from './components/routes/routes.component';
 import { NavItemsComponent } from './components/nav-items/nav-items.component';
+import { RoutesComponent } from './components/routes/routes.component';
+import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
+import { InitialService } from './services/initial.service';
+import { LayoutState } from './states/layout.state';
 
 export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
@@ -34,15 +34,19 @@ export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, Empt
     NgxValidateCoreModule.forRoot({
       targetSelector: '.form-group',
       blueprints: {
-        email: 'AbpAccount::ThisFieldIsNotAValidEmailAddress.',
-        max: 'AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+        creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
+        email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
+        max: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
         maxlength:
-          'AbpAccount::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
-        min: 'AbpAccount::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+          'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
+        min: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
         minlength:
-          'AbpAccount::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}[{{ requiredLength }}]',
-        required: 'AbpAccount::ThisFieldIsRequired.',
+          'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}[{{ requiredLength }}]',
+        ngbDate: 'AbpValidation::ThisFieldIsNotValid.',
         passwordMismatch: 'AbpIdentity::Identity.PasswordConfirmationFailed',
+        range: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+        required: 'AbpValidation::ThisFieldIsRequired.',
+        url: 'AbpValidation::ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl',
       },
       errorTemplate: ValidationErrorComponent,
     }),