form-ng: factory for getting errors for error-bubble

Former-commit-id: afc5cad
JetBrains · Apr 7, 2016 · 3351edd · 3351edd
1 parent f3b2206
commit 3351edd
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/components/form-ng/form-ng.js b/components/form-ng/form-ng.js
@@ -5,13 +5,43 @@ import '../input/input.scss';
 import AngularElastic from 'angular-elastic';
 
 const module = angular.module('Ring.form', [MessageBundle, AngularElastic]);
+
+module.factory('getFormErrorMessages', [
+  'RingMessageBundle',
+  function (RingMessageBundle) {
+    function msg(id, formError) {
+      const messageBundleId = 'form_' + id;
+      if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
+        return RingMessageBundle[messageBundleId]();
+      }
+
+      const formErrors = (formError && formError[id]) || [];
+      for (let j = 0; j < formErrors.length; ++j) {
+        if (formErrors[j] && formErrors[j].message) {
+          return formErrors[j].message;
+        }
+      }
+    }
+
+    return function (formErrors) {
+      const errorMessages = [];
+      for (const key in formErrors) {
+        if (formErrors.hasOwnProperty(key) && formErrors[key]) {
+          errorMessages.push(msg(key, formErrors));
+        }
+      }
+      return errorMessages;
+    };
+  }
+]);
+
 /**
  * <div rg-error-bubble="form.name"></div>
  * @param {object} error-bubble Ng-model for this control
  *
  * Where form.name is a reference to angularJS form input
  */
-module.directive('rgErrorBubble', function (RingMessageBundle) {
+module.directive('rgErrorBubble', function (getFormErrorMessages) {
   return {
     scope: {
       errorBubble: '&rgErrorBubble'
@@ -46,19 +76,7 @@ module.directive('rgErrorBubble', function (RingMessageBundle) {
         }
       });
 
-      scope.msg = function (id, viewValue) {
-        const messageBundleId = 'form_' + id;
-        if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
-          return RingMessageBundle[messageBundleId](viewValue);
-        }
-
-        const formErrors = (scope.errorBubble().$error && scope.errorBubble().$error[id]) || [];
-        for (let j = 0; j < formErrors.length; ++j) {
-          if (formErrors[j] && formErrors[j].message) {
-            return formErrors[j].message;
-          }
-        }
-      };
+      scope.getFormErrorMessages = getFormErrorMessages;
     }
   };
 });

diff --git a/components/form-ng/form-ng__error-bubble.html b/components/form-ng/form-ng__error-bubble.html
@@ -1,3 +1,3 @@
 <div class="ring-error-bubble" ng-class="{ active: active }" ng-style="style">
-  <span ng-repeat="(errorKey, errorValue) in errorBubble().$error" ng-show="errorValue">{{ msg(errorKey, errorBubble().$viewValue) }}</span>
+  <span ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</span>
 </div>