Question

我无法在编辑模型视图上进行验证，该视图在其视图模型的activate方法中绑定了数据。

我有一个created.ts，它可以处理具有相同字段的对象。这个文件几乎有相同的代码 - 例外是因为这个是一个创建，所以不需要加载任何数据。在这种情况下，验证工作正常。

如果我在激活方法中注释为编辑模型视图加载数据的代码 - 验证工作正常。

毋庸置疑，我是SPA，Aurelia和TypeScript的新手，需要一些帮助!!

以下是edit.ts中的代码

import { ContactRepository } from "./contactRepository";
import { autoinject } from "aurelia-framework";
import { ContactForEditDto } from "./contactForEditDto";
import { json } from "aurelia-fetch-client";
import { inject, NewInstance } from "aurelia-dependency-injection";
import { ValidationRules, ValidationControllerFactory, validateTrigger, 
Validator } from "aurelia-validation";


@autoinject
export class Edit {

public saveStatusMessage: string;
public isSaved: number = -1;
private controller = null;
private validator = null;
public canSave: boolean = false;

constructor(public contactForEdit: ContactForEditDto, private repository: 
ContactRepository, private controllerFactory: ValidationControllerFactory,
public contactFullName: string, validator: Validator) {

console.log("starting edit controller");

this.controller = controllerFactory.createForCurrentScope(validator);
this.controller.validateTrigger = validateTrigger.changeOrBlur;
this.validator = validator;
this.controller.subscribe(event => this.validateWhole());

ValidationRules

  .ensure((c: ContactForEditDto) => c.contactFirstName)
  .displayName("First Name")
  .required().withMessage("\${$displayName} cannot be empty.")
  .maxLength(50).withMessage("\${$displayName} cannot have more than 50 characters.")

  .ensure((c: ContactForEditDto) => c.contactLastName)
  .displayName("Last Name")
  .required().withMessage("\${$displayName} cannot be empty.")
  .maxLength(50).withMessage("\${$displayName} cannot have more than 50 characters.")


  .ensure((c: ContactForEditDto) => c.contactEmailAddress)
  .displayName("Email Address")
  //.required().withMessage("\${$displayName} cannot be empty.")
  .email().withMessage("\${$displayName} needs to be in a correct email address format.")
  .maxLength(50).withMessage("\${$displayName} cannot have more than 50 characters.")

  .ensure((c: ContactForEditDto) => c.contactPhoneNumber)
  .displayName("Phone Number")
  .required().withMessage("\${$displayName} cannot be empty.")
  .maxLength(12).withMessage("\${$displayName} cannot have more than 12 characters.")
  .matches(/\d{3}-\d{3}-\d{4}/).withMessage("'${$value}' is not a valid \${$displayName}. Please enter a phone in the format xxx-xxx-xxxx")

  .on(ContactForEditDto);

}

// source https://www.jujens.eu/posts/en/2017/Jan/24/aurelia-validation/ 
workaround 3
validateWhole() {
this.validator.validateObject(this.contactForEdit)
  .then(results => this.canSave = results.every(result => result.valid));
}

// Returning data from here because I can return a promise
// and let the router know when i have retrieved my initial data.

// Activate receives a params object as defined in the route.

activate(params) {
console.log("ACTIVATE ON EDIT PARAMS:" + params);
this.repository
  .getById(params.id)
  .then(data => {
    console.log(data);
    this.contactForEdit = data;
    this.contactFullName = this.contactForEdit.contactLastName + ", " + 
  this.contactForEdit.contactFirstName; // This needs to come from a method 
  in 
  contact.
  });
  }

  edit() {

this.saveStatusMessage = "";
this.isSaved = -1;

// This will be an edit
if (this.contactForEdit.contactId >= 1) {

  this.repository
    .update(this.contactForEdit)
    .then(response => {
      if (((response.status == 201) || (response.status == 204))
        && (response.ok == true)) {
        this.isSaved = 1;
        this.saveStatusMessage = "Successfully saved the contact";
      }
      else {
        this.isSaved = 0;
        //response.json().then(json => this.retVal = json);

        //TODO: get more details about the error.
        if (response.status == 400) {
          this.saveStatusMessage = "Unable to save the contact. Please make sure that you entered correct values for every field and try again.";
        }
        else {
          this.saveStatusMessage = "Unable to save the contact.";
        }
      }
    });
}

}

clearContactFields() {
this.contactForEdit = new ContactForEditDto(-1, "", "", "", "");
}


}

以下是edit.html中的代码

<template>
<form id="editContact" submit.delegate="edit()">
<!-- placeholder for status messages. If equal to 1 display it. If equals to 
-1 or 1 hide this.-->
<div id="successStatusMessage" class.bind="isSaved == 1 ? 'visible' : 
'hidden'">
  <div id="divSuccessMessage" class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <!--<span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true">
