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

Help Requests
1

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…

UPDATE -

Here is my login typescript file.

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

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

@autoinject
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

    constructor(
        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.email, this.password);
        }
    }
}

ValidationRules.ensure((v: Login) => v.email)
    .displayName("Email")
    .required()
    .ensure((v: Login) => v.password)
    .displayName("Password")
    .required()
    .on(Login);

and here is the view model.

<template>
    <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>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" value.bind="password & validate" class="form-control" id="password" placeholder="Password">
        </div>

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

        <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>
                </div>
            </div>
        </div>
    </form>

    <ul>
        <li repeat.for="error of controller.errors">
            ${error.message}
        </li>
    </ul>
</template>

UPDATE 2

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.

2

Can you share a minimal repo?

3

It seems to me you are running into similar issue described here https://github.com/aurelia/validation/issues/350#issuecomment-250925027

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