Проверка Aurelia работает, но не показывает сообщения проверки

Question

Я имею aurelia-validation (версия 0.6.3) настройка и блокировка отправки формы при звонке this.validation.validate().then () => {...}, но никакое сообщение проверки не отображается в пользовательском интерфейсе, ни когда значение поля изменяется, ни когда проверка блокирует отправку формы, что я ожидаю, основываясь на примерах проверки Aurelia

main.js

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin("aurelia-animator-css", settings => {
            settings.duration = 200;
        })
        .plugin("aurelia-computed")
        .plugin("aurelia-dialog", (settings) => {
            settings.lock = true;
            settings.startingZIndex = 5;
        })
        .plugin("aurelia-validation", (config) => {
            config.useLocale("nl-NL");
        })
        .feature("components/tinyMCE")
        .globalResources("components/typeahead");

    aurelia.start().then(() => aurelia.setRoot());
}

editSku.js

import{inject} from "aurelia-framework";
import EditableSku from "../models/editableSku";
import {Validation} from "aurelia-validation";

@inject(Validation)
export class EditSku {
    constructor (validation) {
        this.validation = {};

        this.sku = new EditableSku();
        this._setupValidation(validation);
    }

    save() {
        this.validation.validate().then(() => {
            // ...work some magic here...
        });
    }

    _setupValidation(validation) {
        this.validation = validation.on(this)
            .ensure("sku.articleCode")
                .isNotEmpty();
    }
}

editSku.html

<template>
    <div class="row">
        <div class="col-sm-11">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a href="#general-tab" data-toggle="tab">General</a>
                </li>
            </ul>
        </div>
    </div>
    <form role="form" class="form-horizontal" submit.delegate="save()" validate.bind="validation">
        <div class="row">
            <div class="col-sm-12">
                <div class="tab-content">
                    <div class="tab-pane active" id="general-tab">

                        <!-- The field to validate is in this view -->
                        <compose view="./templates/sku-general-tab.html"></compose>

                    </div>
                </div>
            </div>
        </div>
        <button type="submit" id="save" class="btn btn-primary" disabled.bind="validation.isValidating">Save</button>
    </form>
</template>

шаблоны / генерал-СК-tab.html

<template>
    <div class="form-group">
        <label class="col-sm-1 control-label" for="articleCode">
            Article code
        </label>
        <div class="col-sm-3" show.bind="isNew">
            <input type="text" value.bind="sku.articleCode" class="form-control" id="articleCode" name="articleCode" placeholder="Article code">
        </div>
    </div>
</template>

Как видите, я связываю валидацию с формой на editSku представление и входные данные для проверки на самом деле находятся на general-sku-tab Посмотреть. Я также попытался установить поле для проверки за пределами compose элемент, и это тоже не сработало.

Опять же, призыв к проверке в save метод работает как положено, нет <p> элементы вставляются с сообщениями проверки.

FWIW, я использую тему SB Admin 2 Bootstrap. Я ожидаю, что это может испортить стиль (даже если большинство стилей являются собственными стилями Bootstrap 3), но не для того, чтобы предотвратить aurelia-validation вставить сообщения в DOM...

Answer 1

Мне кажется, что aurelia-validation ищет класс form-group для проверки текущего элемента:

https://github.com/aurelia/validation/blob/master/src/strategies/twbootstrap-view-strategy.js#L69

https://github.com/aurelia/validation/blob/master/src/strategies/twbootstrap-view-strategy.js#L16

Как пользователь user5246190 предложил в своем ответе aurelia-validation ищет Labelэлемент, но внутри элемента с классомform-group

Answer 2

Aurelia ищет элемент label для печати проверочных сообщений в вашем View/UI

<div class="form-group fg-float fg-line" show.bind="isNew">
      <input type="text" class="input-sm form-control fg-input" dvalue.bind="sku.articleCode" class="form-control" id="articleCode" name="articleCode" placeholder="Article code">
   <label class="fg-label"></label>
</div>