Vallabharayudu/app.html

## app.html
<template>
  <require from="./location-map"></require>
  <div><h2>Play with variables from parent to child and vice versa</h2></div>
  <location-map></location-map>
</template>

## app.js
import { inject, BindingEngine} from 'aurelia-framework';
import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';

@inject(ValidationControllerFactory)
export class App {


  dropdownAddress ="Dream orbit";
	street1 = "17th c main";
	street2 = 'Koramangala 5th block';
	citystate ="bangalore, karnataka";
	usethisaddress ='';

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

    this.controller.validate();

	}

}

ValidationRules
  .ensure(a => a.street1).required()
  .ensure(a => a.street2).required()
  .ensure(a => a.citystate).required()
  .on(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');
      }
    }
  }
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>custom Parent</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <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;
      }
      .has-error input{
        border:1px solid red;
      }
    </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>

## location-map.html

  <template>

	<h4>By clicking use this button you will understand</h4>
		<div>
			<div class="form-group relative_position">
				<input type="text" value.bind="NodeParent.dropdownAddress"/>
			</div>

			<div class="breakDownInfo">
				<div class="form-group relative_position">
				  <label class="control-label" for="first">Street 1</label>
					<input type="text" class="addLocMapDropField" maxlength="100" spellcheck="false" placeholder="Address Line 1" value.bind="NodeParent.street1 & validate" />
				</div>
				<div class="form-group">
				  <label class="control-label" for="first">Street 2</label>
					<input type="text" maxlength="40" spellcheck="false" placeholder="Address Line 2" value.bind="NodeParent.street2 & validate" />
				</div>

				<div class="form-group">
				  <label class="control-label" for="first">City State</label>
					<input type="text" placeholder="City/State" value.bind="NodeParent.citystate & validate"/>
				</div>
			</div>

			<div class="form-group">
				<div class="AddLocMapContainer">
					<div id="mapHolder" class="AddLocationMap"></div>
				</div>
			</div>

			<div class="form-group">
				<input type="text" id="useThisAddress" value.bind="NodeParent.usethisaddress" class="UseThisInputField" readonly />
				<button class="blueButton right useMapBtn" click.delegate="onclickusethisAddress()">Use This</button>
			</div>
		</div>

</template>

## location-map.js
import { inject, BindingEngine} from 'aurelia-framework';

@inject(BindingEngine)

export class LocationMap{
  NodeParent;
  bindingEngine;

 constructor(BindingEngine){
   this.bindingEngine = BindingEngine;
 }

 onclickusethisAddress() {
		var self = this;

		self.NodeParent.dropdownAddress = 'Cap Gemini';
		self.NodeParent.street1 = '18th c main';
		self.NodeParent.street2 = '';
		self.NodeParent.citystate ="bangalore, karnataka";
		this.NodeParent.controller.validate();
		self.NodeParent.usethisaddress =`${self.NodeParent.dropdownAddress}, ${self.NodeParent.street2},, ${self.NodeParent.citystate}`

	}

 bind(bindingContext, overrideContext) {
        this.NodeParent = bindingContext;
    }

}

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

  aurelia.start().then(() => aurelia.setRoot());
}
	<template>
	<require from="./location-map"></require>
	<div><h2>Play with variables from parent to child and vice versa</h2></div>
	<location-map></location-map>
	</template>
	import { inject, BindingEngine} from 'aurelia-framework';
	import {
	ValidationControllerFactory,
	ValidationController,
	ValidationRules
	} from 'aurelia-validation';
	import {BootstrapFormRenderer} from './bootstrap-form-renderer';

	@inject(ValidationControllerFactory)
	export class App {



	dropdownAddress ="Dream orbit";
	street1 = "17th c main";
	street2 = 'Koramangala 5th block';
	citystate ="bangalore, karnataka";
	usethisaddress ='';

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

	this.controller.validate();

	}

	}

	ValidationRules
	.ensure(a => a.street1).required()
	.ensure(a => a.street2).required()
	.ensure(a => a.citystate).required()
	.on(App);
	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');
	}
	}
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>custom Parent</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<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;
	}
	.has-error input{
	border:1px solid red;
	}
	</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>

	<template>

	<h4>By clicking use this button you will understand</h4>
	<div>
	<div class="form-group relative_position">
	<input type="text" value.bind="NodeParent.dropdownAddress"/>
	</div>

	<div class="breakDownInfo">
	<div class="form-group relative_position">
	<label class="control-label" for="first">Street 1</label>
	<input type="text" class="addLocMapDropField" maxlength="100" spellcheck="false" placeholder="Address Line 1" value.bind="NodeParent.street1 & validate" />
	</div>
	<div class="form-group">
	<label class="control-label" for="first">Street 2</label>
	<input type="text" maxlength="40" spellcheck="false" placeholder="Address Line 2" value.bind="NodeParent.street2 & validate" />
	</div>

	<div class="form-group">
	<label class="control-label" for="first">City State</label>
	<input type="text" placeholder="City/State" value.bind="NodeParent.citystate & validate"/>
	</div>
	</div>

	<div class="form-group">
	<div class="AddLocMapContainer">
	<div id="mapHolder" class="AddLocationMap"></div>
	</div>
	</div>

	<div class="form-group">
	<input type="text" id="useThisAddress" value.bind="NodeParent.usethisaddress" class="UseThisInputField" readonly />
	<button class="blueButton right useMapBtn" click.delegate="onclickusethisAddress()">Use This</button>
	</div>
	</div>

	</template>
	import { inject, BindingEngine} from 'aurelia-framework';

	@inject(BindingEngine)

	export class LocationMap{
	NodeParent;
	bindingEngine;

	constructor(BindingEngine){
	this.bindingEngine = BindingEngine;
	}

	onclickusethisAddress() {
	var self = this;

	self.NodeParent.dropdownAddress = 'Cap Gemini';
	self.NodeParent.street1 = '18th c main';
	self.NodeParent.street2 = '';
	self.NodeParent.citystate ="bangalore, karnataka";
	this.NodeParent.controller.validate();
	self.NodeParent.usethisaddress =`${self.NodeParent.dropdownAddress}, ${self.NodeParent.street2},, ${self.NodeParent.citystate}`

	}

	bind(bindingContext, overrideContext) {
	this.NodeParent = bindingContext;
	}

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

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