Validation Aurelia验证-访问特定属性的验证错误的最佳方法是什么？

我有一个自定义的文本字段组件，它封装了mdl文本字段。我通过它的可绑定属性传递所需的值。我想在公共视图模型中声明（并验证）验证规则，然后将可能出现的验证错误传递给每个文本字段（该字段应按需要显示）

我当前的伪代码：

<template>
    <text-field 
        value.two-way="entity.value1">
    </text-field>
    <text-field 
        value.two-way="entity.value2">
    </text-field>
</template>

如何将value1的验证错误传递到第一个文本字段，将value2的验证错误传递到第二个文本字段

我能做的最好的事情是：

<template>
    <div validation-errors.bind="firstValidationErrors">
        <text-field 
            value.two-way="entity.value1"
            errors.bind="firstValidationErrors">
        </text-field>
    <div>
    <div validation-errors.bind="secondValidationErrors">
        <text-field 
            value.two-way="entity.value2"
            errors.bind="secondValidationErrors">
        </text-field>
    <div>
</template>

但我必须在viewmodel中创建每个验证错误数组（我不确定是否必须创建，但linting强迫我创建）。我还必须包装页面中的每个控件。有更好的办法吗

我可以这样做吗

<template>
    <text-field 
        value.two-way="entity.value1"
        validation-errors.bind="firstValidationErrors"
        errors.bind="firstValidationErrors">
    </text-field>

    <text-field 
        value.two-way="entity.value2"
        validation-errors.bind="secondValidationErrors"
        errors.bind="secondValidationErrors">
    </text-field>
</template>

---

既然您希望您的

文本字段能够完全控制错误的显示，为什么不直接将其设置为一个

这很简单：

通过构造函数将
ValidationController
和
Element
注入自定义元素

在
bind（）
上，您可以这样注册它：
this.controller.addRenderer（this）

在
unbind（）
上，按如下方式取消注册：
this.controller.removenderer（this）

执行
render
方法，如下所示：

public render(instruction: RenderInstruction) {
  for (const { result } of instruction.unrender) {
    const index = this.errors.findIndex(x => x.error === result);
    if (index !== -1) {
      this.errors.splice(index, 1);
    }
  }

  for (const { result, elements } of instruction.render) {
    if (result.valid) {
      continue;
    }
    const targets = elements.filter(e => this.element.contains(e));
    if (targets.length) {
      this.errors.push({ error: result, targets });
    }
  }
}


这将为您提供自定义元素中的错误。不过，您也可以直接在那里进行渲染

请注意，我给您的这个示例几乎是来自
验证错误
自定义属性
的复制粘贴，因为您希望
文本字段
能够完全控制错误的显示，为什么不将其设为一个

这很简单：

通过构造函数将
ValidationController
和
Element
注入自定义元素

在
bind（）
上，您可以这样注册它：
this.controller.addRenderer（this）

在
unbind（）
上，按如下方式取消注册：
this.controller.removenderer（this）

执行
render
方法，如下所示：

public render(instruction: RenderInstruction) {
  for (const { result } of instruction.unrender) {
    const index = this.errors.findIndex(x => x.error === result);
    if (index !== -1) {
      this.errors.splice(index, 1);
    }
  }

  for (const { result, elements } of instruction.render) {
    if (result.valid) {
      continue;
    }
    const targets = elements.filter(e => this.element.contains(e));
    if (targets.length) {
      this.errors.push({ error: result, targets });
    }
  }
}


这将为您提供自定义元素中的错误。不过，您也可以直接在那里进行渲染

请注意，我给您的这个示例几乎是来自
验证错误
自定义属性的复制粘贴