JSFiddle - React, Tailwind, and code Playground

by TylerRick

HTML

<body ng-app="myApp">

<form ng-controller='TestDisplayErrorsAllKeys'>
  <p>errors: {{ other_errors }}</p>
  <p>nonEmpty(other_errors): {{ nonEmpty(other_errors) }}</p>
  <hr/>
  <div display-errors-all-keys errors='other_errors'></div>
  <input ng-click='add_errors()' type='button' value='Add errors'/>
  <input ng-click='clear_errors()' type='button' value='Clear errors'/>
</form>

</body>

CSS

.errors {
    color: red;
}

JavaScript

angular.module('templates/display-errors-all-keys', []).run(['$templateCache', function($templateCache) {
  $templateCache.put('templates/display-errors-all-keys',
  '<p>$window.Object.keys(errors): {{ $window.Object.keys(errors) }}</p>\n' +
  '<p>$root.nonEmpty(errors): {{ $root.nonEmpty(errors) }}</p>\n' +
  '<p>$parent.nonEmpty(errors): {{ $parent.nonEmpty(errors) }}</p>\n' +                     
  '<div class=\'errors\' ng-show=\'errors &amp;&amp; $parent.nonEmpty(errors)\'>\n' +
   '  <p>The following errors prevented this from saving:</p>\n' +
   '  <div ng-repeat=\'(key, error_messages) in errors\'>{{key}}: {{error_messages}}</div>\n' +
   '</div>\n' +
   '');
}]);

angular.module('myApp', ['templates/display-errors-all-keys'])
.run([
    '$rootScope', function($rootScope) {
        return $rootScope.nonEmpty = function(object) {
            return !!Object.keys(object).length;
        };
    }
])
.directive('displayErrorsAllKeys', function() {
    return {
        restrict: 'A',
        scope: {
            errors: '=',
            debug: '@debug'
        },
        templateUrl: 'templates/display-errors-all-keys'
    };
})
.controller('TestDisplayErrorsAllKeys', [
    '$scope', function($scope) {
        $scope.other_errors = {};
        $scope.add_errors = function() {
            return $scope.other_errors = {
                "surname": ["is required"],
                "phone": ["is required"]
            };
        };
        return $scope.clear_errors = function() {
            return $scope.other_errors = {};
        };
    }
]);