taosd/app.html

## app.html
<template>
  <require from="./registration-form"></require>

  <registration-form></registration-form>
</template>

## app.js
export class App {
}

## bootstrap-form-renderer.js
import { ValidationRenderer, RenderInstruction, ValidateResult } from 'aurelia-validation';

// Custom renderer (modified): https://aurelia.io/docs/plugins/validation#custom-renderers

export class BootstrapFormRenderer {

    render(instruction: RenderInstruction) {
		for (let { result, elements } of instruction.unrender) {
			for (let element of elements) {
				this.remove(element, result);
			}
		}
		for (let { result, elements } of instruction.render) {
			for (let element of elements) {
				this.add(element, result);
			}
		}
    }

    add(element: Element, result: ValidateResult) {
      	if (result.valid) return;
      	const formGroup = element.closest('.form-group');
      	//if (!formGroup || element.hasAttribute('disabled')) return;

		// Add a bunch of error classes
		formGroup.classList.add('text-danger');
		element.classList.add('border');
		element.classList.add('border-danger');
		element.classList.add('text-danger');

		const message = document.createElement('small');
		message.className = 'help-block validation-message';
		message.textContent = result.message;
		message.id = `validation-message-${result.id}`;
		formGroup.appendChild(message);
    }

    remove(element: Element, result: ValidateResult) {
      	if (result.valid) return;

      	const formGroup = element.closest('.form-group');
      	if (!formGroup) return;

      	const message = formGroup.querySelector(`#validation-message-${result.id}`);
      	if (message) {
        	formGroup.removeChild(message);

        	// Add a bunch of error classes
			if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
				formGroup.classList.remove('text-danger');
				element.classList.remove('border');
				element.classList.remove('border-danger');
				element.classList.remove('text-danger');
			}
      	}
	}

}


## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  <body aurelia-app="main" class="m-4">
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation');

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

## registration-form.html
<template>
  <button click.delegate="$this.getErrors()">Get Errors</button>
  <div class="row">
		<div class="col-12">
			<div class="alert alert-warning alert-dismissible show fade">
				configuration.widgetPackage: <b>${$this.configuration.widgetPackage || '-'}</b><br/>
				configuration.settings.screenType: <b>${$this.configuration.screenType || '-'}</b><br/>
				errors: <b>${$this.errors}</b>

			</div>
		</div>
	</div>
  <div class="row">
		<div class="col">
			<div class="form-group">
				<select class="custom-select" value.bind="$this.selectedWidgetPackage & validateOnChange" validation-errors.bind="selectedWidgetPackageErrors" >
					<option model.bind="null">Select a widget package</option>
					<option repeat.for="widget of widgets" model.bind="widget">
						${widget.name}
					</option>
				</select>
			</div>
		</div>
		<div class="col">
			<div class="form-group">
				<select class="custom-select" value.bind="$this.selectedOrientation & validateOnChange" disabled.bind="!$this.selectedWidgetPackage" validation-errors.bind="selectedOrientationErrors">
				  	<option model.bind="null">Select screen orientation</option>
					<option repeat.for="screen of relevantWidgetPackage" model.bind="screen">
						${screen.type}
					</option>
				</select>
			</div>
		</div>
	</div>
</template>

## registration-form.js
import { bindable, inject } from 'aurelia-framework';
import { BindingEngine, computedFrom, observable } from "aurelia-binding";
import { ValidationControllerFactory, ValidationController, ValidationRules, ValidateResult } from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';

@inject(ValidationControllerFactory)
export class RegistrationForm {
  @observable selectedWidgetPackage = undefined;
	@observable selectedOrientation = undefined;

	controller = undefined;
	configuration = Object.assign({});

	widgets = [{ id: 'arl', name: 'arl-widgets' }, { id: 'wmt', name: 'wmt-widgets' },];
	screens = [{ type: 'Landscape', widgets: [ { id: 'arl' }, { id: 'wmt' } ]},{ type: 'Portrait', widgets: [ { id: 'arl' }, { id: 'wmt' } ]},
{ type: 'Mainboard', widgets: [ { id: 'wmt' } ]}];

	constructor(controllerFactory) {
		this.controller = controllerFactory.createForCurrentScope();
		this.controller.addRenderer(new BootstrapFormRenderer());

		ValidationRules
			.ensure('selectedWidgetPackage').required().withMessage('Please select a widget package')
			.ensure('selectedOrientation').required().withMessage('Please select screen orientation')
			.on(RegistrationForm);
	 }

	activate(model) {
		this.configuration = model;
		if (this.configuration) {
			this.configuration.settings = Object.assign({});
			this.configuration.settings.errors = Object.assign({});
		}
	}

	attached() {
		this.controller.validate();
	}

	bind() {}

	selectedWidgetPackageChanged(newValue, oldValue) {
		if (newValue !== oldValue) {
			this.configuration.widgetPackage = this.selectedWidgetPackage ? `${newValue.id}-widgets` : null;
		}
		this.getErrors();
	}

	selectedOrientationChanged(newValue, oldValue) {
		if (newValue !== oldValue) {
			this.configuration.screenType = this.selectedOrientation ? newValue.type : null;
		}
		this.getErrors();
	}

	@computedFrom('selectedWidgetPackage')
	get relevantWidgetPackage() {
		if(!this.selectedWidgetPackage) return [];
		return this.screens.filter(screen => screen.widgets.some(item => item.id === this.selectedWidgetPackage.id));
	}


	 getErrors() {
		this.controller.validate();
		this.errors = this.controller.errors.length;
		console.dir(this.controller);
		console.log(this.controller.errors.length)
	}

