Question

我正在尝试向在动态表单组件中生成的自定义元素添加验证，以支持视图页面。我在Aurelia-Validation中注入了main.ts，并在DynamicForm.ts中进行了实例化。以下是我的代码。

CUSTOM ELEMENT：

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>

DynamicForm

TS档案：

import { bindable, bindingMode, inject } from 'aurelia-framework';
import { ValidationRules, ValidationControllerFactory } from 'aurelia-validation';

@inject(ValidationControllerFactory)
export class DynamicForm {

  @bindable public formName: string;
  @bindable public formTemplate: Object;
  @bindable public callback;
  inputItem: HTMLInputElement;

  controller = null;

  constructor(ValidationControllerFactory) {
    this.controller = ValidationControllerFactory.createForCurrentScope();
  }
  public formValidator(element, field) {
      //console.log(element);
  }

  public bind() {
    if (this.formTemplate) {
      this.formTemplate[this.formName].fields.forEach((item, i) => {
        if (item.validation.isValidate === true) {
          ValidationRules.ensure(item.name)
            .displayName(item.name)
            .required()
            .on(this.formTemplate);
        }
      });
      this.controller.validate();
    }
    console.log(this.controller);
  }
}

HTML视图：

<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>

支持页面：

此页面将加载DynamicForm

<template>
  <require from="./support.scss"></require>
  <require from="../DynamicForm/dynamicform"></require>
  <div class="panel panel-primary">
    <div class="panel-heading">${pageTitle}</div>
    <div class="panel-body">
      <dynamic-form form-template.two-way="formTemplate" form-name.two-way="formName" callback.call="processForm()"></dynamic-form>
    </div>
  </div>
</template>

当我在浏览器中查看support页面时，我没有在UI中进行验证。不确定验证是否位于嵌套组件/元素中。该视图的生成方式如下custominput element - ＆gt; DynamicForm - ＆gt; support page

Plunker link了解更多信息：

非常感谢任何帮助。：）

Answer 1

两个主要问题：

1。规则不应存储在字段

中

规则存储在对象的原型中，并且属于该对象的属性。

您正在为每个单独的媒体资源定义规则，因此最终它会尝试验证property.property而不是object.property，而您无法做到这一点。<\ n / p>

每次表单模板更改时，您还会声明规则。我基本上不会把那个逻辑放在那里;把它放在那些物体的来源附近。

如果在客户端代码中的某处声明对象，则在相同的模块文件中声明规则
如果对象来自服务器，请在获取后立即在获取它们的同一位置声明这些对象的规则

无论哪种方式，这些规则声明都不属于变更处理程序。

2。缺少绑定

ValidationController需要知道您要验证哪个或哪些对象。它只知道在以下任何一种情况下：

您的规则是通过controller.addObject(obj, rules).
您的规则是通过ValidationRules.[...].on(obj)宣布的，而html模板中的字段跟随着& validate。

在这两种方法中都存在一些优点和缺点，最终你应该选择能给你最小阻力的方法。我可能会选择第二种方法，因为如果直接在控制器上声明所有规则，事情会变得更加纠结。

验证从自定义元素派生到DynamicForm

1 个答案:

1。规则不应存储在字段

2。缺少绑定