Валидатор Aurelia не обновляет пользовательский интерфейс

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

контакт.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");
        });
  }

}

контакт.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>

javascript validation html aurelia
person Damian    schedule 06.12.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Я подозреваю, что вы можете использовать некоторые ViewStrategy, предоставленные 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

person atsu85    schedule 06.12.2015
comment
вот так! спасибо за это подробное объяснение, только начал играть с валидацией, полезно знать о ViewStrategies. Благодарность :) - person Damian; 06.12.2015

arrow_upward
1
arrow_downward

Используйте 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>
person valichek    schedule 06.12.2015
comment
Благодарность! это действительно то, что я пропустил, раньше у меня были группы форм, но я ошибся и поместил их не в то место, как будто одна группа форм должна была обрабатывать всю форму... как-то глупо :) - person Damian; 06.12.2015