</span> TODO: How to get the glyphicon working? -->
    <span class="sr-only"> Success:</span> ${saveStatusMessage}
  </div>
</div>
<!-- placeholder for status messages.  If equal to 0 is in error, so dislay error message. if equals to -1 or 1 hide this.-->
<div id="errorStatusMessage" class.bind="isSaved == 0 ? 'visible' : 'hidden'">
  <!-- placeholder for status messages. -->
  <div id="divErrorMessage" class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <!-- <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>  TODO:  class="glyphicon glyphicon-exclamation-sign" how to get these in here for class?   -->
    <span class="sr-only"> Error:</span> ${saveStatusMessage}
  </div>
</div>

<div class="panel panel-default">

  <div class="panel-heading">
    <div class="panel-title">
      <!--<div if.bind="isCreate">
        "Create a Contact"
      </div>

      <div if.bind="!isCreate">
        Edit ${contactForEdit.contactFirstName}
      </div>-->
      ${ "Edit " + contactFullName }
    </div>
  </div>

  <div class="panel-body">
    <div class="form-horizontal">

      <div class="form-group" validation-errors.bind="editFirstNameErrors"
           class.bind="editFirstNameErrors.length ? 'has-error' : ''">

        <label class="control-label col-md-2">First Name: </label>
        <div class="col-md-10">
          <input type="text"
                 placeholder="First Name"
                 class="form-control"
                 value.bind="contactForEdit.contactFirstName & validate" required /> <!-- NO ${} !!!-->

          <span class="help-block" repeat.for="editErrorInfo of editFirstNameErrors">
            ${editErrorInfo.error.message}
          </span>
        </div>

      </div>
      <div class="form-group" validation-errors.bind="editLastNameErrors"
           class.bind="editLastNameErrors.length ? 'has-error' : ''">
        <label class="control-label col-md-2">Last Name: </label>
        <div class="col-md-10">
          <input type="text"
                 placeholder="Last Name"
                 class="form-control"
                 value.bind="contactForEdit.contactLastName & validate" required /> <!-- NO ${} !!!-->
          <span class="help-block" repeat.for="editErrorInfo of editLastNameErrors">
            ${editErrorInfo.error.message}
          </span>
        </div>
      </div>

      <div class="form-group" validation-errors.bind="emailErrors"
           class.bind="editEmailErrors.length ? 'has-error' : ''">
        <label for="emailAddress" class="control-label col-md-2">Email: </label>
        <div class="col-md-10">
          <input id="emailAddress"
                 type="text"
                 placeholder="Email Address (format: email@domain.com)"
                 class="form-control"
                 value.bind="contactForEdit.contactEmailAddress & validate" /> <!-- NO ${} !!!-->
          <span class="help-block" repeat.for="editErrorInfo of editEmailErrors">
            ${editErrorInfo.error.message}
          </span>
        </div>
      </div>

      <div class="form-group" validation-errors.bind="editPhoneErrors"
           class.bind="editPhoneErrors.length ? 'has-error' : ''">
        <label class="control-label col-md-2">Phone: </label>
        <div class="col-md-10">
          <input type="text"
                 placeholder="Phone Number (format: xxx-xxx-xxxx)"
                 class="form-control"
                 value.bind="contactForEdit.contactPhoneNumber & validate" required /> <!-- NO ${} !!!-->
          <span class="help-block" repeat.for="editErrorInfo of editPhoneErrors">
            ${editErrorInfo.error.message}
          </span>
        </div>
      </div>

      <button type="submit" class="btn btn-default ${canSave ? '' : 'disabled'}">
        <!-- Look at click.dependent when there are child with buttons calling this.-->
        Save
      </button>
      <!-- AA-10-17-17 - replaced with errors per input field. <ul for.bind="controller.errors">
        <li repeat.for="error of controller.errors" style="color:red">
          ${error.message}
        </li>
      </ul>-->
    </div>
  </div>
</div>
</form>
<div>
  <a route-href="route: home"
     class="btn btn-default">
    Back to list
  </a>

</div>
</template>

Answer 1

我希望它是因为这段代码： .getById(params.id) .then(data => { console.log(data); this.contactForEdit = data;

您的验证是针对ContactForEditDto对象的，但我的猜测是您的存储库正在返回一个强制转换为ContactForEditDto的JSON对象，因此它根本不是一个类。尝试类似的东西 console.log(data); this.contactForEdit = new ContactForEditDto(data.id, data.firstname ..etc..); 要么 console.log(data); this.contactForEdit = Object.assign(new ContactForEditDto(), data);

Answer 2

我们遇到了类似的问题，并通过在将远程数据分配到本地字段后设置验证来解决问题。在您的代码中，您需要在this.contactForEdit = data;

之后设置验证规则

当数据预先填入表单时，Aurelia验证也不起作用

2 个答案: