Vallabharayudu/app.html

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

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

## app.js
export class App {
}

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

export class BootstrapFormRenderer {
  render(instruction) {
    for (let { error, elements } of instruction.unrender) {
      for (let element of elements) {
        this.remove(element, error);
      }
    }

    for (let { error, elements } of instruction.render) {
      for (let element of elements) {
        this.add(element, error);
      }
    }
  }

  add(element, error) {
    const formGroup = element.closest('.form-group');
    if (!formGroup) {
      return;
    }

    // add the has-error class to the enclosing form-group div
    formGroup.classList.add('has-error');

    // add help-block
    const message = document.createElement('span');
    message.className = 'help-block validation-message';
    message.textContent = error.message;
    message.id = `validation-message-${error.id}`;
    formGroup.appendChild(message);
  }

  remove(element, error) {
    const formGroup = element.closest('.form-group');
    if (!formGroup) {
      return;
    }

    // remove help-block
    const message = formGroup.querySelector(`#validation-message-${error.id}`);
    if (message) {
      formGroup.removeChild(message);

      // remove the has-error class from the enclosing form-group div
      if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
        formGroup.classList.remove('has-error');
      }
    }
  }
}

## data-form.html
<template>
  <require from="./styles.css"></require>
  <h1>Data Form View</h1>
 <table>
   <tr repeat.for="item of items" click.delegate="PopulateData(item)">
     <td>${item.fname}</td>
     <td>${item.lanme}</td>
     <td>${item.email}</td>
   </tr>

 </table>
</template>

## data-form.js
import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
@inject(EventAggregator)
export class DataForm{
  items = [];
  constructor(eventAggregator){
    this.eventAggregator = eventAggregator;
    this.items.push(new DataItems('vallabha','rayudu','vallabha.i'));
    this.items.push(new DataItems('vallabha1','rayudu1','vallabha1.i'));
  }

  senddata(){
    //self.eventAggregator.publish('refreshAddEditUserSection');
  }

  PopulateData(item){
    this.eventAggregator.publish('MyrowData', item);
  }
}

export  class DataItems{
  constructor(fname,lanme,email){
    this.fname = fname;
    this.lanme = lanme;
    this.email = email;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style>
      registration-form {
        display: block;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body aurelia-app="main">
    <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>
  <h1>Registration View</h1>
  <form submit.delegate="submit()">
    <!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

    <div class="form-group">
      <label class="control-label" for="first">First Name</label>
      <input type="text" class="form-control" id="first" placeholder="First Name"
             value.bind="firstName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="last">Last Name</label>
      <input type="text" class="form-control" id="last" placeholder="Last Name"
             value.bind="lastName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Email"
             value.bind="email & validate">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
    <buton class="btn btn-primary" click.delegate="push()">Push some data and validat</buton>
  </form>
</template>

## registration-form.js
import {inject} from 'aurelia-dependency-injection';
import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules
} from 'aurelia-validation';
import { EventAggregator } from 'aurelia-event-aggregator';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';

@inject(ValidationControllerFactory,EventAggregator)
export class RegistrationForm {
  firstName = 'ak';
  lastName = 'k';
  email = 'akk@k.com';
  controller = null;

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

    this.ea.subscribe('MyrowData', obj =>{
    if (obj != null){
      console.log(this);
      console.log(obj);
     this.firstName =obj.fname;
    this.lastName = obj.lanme;
    this.email = obj.email;

    }
    this.controller.validate();

    });
  }

  submit() {
    this.controller.validate();
  }
  push(){
   // this.controller.validate();
    this.firstName ="Dream";
    this.lastName = "Orbit";
    this.email = "dreamorbit";
    this.controller.validate();
  }
  detached(){
    this.subscriber.dispose();
  }

}

ValidationRules
  .ensure(a => a.firstName).required()
  .ensure(a => a.lastName).required()
  .ensure(a => a.email).required().email()
  .on(RegistrationForm);

## styles.css
table{
      table-layout:fixed;
      width:100%;
      margin-top:20px;
    }
    tr{
     cursor:pointer;
    }
    td{
      padding:5px;
      border-top:1px solid #b7b7b7;
      backgroung:#f1f1f1;
    }
    tr:last-child td{
      border-bottom:1px solid #b7b7b7;
    }
	<template>
	<require from="./registration-form"></require>
	<require from="./data-form"></require>

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

	export class BootstrapFormRenderer {
	render(instruction) {
	for (let { error, elements } of instruction.unrender) {
	for (let element of elements) {
	this.remove(element, error);
	}
	}

	for (let { error, elements } of instruction.render) {
	for (let element of elements) {
	this.add(element, error);
	}
	}
	}

