Aurelia Validation Rules: Getting error "Unable to parse accessor function" - aurelia

Question

I found this question which is getting the same error however in my case the model is structured using an interface and so I want to access it through this e.g .ValidationRules.ensure((c: Client) => c.client.clientLastName) but I think my syntax is incorrect.
its a typescript implementation.
I have this working in another form (login) which is a basic form but this one utilises an interface for inputs. If I use a simple bind without a variable based on an interface it works.
Here is my validationRules for a single text input - clientLastName
ValidationRules.ensure((c: Client) => c.client.clientLastName)
.displayName("Last name")
.required()
.on(Client);
aurelia-logging-console.js:47 ERROR [app-router] Error: Unable to parse accessor function:
function (c) { return c.client.clientLastName; }
The view is structured as follows:
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">Last Name:</label>
<div class="col-md-9">
<input type="text" value.bind="client.clientLastName & validate" class="form-control" id="lastname" placeholder="Last Name...">
</div>
</div>
</div>
How do I do syntax for validation when the binding is through a variable set as an interface?
The interface:
interface ClientDetails {
clientId: number;
clientNo: number;
company: boolean;
companyName: string;
abn: string;
isWarrantyCompany: boolean;
requiresPartsPayment: boolean;
clientFirstName: string;
clientLastName: string;
email: string;
mobilePhone: string;
phone: string;
notes: string;
address: AddressDetails;
jobs: any;
bankName: string;
bankBSB: string;
bankAccount: string;
active: boolean;
deActivated: string;
activity: boolean;
dateCreated: string;
dateUpdated: string;
creatorId: number;
creatorName: string;
}
My view-model:
import { HttpClient } from "aurelia-fetch-client";
import { autoinject, inject, NewInstance, PLATFORM } from "aurelia-framework";
import { Router, activationStrategy } from "aurelia-router";
import {
ValidationControllerFactory,
ValidationController,
ValidationRules
} from "aurelia-validation";
import { BootstrapFormRenderer } from "../../../../services/bootstrapFormRenderer/bootstrapFormRenderer";
//import from '../../../../services/customValidationRules/customValidationRules'
import { AuthService } from "../../../../services/auth/auth-service"
#autoinject
export class Client {
controller: ValidationController;
client: ClientDetails;
hasClientId: boolean;
heading: string = "New Client";
headingIcon: string = "fa-user-plus";
constructor(
private authService: AuthService,
private router: Router,
private controllerFactory: ValidationControllerFactory
) {
this.router = router;
this.controller = controllerFactory.createForCurrentScope();
this.controller.addRenderer(new BootstrapFormRenderer());
}
// Required to reload new instance.
determineActivationStrategy() {
return activationStrategy.replace;
}
activate(parms, routeConfig) {
this.hasClientId = parms.id;
if (this.hasClientId) {
const headers = this.authService.header();
fetch("/api/Client/edit/" + parms.id, {
method: "GET",
headers
})
.then(response => response.json())
.then(data => {
console.log("data: ", data);
this.client = data
console.log("CLIENT: ", this.client);
})
this.heading = "Edit Client"; // An id was submitted in the route so we change the heading as well.
this.headingIcon = "fa-pencil-square-o";
}
return null;
}
submitClient() {
console.log("gets Here")
}
}

Answer 1

I think the
ValidationRules.ensure((c: Client) => c.client.clientLastName)
.displayName("Last name")
.required()
.on(Client);
should be
ValidationRules.ensure((c: ClientDetails) => c.clientLastName)
.displayName("Last name")
.required()
.on(ClientDetails);
see also here