Aurelia displaying validation errors per input

Question

I'm having issues getting the errors to render in the HTML.

ViewModel:

import {autoinject} from 'aurelia-framework';
import { ValidationRules, ValidationController, ValidationControllerFactory } from 'aurelia-validation';

// Models
import { NewCustomer } from '../../models/customer';

@autoinject
export class Register {
    controller: ValidationController;
    customer: NewCustomer;

    constructor(controllerFactory: ValidationControllerFactory, customer: NewCustomer) {
        this.controller = controllerFactory.createForCurrentScope();
        this.customer = customer;
        this.controller.addObject(this.customer);
    }

    validate(): void {
        this.controller.validate().then(res => {
            console.log(res);
            if(res.valid) {
                this.register();
            }
        });
    }
}

ValidationRules
    .ensure((c: NewCustomer) => c.first_name).displayName('first name').required().withMessage(`\${$displayName} cannot be blank.`)
    .ensure((c: NewCustomer) => c.last_name).displayName('last name').required().withMessage(`\${$displayName} cannot be blank.`)
    .ensure((c: NewCustomer) => c.email).displayName('first name').email().required().withMessage(`\${$displayName} cannot be blank.`)
    .ensure((c: NewCustomer) => c.phone_number).displayName('phone number').matches(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/).withMessageKey('invalid phone number').required().withMessage(`\${$displayName} cannot be blank.`)
    .ensure((c: NewCustomer) => c.password).displayName('password').minLength(7).required().withMessage(`\${$displayName} cannot be blank.`)
    .on(NewCustomer);

And and example input:

<div class="sb-input-group no-margin" validation-errors.bind="first_nameErrors">
        <label>First Name</label>
        <input value.bind="customer.first_name" placeholder="First Name" class="sb-input-control">
        <span class="help-block danger" repeat.for="errorInfo of first_nameErrors">
            ${errorInfo.error.message}
        <span>
    </div>

Now whenever I submit the form and I check the console I see that the validation rules are being picked up correctly; however they are not rendering in the View. I've also tried doing validation-errors.bind="customer.first_nameErrors" and also did not work. What is the correct format for me to bind the errors to the view?

EDIT: Here is the NewCustomer object

export class NewCustomer {
    first_name: string;
    last_name: string;
    email: string;
    phone_number: string;
    password: string;
    companies: Company[];
    selected_company_id: string;
}

Answer 1

It looks like you're missing the "& validate" markup in html to register the binding instance with your validation controller.

Also checkout a Validation Renderer (There's some Bootstrap Validation Renderers around) which save you from adding error spans everywhere.

Most of this is in the docs , but it's taken me many passes to understand it all!