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

Question

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

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, я использую the SB Admin 2 Bootstrap theme. Я бы ожидать, что это возможно испортить стайлинг (хотя большинство стилей фактического Bootstrap 3 стили), но не предотвратить aurelia-validation для вставки сообщения в DOM ...

Answer 1

мне кажется, что Аурелия-валидация ищет класс 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-проверки ищет Label элемента но внутри элемента с классом form-group

Answer 2

Aurelia Выглядит Для этикетки элемент для печати сообщения проверки на вашем Посмотреть/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>