add validation example

Author: dweber019

README.md

@@ -203,5 +203,5 @@ Typedoc is generated with command ```npm run build:docs``` into directoy ```docs
 - [ ] Add electron
 - [X] Add pipline example
 - [X] Add utility converters https://www.npmjs.com/package/aurelia-utility-converters
-- [ ] Add validation example
+- [X] Add validation example
 - [X] Add configure http client example

package.json

@@ -89,6 +89,7 @@
     "aurelia-templating-binding": "^1.2.0",
     "aurelia-templating-resources": "^1.2.0",
     "aurelia-templating-router": "^1.0.0",
+    "aurelia-validation": "^1.0.0-beta.1.0.1",
     "bootstrap-sass": "^3.3.7",
     "font-awesome": "^4.7.0",
     "i18next-browser-languagedetector": "^1.0.1",

src/app/app.vm.ts

@@ -29,6 +29,10 @@ export class AppViewModel {
     this.configureHttpClient();
   }
 
+  public attached(): void {
+    this.configureMoment();
+  }
+
   public configureRouter(config: RouterConfiguration, router: Router): void {
     config.title = this.i18n.tr('TITLE');
     if (this.appConfigService.platformIsBrowser()) {

src/app/main.ts

@@ -70,6 +70,14 @@ export async function configure(aurelia: Aurelia): Promise<void> {
         }
       });
     })
+    /**
+     * Aurelia Validation plugin
+     * See: https://github.com/aurelia/validation
+     *
+     * Configure i18n for aurelia-validation error messages.
+     * See: http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics
+     */
+    .plugin('aurelia-validation')
     // Uncomment the line below to enable animation.
     // .plugin('aurelia-animator-css');
     // if the css animator is enabled, add swap-order="after" to all router-view elements

src/app/modules/welcome/welcome.vm.html

@@ -35,5 +35,9 @@ <h3>Switch Language</h3>
     <h3>Converter utility</h3>
     <p>${ jsonProperty | json }</p>
     <p>Available converters are: filter, json, limit, md5 and sort</p>
+
+    <h3>Validation</h3>
+    <p>Validation is: ${validationValid}</p>
+    <button class="btn btn-primary" click.delegate="validateFirstName()">validate</button>
   </section>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,4 +1,5 @@
 import { autoinject } from 'aurelia-framework';
+import { ValidationControllerFactory, ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
 
 import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
@@ -7,26 +8,48 @@ import { LanguageService } from './../../services/language.service';
 @autoinject
 export class Welcome {
   private logger: Logger;
+  private vController: ValidationController;
 
 	public heading: string = 'Welcome to the Aurelia Navigation App';
 	public firstName: string = 'John';
 	public lastName: string = 'Doe';
 	public previousValue: string = this.fullName;
   public currentDate: Date = new Date();
   public jsonProperty: Object = { key1: 'value1', key2: 'value2' };
+  public validationValid: boolean = false;
 
 	constructor(
     private appConfigService: AppConfigService,
-    private languageService: LanguageService
+    private languageService: LanguageService,
+    validationControllerFactory: ValidationControllerFactory
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
 		this.logger.info('appConfig => name:', appConfigService.getName());
 		this.logger.info('appConfig => version:', appConfigService.getVersion());
 		this.logger.info('appConfig => env:', appConfigService.getEnv());
 		this.logger.info('appConfig => platform:', appConfigService.getPlatform());
 		this.logger.info('appConfig => config:', appConfigService.getConfig());
+
+    this.vController = validationControllerFactory.createForCurrentScope();
+    this.vController.validateTrigger = validateTrigger.manual;
+	}
+
+  public canDeactivate(): boolean {
+		if (this.fullName !== this.previousValue) {
+			return confirm('Are you sure you want to leave?');
+		}
+    return true;
 	}
 
+  public validateFirstName(): void {
+    this.vController
+      .validate({
+        object: this,
+        rules: ValidationRules.ensure('firstName').required().rules
+      })
+      .then(r => this.validationValid = r.valid);
+  }
+
 	//Getters can't be directly observed, so they must be dirty checked.
 	//However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
 	//To optimize by declaring the properties that this getter is computed from, uncomment the line below
@@ -41,13 +64,6 @@ export class Welcome {
 		alert(`Welcome, ${this.fullName}!`);
 	}
 
-	public canDeactivate(): boolean {
-		if (this.fullName !== this.previousValue) {
-			return confirm('Are you sure you want to leave?');
-		}
-    return true;
-	}
-
   public switchLanguage(): void {
     const lang = this.languageService.getCurrentLang();
     if (lang === this.languageService.getSupportedLanguages()[0]) {

webpack.config.js

@@ -82,7 +82,8 @@ module.exports = function (envArguments) {
       'aurelia-templating',
       'aurelia-templating-binding',
       'aurelia-templating-router',
-      'aurelia-templating-resources'
+      'aurelia-templating-resources',
+      'aurelia-validation'
     ],
     theme: [
       'bootstrap-sass'