更改值时不会触发验证

Question

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

输入验证电子邮件地址并单击 add btn 后，我会将 this.setEmail 的值重置为 "" 一个空字符串。这样用户就可以键入要添加的新电子邮件地址。但是显示消息 Email is required 的验证规则不再被触发。请参阅以下示例：

见Plunker link here。页面加载后。单击电子邮件输入旁边的 + 图标。它将打开一个 bootstrap 模式。

下面是代码，也可以在上面看到link：

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>

Answer 1

在您的 addEmail() 函数中，在行 this.setEmail = ''; 之后使用 this.emailController.validate();

再次调用验证

validate() 方法 returns a Promise 所以你可能想要处理任何拒绝，因为你通常会看到验证文档的这一部分 Validation Controller 特别是子部分 'validate & reset'.

我猜你希望这会自动发生，因为双向绑定和 validateOnChangeOrBlur 绑定行为，它没有发生的原因是 JavaScript 设置值没有' t 触发 DOM 事件，因此您需要手动调用或触发合成事件。

更改值时不会触发验证

Validation not getting triggered when value is changed

aurelia