WIP - Get the custom content app icon as invalid if my form in my content app contains errors in the form

src/Umbraco.Web.UI.Client/src/common/directives/validation/valformmanager.directive.js

@@ -46,6 +46,12 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
         },
         link: function (scope, element, attr, ctrls) {
 
+            function notifySubView() {
+                if (subView){
+                    subView.valStatusChanged({ form: formCtrl, showValidation: scope.showValidation });
+                }
+            }
+
             var formCtrl = ctrls[0];
             var parentFormMgr = ctrls.length > 0 ? ctrls[1] : null;
             var subView = ctrls.length > 1 ? ctrls[2] : null;
@@ -84,9 +90,7 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
             }, function (e) {
                 scope.$broadcast("valStatusChanged", { form: formCtrl });
 
-                if (subView){
-                    subView.valStatusChanged({ form: formCtrl });
-                }
+                notifySubView();
 
                 //find all invalid elements' .control-group's and apply the error class
                 var inError = element.find(".control-group .ng-invalid").closest(".control-group");
@@ -108,6 +112,7 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
             if (serverValidationManager.items.length > 0 || (parentFormMgr && parentFormMgr.showValidation)) {
                 element.addClass(SHOW_VALIDATION_CLASS_NAME);
                 scope.showValidation = true;
+                notifySubView();
             }
 
             var unsubscribe = [];
@@ -116,6 +121,7 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
             unsubscribe.push(scope.$on(SAVING_EVENT_NAME, function(ev, args) {
                 element.addClass(SHOW_VALIDATION_CLASS_NAME);
                 scope.showValidation = true;
+                notifySubView();
                 //set the flag so we can check to see if we should display the error.
                 isSavingNewItem = $routeParams.create;
             }));
@@ -125,6 +131,7 @@ function valFormManager(serverValidationManager, $rootScope, $timeout, $location
                 //remove validation class
                 element.removeClass(SHOW_VALIDATION_CLASS_NAME);
                 scope.showValidation = false;
+                notifySubView();
                 //clear form state as at this point we retrieve new data from the server
                 //and all validation will have cleared at this point
                 formCtrl.$setPristine();

src/Umbraco.Web.UI.Client/src/common/directives/validation/valsubview.directive.js

@@ -19,14 +19,15 @@
 
             if (subViewContent.length > 0) {
                 $scope.model.hasError = true;
-                $element.addClass("show-validation");
+                $scope.model.errorClass = args.showValidation ? 'show-validation' : null;
             } else {
                 $scope.model.hasError = false;
-                $element.removeClass("show-validation");
+                $scope.model.errorClass = null;
             }
          }
          else {
              $scope.model.hasError = false;
+             $scope.model.errorClass = null;
          }
         }
       }

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html

@@ -2,7 +2,7 @@
 
     <li ng-repeat="item in navigation | limitTo: itemsLimit ">
         <div ng-show="item.alias !== 'more'"
-             ng-class="{'show-validation': item.hasError}">
+            ng-class="item.errorClass">
             <a data-element="sub-view-{{item.alias}}"
                tabindex="-1"
                class="umb-sub-views-nav-item js-umb-sub-views-nav-item"

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-view.html

@@ -2,7 +2,7 @@
     ng-class="'sub-view-' + model.name"
     val-sub-view>
 
-    <!-- User definied content apps -->
+    <!-- User definied content apps
     <div ng-switch="model.alias">
         <ng-form ng-switch-when="umbContent|umbInfo" ng-switch-when-separator="|" val-form-manager>
             <div
@@ -10,9 +10,9 @@
                 ng-show="model.active === true"
                 ng-include="model.view">
             </div>
-        </ng-form>
+        </ng-form>-->
 
-        <!-- Custom Content Apps -->
+        <!-- Custom Content Apps
         <ng-form ng-switch-default val-form-manager umb-isolate-form>
             <div
                 class="umb-editor-sub-view__content"
@@ -20,10 +20,14 @@
                 ng-include="model.view">
             </div>
         </ng-form>
+    </div>-->
+
+    <div
+        class="umb-editor-sub-view__content"
+        ng-show="model.active === true"
+        ng-include="model.view">
     </div>
 
 
 
-
-
 </div>