2017-08-30 41 views
1

我正在尝试扩展Aurelia Contact Manager Tutorial。具体而言:将电子邮件验证添加到contact-details.html视图。我也跟着Validation: Basics文档中的例子,在第一次传和预期一样:启动应用程序,从联系人列表模块的联系人,然后更新电子邮件的东西通过删除无效的“@”,然后标签了。验证规则触发并显示错误消息。Aurelia验证规则(绑定到模型)在随后激活视图模型时不会触发

然而,如果启动应用程序后,我选择的第一接触之后的第二,因此触发接触细节模块的第二激活,则验证规则不触发。

我试图在接触细节的激活validationController.reset(),虽然这将消除任何“老”的错误信息,在上模糊的验证仍然不火。

我试图创建验证控制器(使用NewInstance.of(ValidationController)与ValidationControllerFactory)的两种不同的方法但两者产生相同的结果。

如果导航到第二接触和“破”的验证后,我再刷新浏览器并重新加载页面,则再次验证工作。直到我从列表中选择另一个联系人,然后再重新打开它。

我是Aurelia和JavaScript框架的新手,我不确定这是一个错误还是需要额外处理重新路由到同一页面。

回答

0

这是一个很好的问题。有几件事情可能会把你赶出去。我创建了一个要点,其中包括必要的文件修改得到这个工作:

https://gist.github.com/freshcutdevelopment/170c2386f243e7095e276811dab52299

陷阱

由于您使用的验证视图模型不背视图 - 模型contact-detail.html视图文件,您将需要一个单独的类,您将应用验证规则。虽然听起来你已经完成了这部分,但我会将其完整包含在内。你可以创建这个类,像这样:

export class Contact { 
    email= ''; 
} 

您可以再申请验证规则这一类,如下所示:

ValidationRules 
    .ensure(a => a.email).required().email() 
    .on(Contact); 

最后可能缺少的拼图块这里是你需要挂钩进入屏幕激活生命周期钩子deactivate()并重置验证上下文。这将迫使BootstrapValidationRenderer从您的视图中删除验证样式。

deactivate(){ 
    this.controller.reset(); 
    } 

验证工作流程

的步骤如下:

  1. 注入控制器
  2. 添加validation renderer控制器
  3. 创建验证模型(只需要当您要验证的模型不是支持您视图的视图模型)
  4. validation rules应用于模型
  5. 确定何时重新设置并执行验证(在本例中为deactivate生命周期钩子。
  6. 应用validation binding behavior到视图
+1

谢谢您的回复和代码。稍作修改后,我能够让我的代码工作!我必须对您的代码进行的唯一更改是验证规则定义:'code'ValidationRules .ensure('email')。email()。required() .on(Contact); 'code' – Jonesi

+0

非常好,很高兴在这里! :d –