Aurelia validator не обновляет UI

Question

Использование плагина aurelia-validator, несмотря на то, что код для представления и проверки формы работает правильно, все свойства правильно обновлены, пользовательский интерфейс не изменяется, например, я не получаю красный окно вокруг свойств, которые являются неправильными, и утверждение о том, что не так с данным свойством формы. Это не связано с моим CSS, я попытался удалить весь мой css, и все равно он не работает. Любая идея, что здесь не так? Что-то пропало?

contact.js

import {inject} from 'aurelia-framework'; 
import {Validation} from 'aurelia-validation'; 


@inject(Validation) 
export class Contact{ 

    firstName = 'John'; 
    lastName = ''; 
    company = ''; 
    subject = 'product question'; 
    email = ''; 
    messageText = 'test'; 

    constructor(validation){ 
    this.validation = validation.on(this) 
     .ensure("firstName") 
     .isNotEmpty() 
     .ensure("lastName") 
     .isNotEmpty() 
     .ensure("email") 
     .isNotEmpty() 
     .isEmail(); 

    } 

    contact(){ 
    this.validation.validate() 
     .then(() => { 
      console.log("works"); 
     }) 
     .catch(() => { 
      console.log("error"); 
     }); 
    } 

} 

contact.html

<template> 
<div class="row contact-container"> 
    <div class="col-md-4 col-md-offset-3"> 
     <form role="form" validate.bind="validation" submit.delegate="contact()"> 
       <label>First Name</label> 
       <input type="text" value.bind="firstName" class="form-control" > 

       <label>Last name</label> 
       <input type="text" value.bind="lastName" class="form-control"> 

       <label>Company</label> 
       <input type="text" value.bind="company" class="form-control"> 

       <label>Email</label> 
       <input type="text" value.bind="email" class="form-control"> 

       <label >Subject</label> 
       <select value.bind="subject" class="form-control"> 
        <option value="product question">Product Question</option> 
        <option value="cooperation">Cooperation</option> 
        <option value="Other">Other</option> 

       </select> 

       <label for="message">Message</label> 
       <textarea rows="5" id="message" value.bind="messageText" class="form-control"></textarea> 
       <br></br> 

       <input type="submit" class="form-control"> 


     </form> 
    </div> 
</div> 
</template> 

Answer 1

Я думаю, проблема связана с тем, что Ваша разметка не соответствует ViewStrategy, которую вы используете.

Я подозреваю, что вы можете использовать некоторую ViewStragegy, предоставляемую Aurelia, например https://github.com/aurelia/validation/blob/master/doc/Intro.md#configuseviewstrategyviewstrategyinstance, которая ожидает разметки Twitter Bootstrap. Если это так, вы должны сгруппировать свои формы в формы-группы - см. Демо (http://aurelia.io/validation/#/) и источник класса TWBootstrapViewStrategyBase: https://github.com/aurelia/templating-validation/blob/master/src/strategies/twbootstrap-view-strategy.js#L11

Answer 2

Используйте form-group класс, не забывайте о validate на input попробовать как-л

<div class="form-group"> 
<label class="col-sm-3">Land</label>    
<div class="col-sm-6"> 
    <input class="input-small col-sm-12" type="text" 
      placeholder="Land" 
      value.bind="model.item.country" validate="country"> 
</div> 
</div>