Aurelia Validation Demo - Nested Property validation

app.html

<template>
    <form validation-errors="errors.bind: pizzaErrors; controller.bind: pizzaValidationController"
          submit.delegate="orderPizza()">
      <label for="pizza">Choose a pizza:</label>
      <input id="pizza" value.bind="pizza & validateManually:pizzaValidationController">
      <span class="help-block" repeat.for="errorInfo of pizzaErrors">
        ${errorInfo.error.message}
      </span>
      <input type="submit" value="Order pizza!">
    </form>
  
    <form validation-errors="errors.bind: pastaErrors; controller.bind: pastaValidationController"
          submit.delegate="orderPasta()">
      <label for="pasta">Choose a pasta:</label>
      <input id="pasta" value.bind="pasta & validateManually:pastaValidationController">
      <span class="help-block" repeat.for="errorInfo of pastaErrors">
        ${errorInfo.error.message}
      </span>
      <input type="submit" value="Order pasta!">
    </form>
  </template>
  

  

app.js

import {
  ValidationControllerFactory,
  ValidationController,
  ValidationRules,
  validateTrigger
} from 'aurelia-validation';
import {BootstrapFormRenderer} from './bootstrap-form-renderer';
import {inject,bindable, NewInstance} from 'aurelia-framework';
   
 @inject(NewInstance.of(ValidationController), NewInstance.of(ValidationController))
  export class ItalianRestaurant {
    pizza;
    pasta;
    pizzaValidationController;
    pastaValidationController
constructor(pizzaValidationController, pastaValidationController) {
      this.pizzaValidationController = pizzaValidationController;
      this.pastaValidationController = pastaValidationController;
  
      const pizzaRules = ValidationRules
        // .ensure((res: ItalianRestaurant) => res.pizza).required()
          .ensure((res) => res.pizza).required()
        .rules;
      this.pizzaValidationController.addObject(this, pizzaRules);
  
      const pastaRules = ValidationRules
        .ensure((res: ItalianRestaurant) => res.pasta).required()
        .rules;
      this.pastaValidationController.addObject(this, pastaRules);
    }
  
    orderPizza() {
      this.pizzaValidationController.validate()
        .then(result => {
          if (result.valid) {
            alert("Ordering this pizza: " + this.pizza);
          }
        });
    }
  
    orderPasta() {
      this.pastaValidationController.validate()
        .then(result => {
          if (result.valid) {
            alert("Ordering this pasta: " + this.pasta);
          }
        });
    }
  }
  

  

  
  

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());
}