Aurelia 验证给出错误：TypeError：Object.defineProperty 在非对象上调用

Question

我正在尝试对 Aurelia 组件进行基本的 Aurelia 验证，但出现错误。

打字稿是：

import { bindable, inject, NewInstance } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';
import { validationMessages, ValidationRules, ValidationController } from 'aurelia-validation';

@inject(HttpClient, NewInstance.of(ValidationController))
export class PersonDetail {
    @bindable currentPerson: Person;
    private httpClient: HttpClient;
    public controller: ValidationController;

    constructor(http: HttpClient, controller: ValidationController) {
        this.httpClient = http;

        this.controller = controller;
        validationMessages['lastNameReq'] = 'You must enter a last name';
        ValidationRules.ensure('LastName').minLength(3).required().withMessageKey('lastNameReq').on(this.currentPerson);

    }

    saveToDb() {
        this.controller.validate()
            .then(v => {
                if (v.valid) {

                    // this.httpClient...(do stuff)
                }
             }
        }
}

html 是：

<template bindable="currentPerson">

    <form submit.delegate="saveToDb()">
        <p>First Name: <input type="text" class="form-control" value.bind="currentPerson.FirstName"></p>
        <p>Last Name: <input type="text" class="form-control" value.bind="currentPerson.LastName & validate"></p>
        <p>Middle Name: <input type="text" class="form-control" value.bind="currentPerson.MiddleName"></p>
        <p>Gender: <input type="text" class="form-control" value.bind="currentPerson.Sex"></p>
        <p>DOB: <input type="text" class="form-control" value.bind="person.DOB"></p>
        <p>Mobile Phone: <input type="text" class="form-control" value.bind="currentPerson.MobilePhnNbr"></p>
        <p>Email: <input type="text" class="form-control" value.bind="currentPerson.EmailAddr"></p>

        <button type="submit" class="btn-primary">Save to Database</button>
        <ul if.bind="controller.errors">
            <li repeat.for="error of controller.errors">
                ${error.message}
            </li>
        </ul>
    </form>
</template>

运行这个我得到以下错误：

aurelia-logging-console.js:47 错误 [app-router] 类型错误： Object.defineProperty 在非对象上调用 在 Function.defineProperty() 在 Function.29.Rules.set (rules.js:14) 在 FluentEnsure.48.FluentEnsure.on (validation-rules.js:347) 在 FluentRuleCustomizer.48.FluentRuleCustomizer.on (validation-rules.js:95) 在 PersonDetail.app/components/people/person-detail.PersonDetail.bind (person-detail.ts:27) 在 View.bind (aurelia-template.js:1400) 在 Controller.bind (aurelia-template.js:3394) 在 View.bind (aurelia-templating.js:1406) 在 Controller.bind (aurelia-template.js:3394) 在 Controller.automate (aurelia-templating.js:3339)

如果我将 ValidationRules 行更改为：

ValidationRules.ensure('currentPerson.LastName').minLength(3).required().withMessageKey('lastNameReq').on(this);

然后我不再收到错误，但验证也不起作用（当我清空姓氏字段时 this.controller.validate() 返回有效）。这与 LStarky 在这里发现的内容相符：Aurelia Validation not working with object properties。但是，如果我实施他的解决方案，我会收到上述错误。

Answer 1

上面的视图/视图模型对被用作页面中的自定义元素 - 它是主详细信息窗口的详细信息部分。这意味着第一次创建页面和自定义元素时 currentPerson 属性未定义，因此在该属性上创建验证规则时出现错误。

此外，由于每次更改主列表中的行时 currentPerson 都会更改，我发现每次发生这种情况时我都必须创建验证规则。

所以解决方案是让 currentPerson 可观察并在 currentPersonChanged 方法中设置验证规则。最终代码如下：

import { bindable, inject, NewInstance, observable } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';
import { validationMessages, ValidationRules, ValidationController } from 'aurelia-validation';

@inject(HttpClient, NewInstance.of(ValidationController))
export class PersonDetail {
    @bindable @observable currentPerson: Person;
    private httpClient: HttpClient;
    public controller: ValidationController;

    constructor(http: HttpClient, controller: ValidationController) {
        this.httpClient = http;

        this.controller = controller;
        validationMessages['lastNameReq'] = 'You must enter a last name';    
    }

    currentPersonChanged() {
        if (this.currentPerson) {
            ValidationRules.ensure('LastName').minLength(3).required().withMessageKey('lastNameReq').on(this.currentPerson);
        }
    }

    saveToDb() {
        this.controller.validate()
            .then(v => {
                if (v.valid) {

                    // this.httpClient...(do stuff)
                }
             }
        }
}

Answer 2

通常您在bind() 方法中设置您的验证规则，特别是如果您要验证的对象-this.currentPerson-是@bindable，因为在调用构造函数时它不会有值。

constructor(http: HttpClient, controller: ValidationController) {
    this.httpClient = http;

    this.controller = controller;
    validationMessages['lastNameReq'] = 'You must enter a last name';
}

bind() {
    ValidationRules.ensure('LastName').minLength(3).required().withMessageKey('lastNameReq').on(this.currentPerson);
}

---

根据您的评论，当父/容器加载元素时，您似乎没有设置当前人员。有几种方法可以解决这个问题：

1. 您可以使用if 绑定，该绑定仅在附加人员时创建人员自定义元素（详细信息部分）。 （在父母中：<person-detail if.bind="currentPerson"><person-detail>）。 if bindings 实际上在结果为 true 时将元素添加/删除到 DOM 中，因此只有当 person 对象具有值时才会实例化和绑定视图模型
2. 您可以在PersonDetail 类中查看绑定的人员对象，并且只有在它具有非空值时才调用验证规则。这有点棘手，因为您应该只设置一次验证规则，但有时这是要走的路。使用名为currentPersonChanged(newVal, oldVal) 的函数，它会自动为您调用。

如果这不起作用，请告诉我！