aurelia - 在 Aurelia 中验证自定义组件

Question

我正在尝试使用 aurelia-validation 来解决验证问题的可重用文本框组件。在这种情况下，我需要将我的验证属性与其相对名称绑定(bind)。这是我使用组件的观点:

<form role="form" validate.bind="model.validation">
          <text-field name="firstName" value.two-way="model.firstName" label="First Name :" placeholder="Enter first name"></text-field>
          <text-field name="lastName" value.two-way="model.lastName" label="Last Name :" placeholder="Enter last name"></text-field>

查看模型:

import {Validation} from 'aurelia-validation';
import {ClientModel} from '../models/client-model';

export class Registrations{ 

 static inject() { return [Validation]; }

  constructor(validation) {
    this.heading = 'Registrations';
    this.model=new ClientModel('John','Neo','2');
    this.readonly = 'readonly';

    this.model.validation = validation.on(this.model)
    .ensure('firstName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .ensure('lastName')
    .isNotEmpty()
    .hasMinLength(5)
    .hasMaxLength(10) ;

  }
activate () {
}

}

文本字段自定义元素 View :

<div class="editor-field">
        <input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate="firstName">
    </div>

View 模型:

import {bindable} from 'aurelia-framework';

export class TextField {
    @bindable name = '';
    @bindable value = null;
    @bindable id = '';
    @bindable label = '';
    @bindable placeholder = '';
    @bindable readonly = false;
    @bindable hasValidationError = false;
    @bindable validationMessage = '';
}

它以这种方式工作，但我需要将验证绑定(bind)到它的专有名称，所以我尝试了这些方式:

`<input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate.bind="name">`

还有字符串插值语法:

<input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate="${name}">

但它们不起作用。似乎只接受了一个直接字符串，它位于文本字段自定义元素 View 中。如何为每个组件设置唯一的验证属性？

Answer 1

我认为你在这里遇到了一系列问题，所以这样做，看看你会怎样:

1) 验证你的顶级虚拟机

this.validation = validation.on(this)
  .ensure('model.firstName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
  .ensure('model.lastName')
    .isNotEmpty()
    .hasMinLength(5)
    .hasMaxLength(10) ;

2) 告诉验证框架这些验证来自哪里:

<form role="form" validate.bind="validation">
   <text-field validate="model.firstName" ...></text-field>
   <text-field validate="model.lastName" ...></text-field>

(validate="model.*"部分可能是不必要的，但也不应该造成伤害)

3) 将自定义元素包含在 form-group 中:

<form role="form" validate.bind="model.validation">
   <div class="form-group">
      <text-field validate="model.firstName" ...></text-field>
   </div>
   <div class="form-group">
      <text-field validate="model.lastName" ...></text-field>
   </div>