CODEWITHSUNDEEP
ng-tags-input
Jean-Louis Bourlet
Jean-Louis Bourlet

Reputation: 33

ngTagsInput issue with ng-invalid style

I'm using https://github.com/mbenford/ngTagsInput.
I created a basic form with a url and a tag-input field that is required. Since it's required, i used the attribute min-tags="1"

I used it in conjonction with bootstrap stylehseet.

When displayed, the field appears with a red shadow border (since it is empty), even before any submit of the form. This is really annoying, is there any workaround ?

  1. Validate the field only after form submission ?
  2. Removing min-tags="1" and find another way to check the required aspect.
  3. Playing with css to discard those styles applied to this .ng-invalid .tags

Thank you

Edit : sample code :

<tags-input min-tags="1" ng-model="mytags"></tags-input>

Have done a plunker : http://plnkr.co/edit/EQcYfr4vLpkeJESho3GL?p=preview

Upvotes: 3

Views: 1634

Answers (1)

Michael Benford
Michael Benford

Reputation: 14114

You can simply use a custom class to handle the pristine state:

CSS

.custom-tags.ng-pristine .tags {
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  border: 1px solid #ccc
}

HTML

<tags-input min-tags="1" ng-model="mytags" class="custom-tags"></tags-input>

Working Plunker

Also, Angular 1.3 isn't officially supported yet. This is particularly important here because both pristine and dirty states won't be correctly set if you use that version of the framework.

Upvotes: 3

Related Questions