动态构建表单上的 Aurelia 验证答案

【问题标题】：Aurelia Validation on dynamically built form动态构建表单上的 Aurelia 验证
【发布时间】：2017-01-31 05:44:29
【问题描述】：

我正在创建一个动态生成用户输入表单的自定义元素。到目前为止，它运行良好，但我在设置 Aurelia-Validation 时遇到问题，需要一些帮助。

my-form.html

<div class="form-group" repeat.for="control of controls">
  <label>${control.label}</label>
  <div>
    <compose containerless
      view-model="resources/elements/${control.type}/${control.type}" 
      model.bind="{'control': control, 'model': model, 'readonly': readonly}"
      class="form-control"></compose>
  </div>
</div>

我有几个不同的control.type 可用和工作（my-textbox、my-dropdown、my-datepicker）——每个都是自定义元素。例如：

示例控件 (my-textbox.html)

<template>
  <input type="text"
    class="form-control" 
    value.bind="model[control.bind] & validate">
</template>

父视图：

<my-form controls.bind="controls" model.bind="model" if.bind="controls"></my-form>

父视图模型：

controls = [
  {label: 'Username', type: 'my-textbox', bind: 'user_username'},
  {label: 'Status', type: 'my-dropdown', bind: 'user_status', enum: 'ActiveInactive', default: '(Choose)'},
  {label: 'Last_login', type: 'my-datepicker', bind: 'user_lastlogin', vc: 'date'}];

ValidationRules
  .ensure('user_username').required().minLength(1).maxLength(10)
  .ensure('user_status').required()
  .ensure('user_lastlogin').required()
  .on(this.model);

我收到错误 错误：尚未注册 ValidationController。在 ValidateBindingBehaviorBase.bind...。但是，我只想要一个用于整个动态构建表单的验证器，所以我不想在每个控件中导入验证。我该怎么办？

【问题讨论】：

标签： aurelia

【解决方案1】：

它实际上可以在父窗体中导入验证控制器和相关资源，即使& validate 附加到子控件。

父视图模型

import {inject} from 'aurelia-framework';
import {ValidationControllerFactory, ValidationRules} from 'aurelia-validation';
import {BootstrapFormRenderer} from 'common/bootstrap-form-renderer';

@inject(Core, ValidationControllerFactory)
export class MyForm {
  constructor(validationControllerFactory) {
    this.validationCtrl = validationControllerFactory.createForCurrentScope();
    this.validationCtrl.addRenderer(new BootstrapFormRenderer());
  }
  setupValidator() {
    let rules = [];
    this.controls.map(control => {
      if (control.validation) {
        rules.push(ValidationRules.ensure(control.bind).required().rules[0]);
    }
    this.validationCtrl.addObject(this.modelEdit, rules);
  }
}

【讨论】：