在ngTagsInput中如何显示不同情况的验证消息?

时间:2015-09-06 11:07:14

标签: javascript angularjs validation ng-tags-input

我正在使用ngTagsInput Angular插件来获取多个电子邮件ID。以下是我的代码:

<form name="contact_us" role="form" novalidate enctype="multipart/form-data">
  <div class="form-group">
    <label class="control-label" for="from_email">
      From
    </label>
    <tags-input ng-model="contactUs.emails" type="email" id="from_email"
        placeholder="From" name="from_email"
        allowed-tags-pattern="^[A-Za-z0-9._%+-]+@(?:[A-Za-z0-9-]+.)+[A-Za-z]{2,}" 
        allow-leftover-text="false" ng-required="true" add-on-space="true">
    </tags-input>
    <p class="help-block" style="color:red"
        ng-show="contact_us.from_email.$invalid && (contact_us.$submitted || contact_us.$dirty)">
      Please enter proper email address
    </p>
    <button type="submit" class="btn btn-default" ng-click="Send(contact_us)">
      Send
    </button>
</form>

在上面的代码3中添加了验证,如下所示:

  1. 对于必填字段。
  2. 字段应仅接受电子邮件ID。
  3. 不应允许重复的电子邮件ID。
  4. 上述情况正常。但是,我想根据上面发生的情况动态显示错误消息。请帮帮我!!!

2 个答案:

答案 0 :(得分:1)

ngTagsInput支持下面的属性以便更改为捕获,它会在添加到模型

之前触发
on-tag-adding="foo($tag)" 

$scope.foo(function(tag){
   // look for error
     // if found return false

  // change the text of tag
     tag.text='what ever';
     return tag;

})

答案 1 :(得分:0)

如需要:

<p class="help-block" style="color:red"
    ng-show="contact_us.from_email.$error.required">           
    email address is required
</p>

对于模式和&amp;重复,我认为没有提供验证标志,你必须自己编写验证标志。

对于重复,也许这会有所帮助。 Angularjs - How to check for unique inputs and if there is a duplicate mark both as invalid