Merge branch 'morgenes-input-group'

Author: paulyoder

README.md

@@ -31,6 +31,15 @@ angular.module('yourApp', ['ui.bootstrap.showErrors']);
 </form>
 ```
 
+3. If you want to avoid the extra bottom margin of `form-group`, you can use `input-group`.
+```html
+<form name="userForm">
+  <div class="input-group" show-errors>
+    <input type="text" name="firstName" ng-model="firstName" ng-required />
+  </div>
+</form>
+```
+
 Force Validity Check
 ---
 By default this directive doesn't check the validity until the user tabs off the input element. However, there are times you want to show invalid form elements even if the user has not tabbed off. (e.g. before saving the form)
@@ -106,6 +115,7 @@ If you only want to show valid values on specific inputs, then you can pass in t
 </form>
 ```
 
+
 Custom Trigger
 ---
 By default, the validation is not performed until the `blur` event is trigger on the input 

src/showErrors.coffee

@@ -57,8 +57,8 @@ showErrorsModule.directive 'showErrors',
       restrict: 'A'
       require: '^form'
       compile: (elem, attrs) ->
-        unless elem.hasClass 'form-group'
-          throw "show-errors element does not have the 'form-group' class"
+        unless elem.hasClass('form-group') or elem.hasClass('input-group')
+          throw "show-errors element does not have the 'form-group' or 'input-group' class"
         linkFn
     }
 ]

src/showErrors.js

@@ -67,8 +67,8 @@
         restrict: 'A',
         require: '^form',
         compile: function(elem, attrs) {
-          if (!elem.hasClass('form-group')) {
-            throw "show-errors element does not have the 'form-group' class";
+          if (!(elem.hasClass('form-group') || elem.hasClass('input-group'))) {
+            throw "show-errors element does not have the 'form-group' or 'input-group' class";
           }
           return linkFn;
         }

src/showErrors.min.js

@@ -33,10 +33,15 @@ describe 'showErrors', ->
         $compile('<form name="userForm"><div class="form-group" show-errors><input type="text" name="firstName"></input></div></form>')($scope)
       ).toThrow "show-errors element has no child input elements with a 'name' attribute and a 'form-control' class"
 
-  it "throws an exception if the element doesn't have the form-group class", ->
+  it "throws an exception if the element doesn't have the form-group or input-group class", ->
     expect( ->
       $compile('<div show-errors></div>')($scope)
-    ).toThrow "show-errors element does not have the 'form-group' class"
+    ).toThrow "show-errors element does not have the 'form-group' or 'input-group' class"
+
+  it "doesn't throw an exception if the element has the input-group class", ->
+    expect( ->
+      $compile('<form name="userForm"><div class="input-group" show-errors><input class="form-control" type="text" name="firstName"></input></div></form>')($scope)
+    ).not.toThrow()
 
   it "throws an exception if the element isn't in a form tag", ->
     expect( ->

test/showErrors.spec.coffee

@@ -35,10 +35,15 @@
         }).toThrow("show-errors element has no child input elements with a 'name' attribute and a 'form-control' class");
       });
     });
-    it("throws an exception if the element doesn't have the form-group class", function() {
+    it("throws an exception if the element doesn't have the form-group or input-group class", function() {
       return expect(function() {
         return $compile('<div show-errors></div>')($scope);
-      }).toThrow("show-errors element does not have the 'form-group' class");
+      }).toThrow("show-errors element does not have the 'form-group' or 'input-group' class");
+    });
+    it("doesn't throw an exception if the element has the input-group class", function() {
+      return expect(function() {
+        return $compile('<form name="userForm"><div class="input-group" show-errors><input class="form-control" type="text" name="firstName"></input></div></form>')($scope);
+      }).not.toThrow();
     });
     it("throws an exception if the element isn't in a form tag", function() {
       return expect(function() {