Getting an error with 'email&validate' not compatible with aurelia binding behaviour

I have been refactoring my dotnet core Aurelia project and have not changed anything in the Aurelia project. However, I am getting the following error…

ERROR [app-router] Error: Expression 'email&validate' is not compatible with the validate binding-behavior.

and its saying its in aurelia-logging.js.45

I have no idea why its doing this and I wonder if someone might shine some light on it as well as tell me how to fix it.

ITs not telling me where this is happening but its happening when I try and do a login in my application. I can add info if asked but I dont even know what this means…


Here is my login typescript file.

import { autoinject, inject, NewInstance, PLATFORM } from "aurelia-framework";
import { Router } from "aurelia-router";
import {
} from "aurelia-validation";
import { BootstrapFormRenderer } from "../../../services/bootstrapFormRenderer/bootstrapFormRenderer";

import { AuthService } from "../../../services/auth/auth-service"

export class Login {
    controller: ValidationController;
    heading: string = "Login";
    message = "";
    email: string = "";
    password: string = ""; // these are pubic fields available in your view unless you add 'private' in front of them

        private authService: AuthService,
        private router: Router,
        private controllerFactory: ValidationControllerFactory
    ) {
        this.router = router;
        this.controller = controllerFactory.createForCurrentScope();
        this.controller.addRenderer(new BootstrapFormRenderer());

    submitLogin() {
        if (this.controller.validate()) {
            // "Fetch" JWT and save it to local storage. change root to "app".
            this.authService.login(, this.password);

ValidationRules.ensure((v: Login) =>
    .ensure((v: Login) => v.password)

and here is the view model.

    <form role="form" submit.delegate="submitLogin()">
        <div class="form-group">
            <label for="email">User Email</label>
            <input type="email" value.bind="email & validate" class="form-control" id="username" placeholder="Email">
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" value.bind="password & validate" class="form-control" id="password" placeholder="Password">

        <div class="col-md-10 col-md-offset-1">
            <hr />

        <div class=" col-md-4">
            <div class="form-group">
                <div class="col-md-9">
                    <button type="submit" class="btn btn-outline-primary btn-sm">Login</button>

        <li repeat.for="error of controller.errors">


I have disabled the “& validate” and now it renders and shows… there is something wrong with the validation controller so it wont even render the page.

Can you share a minimal repo?

It seems to me you are running into similar issue described here

The easy solution is at the linked comment, or the longer version is: you got multiple versions of aurelia binding. If you are using webpack, then you can alias aurelia binding to a single version only.

Can you try one of those suggestion? If you are unsure how to do it, I can help further

1 Like