Question

我已经实施了AngularJs电子邮件验证，如下所示： -

<div class="control-group" ng-class="{'has-success': contactform.contactemail.$valid && submitted,'has-error': contactform.contactemail.$invalid && submitted }">
     Email
    <input type="email" class="form-control" id="contactemail" name="contactemail" ng-model="user.contactinformation[0].email" />
    <p class="help-block" ng-show="contactform.contactemail.$error.email">Not valid email!</p>
</div>

但是当用户开始在文本框中键入他的电子邮件时，会立即显示错误消息，但这看起来并不好。

如何在用户离开文本框时显示错误消息？

Answer 1

您可以使用ng-blur：

      <div ng-form="contactform" class="control-group">
          Email
          <input type="email" class="form-control" id="contactemail" ng-blur="validate=true" name="contactemail" ng-model="email"  />
          <p class="help-block" ng-show="contactform.contactemail.$error.email && validate">Not valid email!</p>
      </div>

在模糊事件上设置validate=true，仅在电子邮件无效且validate=true时显示错误消息。

Answer 2

一种方便的方法是使用自定义触发器ng-model-options="{ updateOn: 'blur' }"：

<input type="email" class="form-control" id="contactemail" 
           ng-model="email" ng-model-options="{ updateOn: 'blur' }" /><br />

这只会触发'模糊'事件的模型更新，这可能是你想要的事情

AngularJS - Textbox Blur上的电子邮件错误消息

2 个答案: