Question

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

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

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

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

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()方法返回Promise，因此您可能希望处理任何拒绝，因为您通常会看到验证文档Validation Controller的这一部分，特别是子部分'验证＆amp;复位”。

我猜你预计这会自动发生，因为双向绑定和validateOnChangeOrBlur绑定行为的原因不是JavaScript设置值不会触发DOM事件所以你需要手动调用或触发合成事件。

更改值时不会触发验证

1 个答案: