Aurelia Validation-表单加载了来自获取的数据-Validation将完整字段计算为空

我有一个表单，我成功地从一个获取中加载了数据。如果我在表单上单击save，Aurelia Validation将评估那些数据为空的表单文本字段，并在下面的save按钮下显示为错误-下图

验证在空表单上工作得很好，但对于加载了其值的表单，验证就好像该表单是空的一样

当然，如果文本框中存在通过键入或从提取加载的字符，则应该在required和pass的上下文中对其进行评估

从提取加载时，当前不是

代码

以下是typescript视图模型：

    import { HttpClient } from "aurelia-fetch-client";
    import { autoinject, inject, NewInstance, PLATFORM } from "aurelia-framework";
    import { Router, activationStrategy } from "aurelia-router";
    import {
        ValidationControllerFactory,
        ValidationController,
        ValidationRules,
        validateTrigger
    } 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 = new ClientDetails;
        job: Job;
        visits = Array();
        hasClientId: boolean;
        heading: string = "New Client";
        headingIcon: string = "fa-user-plus";

        username: string;


        constructor(
            private authService: AuthService,
            private router: Router,
            private controllerFactory: ValidationControllerFactory
        ) {
            this.router = router;
            this.controller = controllerFactory.createForCurrentScope();
            this.controller.addRenderer(new BootstrapFormRenderer());
            this.controller.addObject(this)
            this.controller.addObject(this.client);

        }

        // Required to reload new instance.
        determineActivationStrategy() {
            return activationStrategy.replace; //replace the viewmodel with a new instance
            // or activationStrategy.invokeLifecycle to invoke router lifecycle methods on the existing VM
            // or activationStrategy.noChange to explicitly use the default behavior
        }

        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 => {
                        this.client = data
                    })
                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");
            console.log("this.controller.validate(): ", this.controller.validate());
            //this.controller.validate();
            if (this.controller.validate()) {
                console.log("Hi!");
            }
        }

        rowSelected(jobId: number) {
            let job = this.client.jobs.filter(f => f.id === jobId);
            if (job && job.length > 0) {
                var jobVisits = job.map(j => { return j.jobVisits; })[0];
                this.visits = jobVisits;
            }
        }
    }


    export class 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: Job[];

        bankName: string;
        bankBSB: string;
        bankAccount: string;
        active: boolean;
        deActivated: string;
        activity: boolean;
        dateCreated: string;
        dateUpdated: string;

        creatorId: number;
        creatorName: string;
    }

    class Job {
        id: number;
        agentJobNo: number;
        jobNo: number;
        jobType: string;
        jobVisits: Visit[]
        numberOfVisits: number;
        status: string;
    }

    class Visit {
        jobVisitId: number;
        dateCreated: string;
        visitDate: string;
        startTime: string;
        endTime: string;
    }

    class AddressDetails {
        address1: string;
        address2: string;
        suburb: string;
        postcode: string;
        stateShortName: string;
        addressLocationId: number;
    }

    // Validation Rules.
    ValidationRules
        .ensure((a: ClientDetails) => a.companyName).required()
            .when((a: ClientDetails) => a.company === true)
            .withMessage('Company name is required if client is a company.')
        .ensure((a: ClientDetails) => a.clientLastName).required()
        .ensure((a: ClientDetails) => a.mobilePhone).required()
        .on(ClientDetails)

提取在激活函数中，仅当提供了id时才会提取。fetch使用返回的数据加载客户端。这是可行的，我有一个表单，其中显示了提取的所有数据

但是，如果我单击“保存”按钮，即使lastName和mobilePhone这两个字段中都有值，submitClient函数也会触发，this.controller.validate会将这些字段计算为空

它不应该看到这些字段中有值吗？这里有我遗漏的东西吗

以下是视图如何具有lastName-请注意，存在&validate

                <div class="col-md-6">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="control-label pull-right" for="lastname">Last Name:&nbsp;</label>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="form-group">
                            <input type="text" value.bind="client.clientLastName & validate" class="form-control" id="lastname" placeholder="Last Name...">
                        </div>
                    </div>
                </div>

---

从服务器加载现有客户端时，将this.client属性设置为简单的JSON对象。它将不再是ClientDetails的实例，因此验证规则将不起作用，因为它们只对ClientDetails实例起作用

您需要创建ClientDetails的新实例，并从fetch返回的数据对象填充它。可以通过在ClientDetails中创建构造函数或映射方法手动完成，该构造函数或映射方法接受数据对象并映射到每个ClientDetails属性this.clientId=data.clientId等

---

作为替代方案，您可以使用某种类型的通用映射器函数，通过属性名称进行映射。我对TypeScript不太熟悉，但有很多解决方案可以做到这一点。

实现了提到的SO问题的选项4，并且成功了。