Aurelia 验证规则：出现错误“无法解析访问器函数”

Question

我发现this question 遇到了同样的错误，但在我的情况下，模型是使用接口构建的，所以我想通过它来访问它，例如 .ValidationRules.ensure((c: Client) => c.client.clientLastName) 但我认为我的语法不正确。

它是一个打字稿实现。

我以另一种形式（登录）工作，这是一种基本形式，但这种形式使用输入接口。如果我使用基于接口的没有变量的简单绑定，它可以工作。

这是我对单个文本输入的验证规则 - clientLastName

ValidationRules.ensure((c: Client) => c.client.clientLastName)
    .displayName("Last name")
    .required()
    .on(Client);

aurelia-logging-console.js:47 错误 [app-router] 错误：无法解析访问器函数： 函数 (c) { return c.client.clientLastName; }

视图结构如下：

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

当绑定是通过设置为接口的变量时，如何进行语法验证？

界面：

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

我的视图模型：

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

我觉得

ValidationRules.ensure((c: Client) => c.client.clientLastName)
.displayName("Last name")
.required()
.on(Client);

应该是

ValidationRules.ensure((c: ClientDetails) => c.clientLastName)
.displayName("Last name")
.required()
.on(ClientDetails);

另见here