Aurelia Validation Demo - Nested Property validation

app.html

<template>
  <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="last" placeholder="Last Name"
             value.bind="person.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="person.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>
     <ul>
      <li repeat.for='e of controller.errors'>
        ${e.message}
      </li>
    </ul>
     </form>
     
   <form submit.delegate="submit2()" validation-errors="errors.bind: foodErrors; controller.bind: foodController"
  
    <ul>
      <li repeat.for='e of controllerF.errors'>
        ${e.message}
      </li>
    </ul>
    
    <div class="form-group">
      <label class="control-label" for="food">food ${food.name}</label>
      <input type="food" class="form-control" id="name" placeholder="food"
             value.bind="food.name & validateManually:controllerf">
    </div>
    <button click.delegate="submit2()" class="btn btn-primary">Submit table2</button>
    
    
    
    
  </form>
</template>

app.js

import {inject, bindable} from 'aurelia-framework';
import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules,
  validateTrigger
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';

@inject(ValidationControllerFactory)
export class App {
  @bindable person = new Person();
  email = '';
 @bindable food = new Food();
 name=''
  constructor(controllerFactory) {
    this.controller = controllerFactory.createForCurrentScope();
    this.controller.addRenderer(new BootstrapFormRenderer());
    
     this.controllerf = controllerFactory.createForCurrentScope();
    this.controllerf.addRenderer(new BootstrapFormRenderer());
    
    //this.controller.validateTrigger=validateTrigger.change;
  }
  
  submit() {
    this.controller.validate();
  }
  
  submit2(){
      this.controllerf.validate();
    // alert('food '+this.food.name)
    //   this.controllerf.validate();
    // // alert('sub2')
  }
  attached(){
  // this.controllerF.ValidationRules
  // // ValidationRules
  //   .ensure('name').required()
  // .on(Food);
  
     const foodRules = ValidationRules
           .ensure((res) => res.food).required()
         .rules;
       this.controllerf.addObject(this, foodRules);
  
    
  }
  
  
  
}

export class Person {
  firstName='';
  lastName= '';
}
export class Food {
  name='';
}
ValidationRules
  .ensure(a => a.email).required()
  .on(App)
  
  .ensure(a => a.firstName).required()
  .ensure(a => a.lastName).required()
  .on(Person);
  // ValidationRules
  // .ensure(b => b.name).required()
  // .on(App);
  // this.controllerF.ValidationRules
  // // ValidationRules
  //   .ensure('name').required()
  // .on(Food);
  

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 || formGroup.classList.contains('hide-error')) {
      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>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">
  </head>
  <body aurelia-app="main" class="container">
    <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());
}