CODEWITHSUNDEEP
javascriptangularjsvalidationng-tags-input
manisankar
manisankar

Reputation: 41

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

Upvotes: 1

Views: 2480

Answers (2)

keepscoding
keepscoding

Reputation: 146

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 has been provided and you have to write your own to perform validation.

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

Upvotes: 0

palash140
palash140

Reputation: 733

ngTagsInput supports attribute below for change to capture, it fires before adding to model

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;

})

Upvotes: 1

Related Questions