如何将VM组合到Aurelia验证渲染器内的视图中

我正在尝试使用aurelia验证插件对表单执行验证。我正在创建一个自定义验证渲染器，它将更改输入框的颜色，并在框旁边放置一个图标。单击或悬停图标时，会出现一条弹出消息，显示实际的错误消息

目前，我正在渲染器中手动在代码中渲染所有这些内容，但似乎最好在html文件中定义所有这些内容的html以及相关的js文件，以处理单击并悬停在图标上的操作。现在，将所有错误内容（带有弹出窗口的图标）封装在视图/视图模型中，然后封装在我的验证渲染器的

render（）

中，以某种方式在所讨论的元素之后构建一个新的实例

这可能吗？我已经了解了如何使用

元素，但我确实在努力避免将其添加到所有表单的输入框中

这是我当前在渲染器中拥有的内容：

import {ValidationError, RenderInstruction} from 'aurelia-validation'

export class IconValidationRenderer {
    render(instruction){
        //Unrender old errors
        for(let {result, elements} of instruction.unrender){
            for(let element of elements){
                this.remove(element, result);
            }
        }

        //Render new errors
        for(let {result, elements} of instruction.render){
            for(let element of elements){
                this.add(element, result)
            }
        }
    }

    add(element, result){
        if(result.valid) 
            return

        //See if error element already exists
        if(element.className.indexOf("has-error") < 0){
            let errorIcon = document.createElement("i")
            errorIcon.className = "fa fa-exclamation-circle"
            errorIcon.style.color = "darkred"
            errorIcon.style.paddingLeft = "5px"
            errorIcon.id = `error-icon-${result.id}`
            errorIcon.click = ""
            element.parentNode.appendChild(errorIcon)

            element.classList.add("has-error")
            element.parentNode.style.alignItems = "center"

            let errorpop = document.createElement("div")
            let errorarrow = document.createElement("div")
            let errorbody = document.createElement("div")
            errorpop.id = `error-pop-${result.id}`
            errorpop.className = "flex-row errorpop"
            errorarrow.className = "poparrow"
            errorbody.className = "flex-col popmessages"
            errorbody.innerText = result.message
            console.log("Computing position")

            let elemRec = errorIcon.getBoundingClientRect()
            let elemH = errorIcon.clientHeight
            errorpop.style.top = elemRec.top - 10 + "px"
            errorpop.style.left = elemRec.right + "px"

            errorpop.appendChild(errorarrow)
            errorpop.appendChild(errorbody)
            element.parentNode.appendChild(errorpop)
        }
    }

    remove(element, result){
        if(result.valid)
            return

        element.classList.remove("has-error")
        let errorIcon = element.parentNode
            .querySelector(`#error-icon-${result.id}`)
        if(errorIcon)
            element.parentNode.removeChild(errorIcon)

        //Need to remove validation popup element
    }
}

图标验证渲染器.js

//Plus all the other bits that I posted in the code above
constructor(te){
   this.te = te
}

add(element, result){
    if(result.valid) return

    if(element.className.indexOf("has-error") < 0 {
        //replaced there error icon code above with this (as well as a few different variations
        let test = document.createElement("field-error-info")
        element.parentNode.appendChild(test)
        this.te.enhance({element: test})
    }
 }

//加上我在上面代码中发布的所有其他位
建造师（te）{
this.te=te
}
添加（元素、结果）{
if（result.valid）返回
if（element.className.indexOf（“有错误”）<0{
//将上面的错误图标代码替换为此（以及一些不同的变体
让test=document.createElement（“字段错误信息”）
元素.parentNode.appendChild（测试）
this.te.enhance（{element:test}）
}
}

字段错误信息.html

<template>
    <require from="./field-error-info.css" ></require>

    <i class="fa fa-exclamation-circle" click.delegate="displayMessage = !displayMessage" mouseenter.delegate="displayMessage = true" mouseleave.delegate="displayMessage = false"></i>
    <div show.bind="displayMessage" class="flex-row errorpop" style="left:300px">
        <div class="poparrow"></div>
        <div class="flexcol popmessages">Message 1</div>
    </div>
</template>

信息1

---

最终，

会被添加到DOM中，但实际上不会被渲染。（顺便说一句，我还尝试在add person dialog.html中添加

。

您可以创建一个表单控件自定义元素，该元素封装错误图标和工具提示逻辑。该元素可以公开两个内容投影槽，以允许传入标签和输入/选择/etc：

${errorInfo.error.message}

下面是它的使用方法：

名字：
姓氏：

实例：

---

请原谅这个糟糕的工具提示css

太棒了Jeremy！谢谢！

<template>
    <require from="./field-error-info.css" ></require>

    <i class="fa fa-exclamation-circle" click.delegate="displayMessage = !displayMessage" mouseenter.delegate="displayMessage = true" mouseleave.delegate="displayMessage = false"></i>
    <div show.bind="displayMessage" class="flex-row errorpop" style="left:300px">
        <div class="poparrow"></div>
        <div class="flexcol popmessages">Message 1</div>
    </div>
</template>