Add translation for validation

Author: dweber019

README.md

@@ -232,6 +232,52 @@ The function `validateFilledFieldsWithValidationRules` us really useful as you c
 
 The function `controllerValidByRules` will check if a validation controller is valid.
 
+This could be an example implementation
+```
+class FormExample {
+
+  @bindable({ defaultBindingMode: bindingMode.twoWay }) public user: User;
+
+  private controller: ValidationController;
+  private rules: Rule<CustomerContactRestModel, any>[][];
+
+  public constructor(
+    private validationControllerFactory: ValidationControllerFactory
+  ) {
+    this.controller = this.validationControllerFactory.createForCurrentScope();
+    this.controller.validateTrigger = validateTrigger.changeOrBlur;
+  }
+
+  public bind(): void {
+    this.setupValidationRules();
+    validateFilledFieldsWithValidationRules(this.rules, this.user, this.controller);
+  }
+
+  @computedFrom('user')
+  public get isValid(): boolean {
+    return controllerValidByRules(this.rules, this.user, this.controller);
+  }
+
+  private setupValidationRules(): void {
+    this.rules = ValidationRules
+      .ensure((user: User) => user.lastName)
+        .displayName('USER.LAST_NAME')
+        .required()
+      .ensure((user: User) => user.email)
+        .displayName('USER.EMAIL')
+        .email()
+      .on(this.customerContact).rules;
+  }
+}
+```
+
+### i18n integration
+You can pass a tranlation string into the `displayName('USER.LAST_NAME')` and it will be translated for you.
+
+Additionally you can translate methods like `.required()` in `src/local/*` as demostrated in the files.
+
+If you use the the method `withMessageKey('YOUR.TRANSLATION')` you can pass a translation string and it will be translated for you.
+
 ## Route generator service
 If you have router tree like this
 ```

src/app/main.ts

@@ -15,6 +15,9 @@ const appConfigService = new AppConfigService();
  */
 import { Aurelia, LogManager, PLATFORM } from 'aurelia-framework';
 import { ConsoleAppender } from 'aurelia-logging-console';
+import { ValidationMessageProvider } from 'aurelia-validation';
+import { Expression } from 'aurelia-binding';
+import { I18N } from 'aurelia-i18n';
 
 /**
  * Locals i18n imports
@@ -133,4 +136,19 @@ export async function configure(aurelia: Aurelia): Promise<void> {
   const offline = await System.import('offline-plugin/runtime');
   offline.install();
   */
+
+  // Configure validation translations
+  ValidationMessageProvider.prototype.getMessage = function (key): Expression {
+    const i18n = aurelia.container.get(I18N);
+    const translationId = `VALIDATIONS.${key}`;
+    let translation = i18n.tr(translationId);
+    if (translation === translationId) {
+      translation = i18n.tr(key);
+    }
+    return (this as any).parser.parse(translation);
+  };
+  ValidationMessageProvider.prototype.getDisplayName = function (...args): string {
+    const i18n = aurelia.container.get(I18N);
+    return i18n.tr(args[1]);
+  };
 }

src/locales/de_CH.json

@@ -1,4 +1,7 @@
 {
+  "VALIDATIONS": {
+    "required": "${$displayName} fehlt!"
+  },
   "TITLE": "Übersetztungs Titel",
   "TR_ATTR": "...in Deutsch",
   "TR_SIGNALER": "Signaler Beispiel funktioniert..."

src/locales/en_US.json

@@ -1,4 +1,7 @@
 {
+  "VALIDATIONS": {
+    "required": "${$displayName} missing!"
+  },
   "TITLE": "Translation Title",
   "TR_ATTR": "...in English",
   "TR_SIGNALER": "Signaler Example works..."