Aurelia 值更改时未触发验证

在Aurelia项目中，我创建了一个引导模式，允许用户输入电子邮件地址。首先，当弹出窗口被触发时，它将应用验证罚款。见下图。这是第一次打开弹出窗口时的样子

输入验证电子邮件地址并单击

add

btn

后，我会将

此的值重置为空字符串。这样用户就可以键入新的电子邮件地址来添加。但是显示邮件
电子邮件是必需的
的验证规则不再被触发。请参见以下示例：


看。一旦页面加载。单击电子邮件输入旁边的
+
图标。它将打开一个引导模式

下面是代码，也可以在上面的链接中看到：

email.ts

import { customElement, useView, bindable, bindingMode, inject, observable } from 'aurelia-framework';
import { ValidationRules, ValidationControllerFactory, Validator } from 'aurelia-validation';

@inject(ValidationControllerFactory)
@customElement('email')
@useView('./email.html')
export class Email {
  @bindable public modalName: string;
  @bindable public modalValue: string;
  @bindable public emailAddress: string;
  public emailAddresses = [];
  @observable public setEmail: string;
  public errorMessage: string;
  emailController = null;

  constructor(factory) {
    this.setEmail = '';
    this.emailController = factory.createForCurrentScope();
    ValidationRules.ensure('setEmail')
        .displayName('Email')
        .required()
        .email()
        .on(this);
  }

  public bind() {
    this.emailController.validate();
  }

  private joinEmails() {
    this.emailAddress = this.emailAddresses.join(";");
  }

  private isUniqueEmail = (email: string) => {
    return (this.emailAddresses.indexOf(email) === -1)
  }

  public addEmail() {
    if (this.setEmail) {
      if(!this.isUniqueEmail(this.setEmail))
      {
        this.errorMessage = "You must provide unique email address.";
        return;
      }
      this.emailAddresses.push(this.setEmail);
      this.joinEmails();
      this.setEmail = '';
    }
    else
    {
      this.errorMessage = "You must provide an email address."
    }
  }

  public setEmailChanged(newValue, oldValue) {
    console.log({oldValue: oldValue, newValue: newValue});
  }

  public removeEmail(index) {
    this.emailAddresses.splice(index, 1);
    this.joinEmails();
    console.log(this);
  }
}

email.html

<template>
  <!-- Modal -->
  <div class="modal fade" id="${modalName}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Add Email Address</h4>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <input type="text" id="setEmail" name="setEmail" class="form-control" value.bind="setEmail & validateOnChangeOrBlur" />
            <span class="input-group-btn">
              <button class="btn btn-primary"
                      disabled.bind="emailController.errors.length > 0" 
                      click.delegate="addEmail()">Add
              </button>
            </span>
          </div>
          <input type="text" value.bind="emailAddress" hidden />
          <span class="text-danger" repeat.for="error of emailController.errors">${error.message}</span>
          <span class="text-danger" if.bind="errorMessage">${errorMessage}</span>
          <div>
            <ul class="list-group" if.bind="emailAddresses.length > 0" style="margin-top: 10px;">
              <li class="list-group-item" repeat.for="e of emailAddresses">
                ${e} <span class="glyphicon glyphicon-remove text-danger pull-right" style="cursor: pointer;" click.delegate="removeEmail($index)"></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</template>


&时代；
添加电子邮件地址
添加
${error.message}
${errorMessage}


${e}


接近
在
addEmail（）函数中
this.setEmail=''行之后this.emailController.validate（）再次调用验证

validate（）
方法返回一个
Promise
，因此您可能希望处理任何拒绝，因为您通常会看到验证文档的这一部分，特别是“验证和重置”小节

我猜，由于双向绑定和
validateOnChangeOrBlur
绑定行为，您预计会自动发生这种情况。没有发生这种情况的原因是JavaScript设置该值不会触发DOM事件，因此您需要手动调用或触发合成事件
 找不到plunk，真奇怪。以下是更新的链接：。我也会更新我的帖子。阿奎拉，谢谢你的回复。我能够通过添加
this.emailController.validate（）触发验证
在
this.setEmail=''之后。你是对的。我希望
validateOnChangeOrBlur
能帮我解决这个问题。感谢您为我澄清。@Ray Aquila已经回避了这一点，但没有明确提及：
validateOnChange
表示它在元素的
change
事件上进行验证，而不是在目标属性的值更改时进行验证。文档在触发器上说：“当绑定由于视图中的更改而更新模型时，请验证绑定。”感谢Fred的澄清。：）