bryandh/.Aurelia Validation rule extending.md

## .Aurelia Validation rule extending.md

      
    Raw
  

              .Aurelia Validation rule extending.md
            
          
    Aurelia Validation rule extending

See => https://stackoverflow.com/questions/48968988/extend-aurelia-validation-rules-on-a-per-class-basis

  
## app.html
<template>

    valid? => ${valid}

</template>

## app.js
import * as x from 'aurelia-dependency-injection';
import { Product } from './product';
import * as av from 'aurelia-validation';
// import { ValidationController } from 'aurelia-validation';

console.log('x', x);
console.log('av', av);

// @inject(NewInstance.of(ValidationController))
export class App
{
  constructor(controller)
  {
    console.log('controller', controller);
    // console.log('ValidationRules', ValidationRules);

    const product = new Product();
    product.name = 'test product'
    console.log('product', product);
  }
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>

  <body aurelia-app="main">
    Loading...


    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>

    <!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/amd/aurelia-validation.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/commonjs/aurelia-validation.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/es2015/aurelia-validation.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/es2017/aurelia-validation.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/native-modules/aurelia-validation.js"></script>-->

    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  console.log('aurelia configure', aurelia);

  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation');

    aurelia.start().then(() => aurelia.setRoot());
}

## product.js
import { ValidationRules } from "aurelia-validation";
// import * as av from 'aurelia-validation';

export class Product {
  name;
  price;
}

ValidationRules
  .ensure('name').required()
  .ensure('price').required()
  .on(Product);
	import * as x from 'aurelia-dependency-injection';
	import { Product } from './product';
	import * as av from 'aurelia-validation';
	// import { ValidationController } from 'aurelia-validation';

	console.log('x', x);
	console.log('av', av);

	// @inject(NewInstance.of(ValidationController))
	export class App
	{
	constructor(controller)
	{
	console.log('controller', controller);
	// console.log('ValidationRules', ValidationRules);

	const product = new Product();
	product.name = 'test product'
	console.log('product', product);
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	</head>

	<body aurelia-app="main">
	Loading...


	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>

	<!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/amd/aurelia-validation.js"></script>-->
	<!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/commonjs/aurelia-validation.js"></script>-->
	<!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/es2015/aurelia-validation.js"></script>-->
	<!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/es2017/aurelia-validation.js"></script>-->
	<!--<script src="https://cdn.rawgit.com/aurelia/validation/383490df/dist/native-modules/aurelia-validation.js"></script>-->

	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	console.log('aurelia configure', aurelia);

	aurelia.use
	.standardConfiguration()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	import { ValidationRules } from "aurelia-validation";
	// import * as av from 'aurelia-validation';

	export class Product {
	name;
	price;
	}

	ValidationRules
	.ensure('name').required()
	.ensure('price').required()
	.on(Product);