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.