manisankar manisankar - 2 months ago 31
AngularJS Question

In ngTagsInput how to show validation message for different cases?

I am using

ngTagsInput
Angular plugin for getting multiple email ids. Below is my code:

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


In above code 3 validation has been added those are as follows:


  1. For Mandatory fields.

  2. Field should accept only an email id.

  3. It should not allow duplicate email id.



The above cases are working fine. But, I want to show the error message dynamically according to the above one of the case has occurred. Please help me out !!!

Answer

for required, <p class="help-block" style="color:red" ng-show="contact_us.from_email.$error.required">
email address is required </p>
for pattern & duplicate, i think no validation flag provided and you have to write your own to do validation.

For duplicate, maybe this will help. Angularjs - How to check for unique inputs and if there is a duplicate mark both as invalid