Support declaring your own validator functions

Author: davidwalschots

README.md

@@ -2,6 +2,17 @@
 
 I believe Reactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.
 
+## Table of contents
+
+* [Installation](#installation)
+* [Basic usage](#basic-usage)
+* [Advanced validation declaration](#advanced-validation-declaration)
+* [Changing when validation messages are displayed](#changing-when-validation-messages-are-displayed)
+* [Declaring your own validator functions](#declaring-your-own-validator-functions)
+* [Edge use cases](#edge-use-cases)
+  * [Handling custom HTML validation messages](#handling-custom-html-validation-messages)
+  * [Using arv-validation-messages when not using `[formGroup]` or `formGroupName` attributes](#using-arv-validation-messages-when-not-using-[formGroup]-or-formGroupName-attributes)
+
 ## Installation
 
 To install this library, run:
@@ -131,6 +142,46 @@ export class AppModule { }
 
 Note that `formSubmitted` can be undefined when it's not known if the form is submitted, due to the form tag missing a formGroup attribute.
 
+## Declaring your own validator functions
+
+Angular provides a limited set of validator functions. To declare your own validator functions _and_ combine it with this library use the `ValidatorDeclaration` class. It supports declaring validators with zero, one or two arguments.
+
+**Note** that if your validator doesn't return an object as the inner error result, but e.g. a `boolean` such as in the examples below, then this will be replaced by an object that can hold the validation message. Thus in the first example below `{ 'hasvalue': true }` becomes `{ 'hasvalue': { 'message': 'validation message' } }`.
+
+```ts
+const hasValueValidator = ValidatorDeclaration.wrapNoArgumentValidator(control => {
+  return !!control.value ? null : { 'hasvalue': true };
+}, 'hasvalue');
+
+const formControl = new FormControl('', hasValueValidator('error message to show'));
+```
+
+```ts
+const minimumValueValidator = ValidatorDeclaration.wrapSingleArgumentValidator((min: number) => {
+  return function(control: AbstractControl): ValidationErrors {
+    return control.value >= min ? null : { 'min': true };
+  };
+}, 'min');
+
+const formControl = new FormControl('', minimumValueValidator(5, 'error message to show'));
+```
+
+```ts
+const betweenValueValidator = ValidatorDeclaration.wrapTwoArgumentValidator((min: number, max: number) => {
+  return function(control: AbstractControl): ValidationErrors {
+    return control.value >= min && control.value <= max ? null : { 'between': true };
+  };
+}, 'between');
+
+const formControl = new FormControl('', betweenValueValidator(5, 10, 'error message to show'));
+```
+
+Wrapping validator functions provided by other packages is also very simple:
+
+```ts
+const minValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.min, 'min')
+```
+
 ## Edge use cases
 
 ### Handling custom HTML validation messages
@@ -183,10 +234,3 @@ Supplying FormControl instances instead of names is also supported:
   </arv-validation-message>
 </arv-validation-messages>
 ```
-
-## Future development
-
-The following features are to be added or are under investigation:
-
-* Creating your own validators and using them together with this library.
-* Providing interfaces for using other popular validation libraries within `angular-reactive-validation`.

angular-reactive-validation/src/public_api.ts

@@ -1,3 +1,4 @@
 export { ReactiveValidationModule } from './reactive-validation.module';
 export { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
 export { Validators } from './validators';
+export { ValidatorDeclaration } from './validator-declaration';

angular-reactive-validation/src/validator-declaration.ts

@@ -0,0 +1,106 @@
+import { ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
+
+/**
+ * @dynamic
+ */
+export class ValidatorDeclaration {
+  /**
+   * Wraps your own validator functions for use with the angular-reactive-validation library.
+   * @param validatorFn A function you want to wrap which can validate a control.
+   * @param resultKey The error key used for indicating an error result as returned from the ValidatorFn.
+   * @param message The message to display when a validation error occurs. A function can also be passed to determine
+   * the message at a later time.
+   */
+  static wrapNoArgumentValidator(validatorFn: ValidatorFn, resultKey: string):
+    (message?: string | (() => string)) => ValidatorFn {
+      return function(message?: string | (() => string)): ValidatorFn {
+        return function(control: AbstractControl): ValidationErrors | null {
+          return ValidatorDeclaration.validateAndSetMessageIfInvalid(control, () => validatorFn, resultKey, message);
+        };
+      };
+  }
+
+  /**
+   * Wraps your own validator functions for use with the angular-reactive-validation library.
+   * @param validatorFactoryFn A function which accepts a single argument and returns a ValidatorFn.
+   * @param resultKey The error key used for indicating an error result as returned from the ValidatorFn.
+   */
+  static wrapSingleArgumentValidator<TInput>(validatorFactoryFn: ((arg1: TInput) => ValidatorFn), resultKey: string):
+    (arg1: TInput | (() => TInput), message?: string | ((arg1: TInput) => string)) => ValidatorFn {
+
+      return function (arg1: TInput | (() => TInput), message?: string | ((arg1: TInput) => string)): ValidatorFn {
+        return function(control: AbstractControl): ValidationErrors | null {
+          arg1 = ValidatorDeclaration.unwrapArgument(arg1);
+
+          return ValidatorDeclaration.validateAndSetMessageIfInvalid(control, validatorFactoryFn, resultKey, message, arg1);
+        };
+      };
+  }
+
+  /**
+   * Wraps your own validator functions for use with the angular-reactive-validation library.
+   * @param validatorFactoryFn A function which accepts two arguments and returns a ValidatorFn.
+   * @param resultKey The error key used for indicating an error result as returned from the ValidatorFn.
+   */
+  static wrapTwoArgumentValidator<TInput1, TInput2>(validatorFactoryFn: ((arg1: TInput1, arg2: TInput2) => ValidatorFn), resultKey: string):
+    (arg1: TInput1 | (() => TInput1), arg2: TInput2 | (() => TInput2), message?: string | ((arg1: TInput1, arg2: TInput2) => string)) =>
+    ValidatorFn {
+
+      return function (arg1: TInput1 | (() => TInput1), arg2: TInput2 | (() => TInput2),
+        message?: string | ((arg1: TInput1, arg2: TInput2) => string)): ValidatorFn {
+
+          return function(control: AbstractControl): ValidationErrors | null {
+            arg1 = ValidatorDeclaration.unwrapArgument(arg1);
+            arg2 = ValidatorDeclaration.unwrapArgument(arg2);
+
+            return ValidatorDeclaration.validateAndSetMessageIfInvalid(control, validatorFactoryFn, resultKey, message, arg1, arg2);
+          };
+      };
+  }
+
+  private static unwrapArgument<T>(arg: T | (() => T)): T {
+    if (typeof arg === 'function') {
+      arg = arg();
+    }
+
+    return arg;
+  }
+
+  private static validateAndSetMessageIfInvalid(control: AbstractControl,
+    validatorFactoryFn: (...args: any[]) => ValidatorFn, resultKey: string,
+    message?: string | ((...args: any[]) => string), ...args: any[]): ValidationErrors {
+
+      const validationResult = ValidatorDeclaration.validate(control, validatorFactoryFn, ...args);
+      ValidatorDeclaration.setMessageIfInvalid(control, resultKey, validationResult, message, ...args);
+
+      return validationResult;
+  }
+
+  private static validate(control: AbstractControl, validatorFactoryFn: (...args: any[]) => ValidatorFn, ...args: any[]): ValidationErrors {
+    const wrappedValidatorFn = validatorFactoryFn(...args);
+    return wrappedValidatorFn(control);
+  }
+
+  private static setMessageIfInvalid(control: AbstractControl, resultKey: string,
+    validationResult: ValidationErrors, message?: string | ((...args: any[]) => string), ...args: any[]) {
+    if (message) {
+      if (validationResult && validationResult[resultKey]) {
+        if (typeof message === 'function') {
+          message = message(...args);
+        }
+
+        // Not all validators set an object. Often they'll simply set a property to true.
+        // Here, we replace any non-object (or array) to be an object on which we can set a message.
+        if (!ValidatorDeclaration.isObject(validationResult[resultKey])) {
+          validationResult[resultKey] = {};
+        }
+
+        validationResult[resultKey]['message'] = message;
+      }
+    }
+  }
+
+  private static isObject(arg: any) {
+    return arg !== null && typeof arg === 'object' && !Array.isArray(arg);
+  }
+}

angular-reactive-validation/src/validators.ts

@@ -1,13 +1,21 @@
-import { Validators as AngularValidators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+import { Validators as AngularValidators, ValidatorFn } from '@angular/forms';
+import { ValidatorDeclaration } from './validator-declaration';
 
 /**
  * Provides a set of validators used by form controls.
  *
  * Code comments have been copied from the Angular source code.
- *
- * @dynamic
  */
 export class Validators {
+  private static minValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.min, 'min');
+  private static maxValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.max, 'max');
+  private static minLengthValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.minLength, 'minlength');
+  private static maxLengthValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.maxLength, 'maxlength');
+  private static patternValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.pattern, 'pattern');
+  private static requiredValidator = ValidatorDeclaration.wrapNoArgumentValidator(AngularValidators.required, 'required');
+  private static requiredTrueValidator = ValidatorDeclaration.wrapNoArgumentValidator(AngularValidators.requiredTrue, 'required');
+  private static emailValidator = ValidatorDeclaration.wrapNoArgumentValidator(AngularValidators.email, 'email');
+
   /**
    * No-op validator.
    */
@@ -57,7 +65,7 @@ export class Validators {
    */
   static min(min: () => number, messageFunc: ((min: number) => string)): ValidatorFn;
   static min(min: number | (() => number), message?: string | ((min: number) => string)): ValidatorFn {
-    return Validators.singleArgumentValidator(AngularValidators.min, 'min', min, message);
+    return Validators.minValidator(min, message);
   }
 
   /**
@@ -89,7 +97,7 @@ export class Validators {
    */
   static max(max: () => number, messageFunc: ((max: number) => string)): ValidatorFn;
   static max(max: number | (() => number), message?: string | ((max: number) => string)): ValidatorFn {
-    return Validators.singleArgumentValidator(AngularValidators.max, 'max', max, message);
+    return Validators.maxValidator(max, message);
   }
 
   /**
@@ -121,7 +129,7 @@ export class Validators {
    */
   static minLength(minLength: () => number, messageFunc: ((minLength: number) => string)): ValidatorFn;
   static minLength(minLength: number | (() => number), message?: string | ((minLength: number) => string)): ValidatorFn {
-    return Validators.singleArgumentValidator(AngularValidators.minLength, 'minlength', minLength, message);
+    return Validators.minLengthValidator(minLength, message);
   }
 
   /**
@@ -153,7 +161,7 @@ export class Validators {
    */
   static maxLength(maxLength: () => number, messageFunc: ((maxLength: number) => string)): ValidatorFn;
   static maxLength(maxLength: number | (() => number), message?: string | ((maxLength: number) => string)): ValidatorFn {
-    return Validators.singleArgumentValidator(AngularValidators.maxLength, 'maxlength', maxLength, message);
+    return Validators.maxLengthValidator(maxLength, message);
   }
 
   /**
@@ -177,7 +185,7 @@ export class Validators {
    */
   static pattern(pattern: () => string|RegExp, message: string): ValidatorFn;
   static pattern(pattern: (string|RegExp) | (() => string|RegExp), message?: string): ValidatorFn {
-    return Validators.singleArgumentValidator(AngularValidators.pattern, 'pattern', pattern, message);
+    return Validators.patternValidator(pattern, message);
   }
 
   /**
@@ -191,7 +199,7 @@ export class Validators {
    */
   static required(message: string): ValidatorFn;
   static required(message?: string): ValidatorFn {
-    return Validators.zeroArgumentValidator(AngularValidators.required, 'required', message);
+    return Validators.requiredValidator(message);
   }
 
   /**
@@ -205,7 +213,7 @@ export class Validators {
    */
   static requiredTrue(message: string): ValidatorFn;
   static requiredTrue(message?: string): ValidatorFn {
-    return Validators.zeroArgumentValidator(AngularValidators.requiredTrue, 'required', message);
+    return Validators.requiredTrueValidator(message);
   }
 
   /**
@@ -219,50 +227,6 @@ export class Validators {
    */
   static email(message: string): ValidatorFn;
   static email(message?: string): ValidatorFn {
-    return Validators.zeroArgumentValidator(AngularValidators.email, 'email', message);
-  }
-
-  private static singleArgumentValidator<TInput>(validatorFunc: ((TInput) => ValidatorFn), resultKey: string,
-    input: TInput | (() => TInput), message?: string | ((TInput) => string)): ValidatorFn {
-      return function(c: AbstractControl): ValidationErrors | null {
-        if (typeof input === 'function') {
-          input = input();
-        }
-
-        const nativeValidator = validatorFunc(input);
-        const result = nativeValidator(c);
-
-        if (message) {
-          if (result && result[resultKey]) {
-            if (typeof message === 'function') {
-              message = message(input);
-            }
-
-            result[resultKey]['message'] = message;
-          }
-        }
-
-        return result;
-      };
-  }
-
-  private static zeroArgumentValidator(validatorFunc: ValidatorFn, resultKey: string, message?: string) {
-    return function(c: AbstractControl): ValidationErrors | null {
-      const result = validatorFunc(c);
-
-      if (message) {
-        if (result && result[resultKey]) {
-          // required, requiredTrue and email validators don't set an object, but set a boolean property.
-          // When this happens, we replace the boolean with an object containing the message.
-          if (typeof result[resultKey] === 'boolean') {
-            result[resultKey] = { message: message };
-          } else {
-            result[resultKey]['message'] = message;
-          }
-        }
-      }
-
-      return result;
-    };
+    return Validators.emailValidator(message);
   }
 }