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

Question

我有一个自定义文本字段组件，它封装了 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>

Answer 1

既然你想让你的 text-field 完全控制错误的显示，为什么不把它变成 validation renderer？

非常简单：

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

2. 在 bind() 上，您可以这样注册：this.controller.addRenderer(this);

3. 在 unbind() 上，您可以这样取消注册：this.controller.removeRenderer(this);

4. 像这样实现 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 });
       }
     }
   }
   

这会导致您的自定义元素出现错误。不过，您也可以直接在那里进行渲染。

请注意，我给你的这个例子几乎是来自 validation-errors 自定义属性 source

的 copy-paste