	add(element, error) {
	const formGroup = element.closest('.form-group');
	if (!formGroup) {
	return;
	}

	// add the has-error class to the enclosing form-group div
	formGroup.classList.add('has-error');

	// add help-block
	const message = document.createElement('span');
	message.className = 'help-block validation-message';
	message.textContent = error.message;
	message.id = `validation-message-${error.id}`;
	formGroup.appendChild(message);
	}

	remove(element, error) {
	const formGroup = element.closest('.form-group');
	if (!formGroup) {
	return;
	}

	// remove help-block
	const message = formGroup.querySelector(`#validation-message-${error.id}`);
	if (message) {
	formGroup.removeChild(message);

	// remove the has-error class from the enclosing form-group div
	if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
	formGroup.classList.remove('has-error');
	}
	}
	}
	}
	<template>
	<require from="./styles.css"></require>
	<h1>Data Form View</h1>
	<table>
	<tr repeat.for="item of items" click.delegate="PopulateData(item)">
	<td>${item.fname}</td>
	<td>${item.lanme}</td>
	<td>${item.email}</td>
	</tr>

	</table>
	</template>
	import {inject} from 'aurelia-framework';
	import {EventAggregator} from 'aurelia-event-aggregator';
	@inject(EventAggregator)
	export class DataForm{
	items = [];
	constructor(eventAggregator){
	this.eventAggregator = eventAggregator;
	this.items.push(new DataItems('vallabha','rayudu','vallabha.i'));
	this.items.push(new DataItems('vallabha1','rayudu1','vallabha1.i'));
	}

	senddata(){
	//self.eventAggregator.publish('refreshAddEditUserSection');
	}

	PopulateData(item){
	this.eventAggregator.publish('MyrowData', item);
	}
	}

	export class DataItems{
	constructor(fname,lanme,email){
	this.fname = fname;
	this.lanme = lanme;
	this.email = email;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<style>
	registration-form {
	display: block;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	}
	</style>
	</head>
	<body aurelia-app="main">
	<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>
	<h1>Registration View</h1>
	<form submit.delegate="submit()">
	<!--<ul><li repeat.for="error of controller.errors">${error.message}</li></ul>-->

	<div class="form-group">
	<label class="control-label" for="first">First Name</label>
	<input type="text" class="form-control" id="first" placeholder="First Name"
	value.bind="firstName & validate">
	</div>

	<div class="form-group">
	<label class="control-label" for="last">Last Name</label>
	<input type="text" class="form-control" id="last" placeholder="Last Name"
	value.bind="lastName & validate">
	</div>

	<div class="form-group">
	<label class="control-label" for="email">Email</label>
	<input type="email" class="form-control" id="email" placeholder="Email"
	value.bind="email & validate">
	</div>

	<button type="submit" class="btn btn-primary">Submit</button>
	<buton class="btn btn-primary" click.delegate="push()">Push some data and validat</buton>
	</form>
	</template>
	import {inject} from 'aurelia-dependency-injection';
	import {
	ValidationControllerFactory,
	ValidationController,
	ValidationRules
	} from 'aurelia-validation';
	import { EventAggregator } from 'aurelia-event-aggregator';
	import {BootstrapFormRenderer} from './bootstrap-form-renderer';

	@inject(ValidationControllerFactory,EventAggregator)
	export class RegistrationForm {
	firstName = 'ak';
	lastName = 'k';
	email = 'akk@k.com';
	controller = null;

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

	this.ea.subscribe('MyrowData', obj =>{
	if (obj != null){
	console.log(this);
	console.log(obj);
	this.firstName =obj.fname;
	this.lastName = obj.lanme;
	this.email = obj.email;

	}
	this.controller.validate();

	});
	}

	submit() {
	this.controller.validate();
	}
	push(){
	// this.controller.validate();
	this.firstName ="Dream";
	this.lastName = "Orbit";
	this.email = "dreamorbit";
	this.controller.validate();
	}
	detached(){
	this.subscriber.dispose();
	}

	}

	ValidationRules
	.ensure(a => a.firstName).required()
	.ensure(a => a.lastName).required()
	.ensure(a => a.email).required().email()
	.on(RegistrationForm);
	table{
	table-layout:fixed;
	width:100%;
	margin-top:20px;
	}
	tr{
	cursor:pointer;
	}
	td{
	padding:5px;
	border-top:1px solid #b7b7b7;
	backgroung:#f1f1f1;
	}
	tr:last-child td{
	border-bottom:1px solid #b7b7b7;
	}