aurelia/validation

Hi. I tried to simplify the html needed to create a form with fields+validation+error display by creating a custom component.

validated-input.html

<template>
    <div class="form-input ${class}">
        <slot name="icon"></slot>
        <label if.bind="!floatingLabel">${label}</label>
        <div>
            <div class="ui input primary-input">
                <input type="text" ref="field" class="${errors.length > 0 ? 'has-errors': ''}"
                    keydown.delegate="keyDownHandler($event)" value.bind="value" blur.trigger="blur()" input.trigger="input()" autocomplete="off">
                <div if.bind="floatingLabel" class="floating-label"><span class="floating-label-focus">${label}</span></div>
            </div>
            <div if.bind="errors.length > 0" class="validation-error">
                <i class="exclamation triangle icon"></i>
                <span repeat.for="e of errors">${e.message}</span>
            </div>
        </div>
    </div>
</template>

validated-input.ts

import { ValidationController, ValidateResult, validateTrigger } from "aurelia-validation";
import { customElement, bindable, containerless, autoinject, bindingMode, DOM } from "aurelia-framework";

@autoinject
@containerless
@customElement("validated-input")
export class ValidatedInput {
    @bindable field: HTMLInputElement;
    @bindable label: string;
    @bindable class: string = "";
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value: string;
    @bindable name: string;
    @bindable floatingLabel: boolean = false;
    @bindable validationTrigger: string = "change";
    @bindable maxlength: string | null = null;
    @bindable pattern: string | null = null;
    errors: ValidateResult[];
    private controller: ValidationController;

    constructor(private element: Element) {
    }

    bind(bindingContext: any) {
        this.field.setAttribute("value", this.value || "");
        this.controller = bindingContext.controller;
        if (this.maxlength) {
            this.field.setAttribute("maxlength", this.maxlength);
        }
        if (this.pattern) {
            this.field.setAttribute("pattern", this.pattern);
        }
        this.controller.subscribe((e) => this.errors = e.results.filter((x) => x.propertyName === this.name && !x.valid));
    }

    blur() {
        if (this.validationTrigger === "blur") {
            this.validate();
        }
    }

    input() {
        if (this.validationTrigger === "change") {
            this.validate();
        }
    }

    private validate() {
        this.field.setAttribute("value", this.value || "");
        this.controller.validate().then((validate) => {
            this.errors = validate.results.filter((x) => x.propertyName === this.name && !x.valid);
        });
    }

    private keyDownHandler(e: KeyboardEvent) {
        if (e.key === "Enter") {
            this.element.dispatchEvent(DOM.createCustomEvent("enter"));
        }
        return true;
    }
}

The problem I have is that I need (I think) to have each field subscribe to the validation callback to perform their logic to filter the errors collection. This is because a validation can be triggered by the page that contains the submit button. But by having each field subscribe to the validation callback this also means that as soon as I validate one of the fields in the blur or change handlers all of the fields are validated. I only want this full form validation when you try to submit the form.

The ValidationController and the ValidationRules are created and defined in the containing page.

I feel that I have over complicated this solution and that there must be something simpler?