Aurelia 验证从DynamicForm中的自定义元素派生的输入

我正在尝试向在动态表单组件中生成的自定义元素添加验证，以支持查看页面。我在

main.ts

中注入了

Aurelia验证

，并将

DynamicForm.ts

实例化。下面是我的代码

自定义元素：

TS文件

import { customElement, useView, bindable, bindingMode, inject } from 'aurelia-framework';

@customElement('custom-input')
@useView('./custominput.html')
export class CustomInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) fieldValue: string;
  @bindable public customClass: string;
  @bindable public placeHolder: string;
  @bindable public fieldName: string;
  @bindable public formItem: any;

}

HTML视图：

<template>
    <input class="${customClass}" custom-class.bind="customClass" type="text" field-value.bind="fieldValue"
           value.two-way="fieldValue & validateOnChange" placeholder="${placeHolder}" place-holder.bind="placeHolder" 
           id="${fieldName}" field-name.bind="fieldName" form-item.bind="formItem" />
</template>

<template>
  <require from="../../elements/custominput/custominput"></require>
  <form class="form-horizontal">
      <div form-name.bind="formName" class="form-group" repeat.for="item of formTemplate[formName].fields">
          <label for="${item.name}" class="col-sm-2 control-label">${item.label}</label>
          <div class="col-sm-10" if.bind="item.type === 'text' && item.element === 'input'">
              <custom-input router.bind="router" custom-class="${item.classes}" field-value.two-way="item.value"
                            place-holder="${item.placeHolder}" ref="inputItem" item.bind="formValidator(inputItem, item)" 
                            field-name.bind="item.name" form-item.bind="item">
              </custom-input>
          </div>
      </div>
    <div class="form-group">
      <div class="col-sm-12">
        <button type="submit" class="btn btn-default pull-right" click.delegate="callback()">Submit</button>
      </div>
    </div>
  </form>
  <ul if.bind="controller.errors.length > 0">
    <li repeat.for="error of controller.errors">${error}</li>
  </ul>
</template>

HTML视图：

<template>
    <input class="${customClass}" custom-class.bind="customClass" type="text" field-value.bind="fieldValue"
           value.two-way="fieldValue & validateOnChange" placeholder="${placeHolder}" place-holder.bind="placeHolder" 
           id="${fieldName}" field-name.bind="fieldName" form-item.bind="formItem" />
</template>

<template>
  <require from="../../elements/custominput/custominput"></require>
  <form class="form-horizontal">
      <div form-name.bind="formName" class="form-group" repeat.for="item of formTemplate[formName].fields">
          <label for="${item.name}" class="col-sm-2 control-label">${item.label}</label>
          <div class="col-sm-10" if.bind="item.type === 'text' && item.element === 'input'">
              <custom-input router.bind="router" custom-class="${item.classes}" field-value.two-way="item.value"
                            place-holder="${item.placeHolder}" ref="inputItem" item.bind="formValidator(inputItem, item)" 
                            field-name.bind="item.name" form-item.bind="item">
              </custom-input>
          </div>
      </div>
    <div class="form-group">
      <div class="col-sm-12">
        <button type="submit" class="btn btn-default pull-right" click.delegate="callback()">Submit</button>
      </div>
    </div>
  </form>
  <ul if.bind="controller.errors.length > 0">
    <li repeat.for="error of controller.errors">${error}</li>
  </ul>
</template>

当我在浏览器中查看

支持

页面时，我不会在UI中得到验证。不确定验证是否位于嵌套组件/元素中。视图是这样生成的

custominput元素

->

动态表单

->

支持页面

Plunker了解更多信息：

非常感谢您的帮助。：）

两个主要问题：

1.规则不应存储在字段中 规则存储在对象的原型上，并与该对象的属性相关

您正在定义每个属性的规则，因此最终它将尝试验证

property.property

，而不是

object.property

，这并不像您所看到的那样有效

每次表单模板更改时，您也要声明规则。我基本上不会把这种逻辑放在那里；把它靠近那些物体的来源

• 如果在客户机代码中的某个地方声明了对象，请在相同的模块文件中声明规则
• 如果对象来自服务器，则在获取对象后立即在获取对象的同一位置声明这些对象的规则

无论如何，这些规则声明都不属于更改处理程序

2.缺少绑定 ValidationController需要知道要验证的对象或属性。它只知道以下情况之一：

• 您的规则是通过

  controller.addObject（obj，rules）声明的。

• 您的规则通过

  ValidationRules.[…]声明。在（obj）

  上，html模板中的字段后面有

  &validate

---

这两种方法各有利弊，最终你应该选择一种阻力最小的方法。我可能会选择第二种方法，因为如果您直接在控制器上声明所有规则，事情会变得更加复杂。

感谢Fred的回答。我已经更新了我的帖子，并将

validationRule

添加到

bind

。我想从你的答案中选择第二个选项。但是由于某些原因，验证规则没有得到应用。我想知道为什么您要同时绑定

formTemplate

和

formName

，而您也可以直接绑定相应的

表单

（或者它是一个

formTemplate

，是否应该将

formTemplate

命名为

formTemplates

？）你是对的。可能有多个表单。我应该将其命名为

formTemplates

。创建plunker作为示例代码。在

app.ts

文件中，你会发现

formTemplate

传递到

dynamicForm

并且

dynamicForm

具有

validationRule

附加的

rule

方法我想问题出在

dynamicform.ts

中的链接37中，如带有嵌套对象的plunker中所示。我已经更新并清理了一下你的punkr，以显示我的意思：注意，在app.ts中，我正在从表单模板中提取验证信息，并将规则分配给每个字段对象，带有“value”作为属性，利用你已经合适的对象结构来动态地做每件事。就我所见，这是一种魅力。