• Binding
• Templating
• Custom attributes
• Custom elements
• Value converters
• Binding behaviours
• Working with HTTP
• Routing
• Working with forms
• Inter-component communication patterns
• Deployment

1. The validation controller to orchestrate the entire process
2. A view-model to validate
3. Some validation rules that will be applied to the title, times-read view-model properties
4. A validation renderer to render the results to the view
5. A view to trigger validation and display results

• title : Required validation rule.
• timesRead : Required validation rule, and custom validation rule to ensure that the user specifies a number which is either 0, or a positive integer. The validation rules will be applied as follows:

ValidationRules  
  .ensure('title').required() //ensure title provided
  .ensure('timesRead').required()  //ensure user specifies a value for times-read
  .satisfiesRule('positiveInteger') //validate the positiveInteger custom rule
  .on(this); //apply validation rules to the current view-model

 addBook(){
    this.controller.validate().then(result => {
      if(result.valid) this.eventAggregator.publish('book-added');  
     //publish the book-added event only when the edit-book form is valid.
    });
  }

import {inject,NewInstance} from 'aurelia-framework'; //import the new instance class  
import {EventAggregator} from 'aurelia-event-aggregator';  
import {BooksApi} from 'books-api';  
import {BootstrapFormRenderer} from 'bootstrap-form-renderer'; //import the validation renderer  
import {ValidationRules, ValidationController} from 'aurelia-validation'; //import the validation rules and controller

@inject(EventAggregator, BooksApi, NewInstance.of(ValidationController)) 
//inject a new instance of the validation controller
export class BookForm {  
  constructor(eventAggregator, bookApi, controller) {
    this.title = "";
    this.eventAggregator = eventAggregator; 
    this.bookApi = bookApi;
    this.controller = controller;
    this.controller.addRenderer(new BootstrapFormRenderer()); //configure the validation renderer
    this.configureValidationRules(); //configure the validation rules
    this.createEventListeners();
  }

  configureValidationRules() {
      ValidationRules.customRule( //create the positiveInteger validation rule
      'positiveInteger',
      (value, obj) => value === null || value === undefined 
        || (Number.isInteger(value) || value >= 0),
      `Books can only be read 0 or more times.` 
      );

      ValidationRules
        .ensure('title').required() //ensure title provided
        .ensure('timesRead').required()  //ensure user specifies a value for times-read
        .satisfiesRule('positiveInteger') //validate the positiveInteger custom rule
        .on(this); //apply validation rules to the current view-model
  }

  addBook() {
    this.controller.validate().then(result => { //validate when a book is added
      if(result.valid) this.eventAggregator.publish('book-added');  
    });
  }

  bind() {
    this.bookApi.getGenres().then(genres => {
      this.genres = genres;
    });
  }

  createEventListeners() {
    this.genreSelectedListener =  e => {
      if(e && e.detail){
        this.genre = e.detail.value;  
      }
    };

    this.ratingChangedListener =  e => this.rating = e.rating;
  }

  attached() {
      this.selectGenreElement.addEventListener("change", this.genreSelectedListener );
      this.selectGenreElement.addEventListener("change", this.ratingChangedListener );
  }

  detached() {
      this.ratingElement.removeEventListener('change', this.ratingChangedListener);
      this.selectGenreElement.removeEventListener('change', this.genreSelectedListener);
  }
}

<template>  
  <require from="typeahead"></require>
  <require from="star-rating"></require>
  <form class="form card" submit.trigger="addBook()">
    <div class="card-block">
      <h4 class="card-title">Add book <i class="fa fa-book" aria-hidden="true"></i></h4>
      <h6 class="card-subtitle mb-2 text-muted">add a book to your bookshelf</h6>
      <hr/>
        <div class="form-group">
          <label for="title">Title</label>
          <input name="title" class="form-control" 
                 placeholder='enter a title' 
                 value.bind="title & validate"></input> 
                 <!-- validation trigger added to title input field -->
        </div>
        <div class="form-group">
          <label for="genre">Genre</label>
          <input value.bind="genre" 
                 typeahead="items.bind:genres" 
                 type="text" 
                 name="genre" 
                 class="form-control"
                 ref="selectGenreElement"></input>
        </div>
        <div class="form-group">
          <label for="times-read">Times read</label>
          <input name=times-read class="form-control" 
                  value.bind="timesRead & validate"></input> 
                  <!-- validation trigger added to times-read input field -->
        </div>
        <hr/>
        <star-rating 
              view-model.ref="starRatingViewModel" 
              ref="ratingElement" 
              rating.bind="rating">
       </star-rating>
      </form>
    </div>
   <div class="card-footer">
      <button type="submit" class="btn btn-primary col-sm-3 push-sm-9" 
              disabled.bind="title.length == 0">
        add
      </button>  
   </div>
  </div>
</template>