Functionality for form errors thorough angular events.

README.md

@@ -1,7 +1,9 @@
-# AngularJS Form Errors Directive
+# AngularJS Form Errors
 
 A set of directives to make it easier to get a list of form errors with the posibility of getting them anywhere in your app.
 
+**NOTE:** This plugin relays on angular `events` to get the errors broadcasted in the app. The event name used for broadcasting the errors is `FORM_ERRORS`, therefore any other usage of events with the same name may result in errors.
+
 ### Why?
 
 Because it's a lot of work to do all those inline errors and to do markup for *every single* error that each input can violate. And maybe it doesn't fit in your design to do inline errors, etc, etc.
@@ -88,7 +90,7 @@ app.controller('MainCtrl', function ($scope) {
 
 If the fields are empty (which are both required), then `<form-errors></form-errors>` would list the fields and their errors.
 
-Demo: http://blooderking.github.io/angular-form-errors-directive
+Demo: http://blooderking.github.io/angular-form-errors
 
 ## The Finer Points
 
@@ -210,28 +212,16 @@ If you thought the previous features were great wait for this part. Let's just s
 
 Because this directive is using `events` which are broadcasted down from the `$rootScope`, you can listen `$on` a `'FORM_ERRORS'` `event` anywhere in your app. Along with the event you will get a parameter `object` that contains the form name and the list of errors. Eg: `{'loginForm', [Error('username is required.')]}`.
 
-```html
-<form name="theForm" error-messages="{ required: 'needs to be non-blank.' }">
-  <!-- form goes here -->
-
-  <!-- this will override the default error messages
-       for all the errors in this <form-errors>  -->
-  <form-errors errors-tmpl="formErrors.html"></form-errors>
-</form>
-```
-By default the template used to display the errors looks like this:
-
-```html
-<ul class="form-errors">
-  <li class="form-error" ng-repeat="error in errors">
-    {{ error.message }}
-  </li>
-</ul>
+```javascript
+$scope.$on('FORM_ERRORS', function (event, data) {
+  if (data.errors !== [])
+    $scope.errors[data.formName] = data.errors;
+});
 ```
 
 ## Changelog
 
-- **v0.1.0** Basic functionality. Module [angular-form-errors-directive](https://github.com/CWSpear/angular-form-errors-directive) rewrote.
+- **v0.1.1** Basic functionality for form errors with angular `events`. Module [angular-form-errors-directive](https://github.com/CWSpear/angular-form-errors-directive) rewrote.
 
 ## Original module
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-form-errors",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "homepage": "https://github.com/blooderking/angular-form-errors.git",
   "authors": [
     "Cameron Spear <[email protected]>",

demo.css

@@ -1,25 +1,25 @@
-.form-error { 
+.form-error {
     color: #c8272a;
 }
 
 .show-errors input.ng-invalid {
     border: 1px solid #c8272a;
 }
 
-.form-errors {
-    display: none;
-}
-
 .show-errors .form-errors {
     display: block;
 }
 
+ul{
+  list-style: none;
+}
+
 body {
     padding: 20px 0;
 }
 
-.btn:focus, .btn:active, .btn:focus:active { 
-    outline: 0 none; 
+.btn:focus, .btn:active, .btn:focus:active {
+    outline: 0 none;
 }
 
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
@@ -31,4 +31,4 @@ body {
     border-radius: 6px;
     padding: 10px;
     margin-bottom: 10px;
-}
+}

demo.js

@@ -1,28 +1,37 @@
 var app = angular.module('app', ['FormErrors']);
 
 app.config(function (FormErrorsOptionsProvider) {
-    FormErrorsOptionsProvider.extendDefaultErrorMessages({
-        // It only overrides what you pass it. All
-        // other default messages will be left alone
-        form: 'has some errors. Please fix them.'
-    });
+	FormErrorsOptionsProvider.extendDefaultErrorMessages({
+		// It only overrides what you pass it. All
+		// other default messages will be left alone
+		form: 'has some errors. Please fix them.'
+	});
 });
 
 app.controller('MainCtrl', function ($scope) {
-    $scope.emitErrors = true;
+	$scope.emitErrors = true;
+	$scope.errors = {};
+	$scope.showChildren = false;
 
-    $scope.errorMessages = {
-        required: 'é necessário.',
-        minlength: 'é demasiado curto.',
-    };
+	$scope.errorMessages = {
+		required: 'é necessário.',
+		minlength: 'é demasiado curto.',
+	};
 
-    $scope.submit = function () {
-        if ($scope.loginForm.$valid) {
-            $scope.emitErrors = false;
-            $scope.message = 'Form is valid!';
-        } else {
-            $scope.emitErrors = true;
-            $scope.message = 'Please correct the above errors.';
-        }
-    };
+	$scope.$on('FORM_ERRORS', function (event, data) {
+		if (data.errors !== [])
+			$scope.errors[data.formName] = data.errors;
+		else
+			delete $scope.errors[data.formName];
+	});
+
+	$scope.submit = function () {
+		if ($scope.loginForm.$valid) {
+			$scope.emitErrors = false;
+			$scope.message = 'Form is valid!';
+		} else {
+			$scope.emitErrors = true;
+			$scope.message = 'Please correct the above errors.';
+		}
+	};
 });