	get errors() {
	  this.controller.validate();
		return this.controller.errors.length;
	}
}
	<template>
	<require from="./registration-form"></require>

	<registration-form></registration-form>
	</template>
	import { ValidationRenderer, RenderInstruction, ValidateResult } from 'aurelia-validation';

	// Custom renderer (modified): https://aurelia.io/docs/plugins/validation#custom-renderers

	export class BootstrapFormRenderer {

	render(instruction: RenderInstruction) {
	for (let { result, elements } of instruction.unrender) {
	for (let element of elements) {
	this.remove(element, result);
	}
	}
	for (let { result, elements } of instruction.render) {
	for (let element of elements) {
	this.add(element, result);
	}
	}
	}

	add(element: Element, result: ValidateResult) {
	if (result.valid) return;
	const formGroup = element.closest('.form-group');
	//if (!formGroup \|\| element.hasAttribute('disabled')) return;

	// Add a bunch of error classes
	formGroup.classList.add('text-danger');
	element.classList.add('border');
	element.classList.add('border-danger');
	element.classList.add('text-danger');

	const message = document.createElement('small');
	message.className = 'help-block validation-message';
	message.textContent = result.message;
	message.id = `validation-message-${result.id}`;
	formGroup.appendChild(message);
	}

	remove(element: Element, result: ValidateResult) {
	if (result.valid) return;

	const formGroup = element.closest('.form-group');
	if (!formGroup) return;

	const message = formGroup.querySelector(`#validation-message-${result.id}`);
	if (message) {
	formGroup.removeChild(message);

	// Add a bunch of error classes
	if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
	formGroup.classList.remove('text-danger');
	element.classList.remove('border');
	element.classList.remove('border-danger');
	element.classList.remove('text-danger');
	}
	}
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	</head>
	<body aurelia-app="main" class="m-4">
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	<template>
	<button click.delegate="$this.getErrors()">Get Errors</button>
	<div class="row">
	<div class="col-12">
	<div class="alert alert-warning alert-dismissible show fade">
	configuration.widgetPackage: <b>${$this.configuration.widgetPackage \|\| '-'}</b><br/>
	configuration.settings.screenType: <b>${$this.configuration.screenType \|\| '-'}</b><br/>
	errors: <b>${$this.errors}</b>

	</div>
	</div>
	</div>
	<div class="row">
	<div class="col">
	<div class="form-group">
	<select class="custom-select" value.bind="$this.selectedWidgetPackage & validateOnChange" validation-errors.bind="selectedWidgetPackageErrors" >
	<option model.bind="null">Select a widget package</option>
	<option repeat.for="widget of widgets" model.bind="widget">
	${widget.name}
	</option>
	</select>
	</div>
	</div>
	<div class="col">
	<div class="form-group">
	<select class="custom-select" value.bind="$this.selectedOrientation & validateOnChange" disabled.bind="!$this.selectedWidgetPackage" validation-errors.bind="selectedOrientationErrors">
	<option model.bind="null">Select screen orientation</option>
	<option repeat.for="screen of relevantWidgetPackage" model.bind="screen">
	${screen.type}
	</option>
	</select>
	</div>
	</div>
	</div>
	</template>
	import { bindable, inject } from 'aurelia-framework';
	import { BindingEngine, computedFrom, observable } from "aurelia-binding";
	import { ValidationControllerFactory, ValidationController, ValidationRules, ValidateResult } from 'aurelia-validation';
	import {BootstrapFormRenderer} from './bootstrap-form-renderer';

	@inject(ValidationControllerFactory)
	export class RegistrationForm {
	@observable selectedWidgetPackage = undefined;
	@observable selectedOrientation = undefined;

	controller = undefined;
	configuration = Object.assign({});

	widgets = [{ id: 'arl', name: 'arl-widgets' }, { id: 'wmt', name: 'wmt-widgets' },];
	screens = [{ type: 'Landscape', widgets: [ { id: 'arl' }, { id: 'wmt' } ]},{ type: 'Portrait', widgets: [ { id: 'arl' }, { id: 'wmt' } ]},
	{ type: 'Mainboard', widgets: [ { id: 'wmt' } ]}];

	constructor(controllerFactory) {
	this.controller = controllerFactory.createForCurrentScope();
	this.controller.addRenderer(new BootstrapFormRenderer());

	ValidationRules
	.ensure('selectedWidgetPackage').required().withMessage('Please select a widget package')
	.ensure('selectedOrientation').required().withMessage('Please select screen orientation')
	.on(RegistrationForm);
	}

	activate(model) {
	this.configuration = model;
	if (this.configuration) {
	this.configuration.settings = Object.assign({});
	this.configuration.settings.errors = Object.assign({});
	}
	}

	attached() {
	this.controller.validate();
	}

	bind() {}

	selectedWidgetPackageChanged(newValue, oldValue) {
	if (newValue !== oldValue) {
	this.configuration.widgetPackage = this.selectedWidgetPackage ? `${newValue.id}-widgets` : null;
	}
	this.getErrors();
	}

	selectedOrientationChanged(newValue, oldValue) {
	if (newValue !== oldValue) {
	this.configuration.screenType = this.selectedOrientation ? newValue.type : null;
	}
	this.getErrors();
	}

	@computedFrom('selectedWidgetPackage')
	get relevantWidgetPackage() {
	if(!this.selectedWidgetPackage) return [];
	return this.screens.filter(screen => screen.widgets.some(item => item.id === this.selectedWidgetPackage.id));
	}


	getErrors() {
	this.controller.validate();
	this.errors = this.controller.errors.length;
	console.dir(this.controller);
	console.log(this.controller.errors.length)
	}

	get errors() {
	this.controller.validate();
	return this.controller.errors.length;
	}
	}