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

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")

    }
}

msokrates msokrates · Accepted Answer · 2018-01-08T19:58:59

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);

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

1 Answers