Javascript Aurelia验证器不'；更新用户界面

使用aurelia validator插件，即使表单提交和验证的代码工作正常，所有属性都会正确更新，UI不会改变，就像我不会在不正确的属性周围看到一个红色窗口，也不会看到给定表单属性有什么问题的声明。 它没有连接到我的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>

名字
姓
单位
电子邮件
主题
产品问题
合作
其他
消息

使用

表单组

类，不要忘记

输入时的
验证
试一下

<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>


土地
我想问题与您的标记与您使用的ViewStrategy不匹配有关

我怀疑您可能正在使用Aurelia提供的一些ViewStragey，例如，它需要Twitter引导标记。如果是这种情况，您应该将表单输入分组到表单组中-请参阅TWBootstrapViewStrategyBase类的演示（）和源代码：
谢谢！这确实是我错过的，以前有过表单组，但我弄错了，把它放在了一个错误的地方，好像一个表单组应该处理整个表单。。。有点傻：）没错！感谢您的详细解释，刚刚开始使用验证，很高兴了解ViewStrategies。谢谢：）