AngularJS:输入类型为"email"的ngMessage怪异行为 [英] AngularJS: ngMessage weird behavior with input with type "email"

问题描述

我遵循从ngModel.$ parsers/ng-if移至ngModel.$ validators/ngMessages 从的两条不同消息时， ng-messages 指令的行为非常奇怪:首先，当用户离开字段时空(然后出现 required 错误)和第二个，当格式错误时(然后发生 email 错误)-它同时显示 required 和邮件消息，但是我的旧代码仅显示一条消息-有关 required 错误-这是我认为受欢迎的行为.这是简化的代码:

I follow Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages article from Todd Motto's blog and I want to migrate from ng-if to ng-messages. But ng-messages directive behaves very weird when I try to display to user two different messages for <input type="email">: first, when user leave field empty (then required error occurs) and second, when format is wrong (then email error occurs) - it displays both required and mail messages, but my old code displays only one message - about required error - and that is I think welcomed behavior. Here is simplified code:

<form name="ngMessageMailForm">
  <input type="email" required="" name="email" ng-model="ctrl.ngMessageMail" />
  <div ng-messages="ngMessageMailForm.email.$error" ng-if="ngMessageMailForm.email.$touched">
    <span ng-message="email">
      E-mail has not proper format<br />
    </span>
    <span ng-message="required">
      E-mail is required<br />
    </span>
  </div>
</form>

您可以在此Plunker中找到新旧代码的比较:

Comparison between old and new code you can find in this Plunker: Ng-if vs ng-messages at plnkr.co, to reproduce weird behavior of ng-message click inside and then outside of mail inputs. You will see one message in case of ng-if form, and two messages in case of ng-message form. Did I miss something while migrating from ng-if to ng-messages? Thank you in advance for any help.

推荐答案

一切都很好，但是您错过了添加角度消息库添加到您的项目中...

Everything is fine but you miss to add angular-messages library to your project...

将其文件添加到您的项目中，并将 ngMessages 注入到您的angularjs模块中，那么您就可以开始了...

Add its files to your project and inject ngMessages to your angularjs module then you are good to go...

这是更新插件[a]

这篇关于AngularJS:输入类型为"email"的ngMessage怪异行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！