Adds ngMessages and updates the change password directive to use ng-messages for the validation message toggling, this requires a small custom new directive, now i can go replace all instances of val-toggle-msg and remove it.

src/Umbraco.Web.UI.Client/bower.json

@@ -41,7 +41,8 @@
     "clipboard": "~2.0.0",
     "font-awesome": "~4.2",
     "animejs": "^2.2.0",
-    "angular-ui-sortable": "0.14.3"
+    "angular-ui-sortable": "0.14.3",
+    "angular-messages": "^1.7.2"
   },
   "install": {
     "path": "lib-bower",

src/Umbraco.Web.UI.Client/src/app.js

@@ -10,7 +10,8 @@ var app = angular.module('umbraco', [
 	'ngAnimate',
     'ngCookies',
     'ngSanitize',
-    'ngTouch',
+    'ngTouch',
+    'ngMessages',
     'tmh.dynamicLocale',
     'ngFileUpload',
     'LocalStorageModule'

src/Umbraco.Web.UI.Client/src/common/directives/components/users/changepassword.directive.js

@@ -151,7 +151,7 @@
       controller: 'Umbraco.Editors.Users.ChangePasswordDirectiveController',
       scope: {
         isNew: "=?",
-        passwordValues: "=",        
+        passwordValues: "=",
         config: "="        
       }
     };
@@ -164,4 +164,4 @@
   angular.module('umbraco.directives').directive('changePassword', ChangePasswordDirective);
 
 
-})();
+})();

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

@@ -0,0 +1,35 @@
+(function () {
+    "use strict";
+
+    function showValidationOnSubmit(serverValidationManager) {
+        return {
+            require: "ngMessages",
+            restrict: "A",
+
+            link: function (scope, element, attr, ctrl) {
+
+                element.hide();
+
+                var unsubscribe = [];
+
+                unsubscribe.push(scope.$on("formSubmitting", function (ev, args) {
+                    element.show();
+                }));
+
+                unsubscribe.push(scope.$on("formSubmitted", function (ev, args) {
+                    element.hide();
+                }));
+
+                element.bind('$destroy', function () {
+                    for (var u in unsubscribe) {
+                        unsubscribe[u]();
+                    }
+                });
+
+            }
+        };
+    }
+
+    angular.module('umbraco.directives.validation').directive("showValidationOnSubmit", showValidationOnSubmit);
+
+})();

src/Umbraco.Web.UI.Client/src/install.loader.js

@@ -5,6 +5,7 @@ LazyLoad.js([
     'lib/angular-cookies/angular-cookies.js',
     'lib/angular-touch/angular-touch.js',
     'lib/angular-sanitize/angular-sanitize.js',
+    'lib/angular-messages/angular-messages.js',
     'lib/underscore/underscore-min.js',
     'lib/angular-ui-sortable/sortable.js', 
     'js/installer.app.js',

src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html

@@ -12,50 +12,53 @@
         </div>
         <div ng-switch-when="true">
             <ng-form name="passwordForm">
-                <umb-control-group alias="resetPassword" label="@user_resetPassword" ng-show="$parent.config.enableReset">
-                    <input type="checkbox" ng-model="$parent.passwordValues.reset"
+                <umb-control-group alias="resetPassword" label="@user_resetPassword" ng-show="config.enableReset">
+                    <input type="checkbox" ng-model="passwordValues.reset"
                            id="Checkbox1"
                            name="resetPassword"
                            val-server-field="resetPassword" 
                            no-dirty-check
-                           ng-change="$parent.$parent.showReset = !$parent.$parent.showReset"/>
+                           ng-change="showReset = !showReset"/>
                     <span class="help-inline" val-msg-for="resetPassword" val-toggle-msg="valServerField"></span>
                 </umb-control-group>
 
                 <!-- we need to show the old pass field when the provider cannot retrieve the password -->
-                <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="$parent.showOldPass()" required="true">
-                    <input type="password" name="oldPassword" ng-model="$parent.passwordValues.oldPassword"
+                <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="showOldPass()" required="true">
+                    <input type="password" name="oldPassword" ng-model="passwordValues.oldPassword"
                            class="input-block-level umb-textstring textstring"
                            required
-                           val-server-field="oldPassword" 
+                           val-server-field="oldPassword"
                            no-dirty-check
                            autocomplete="off" />
-                    <span class="help-inline" val-msg-for="oldPassword" val-toggle-msg="required">Required</span>
-                    <span class="help-inline" val-msg-for="oldPassword" val-toggle-msg="valServerField"></span>
+                    <span ng-messages="passwordForm.oldPassword.$error" show-validation-on-submit>
+                        <span class="help-inline" ng-message="required">Required</span>
+                        <span class="help-inline" ng-message="valServerField">{{passwordForm.oldPassword.errorMsg}}</span>
+                    </span>
                 </umb-control-group>
 
-                <umb-control-group alias="password" label="@user_newPassword" ng-if="!$parent.showReset" required="true">
-                    <input type="password" name="password" ng-model="$parent.passwordValues.newPassword"
+                <umb-control-group alias="password" label="@user_newPassword" ng-if="!showReset" required="true">
+                    <input type="password" name="password" ng-model="passwordValues.newPassword"
                            class="input-block-level umb-textstring textstring"
                            required
                            val-server-field="password"
-                           ng-minlength="{{$parent.config.minPasswordLength}}" 
+                           ng-minlength="{{config.minPasswordLength}}"
                            no-dirty-check
                            autocomplete="off" />
-                    <span class="help-inline" val-msg-for="password" val-toggle-msg="required">Required</span>
-                    <span class="help-inline" val-msg-for="password" val-toggle-msg="minlength">Minimum {{$parent.config.minPasswordLength}} characters</span>
-                    <span class="help-inline" val-msg-for="password" val-toggle-msg="valServerField"></span>
+                    <span ng-messages="passwordForm.password.$error" show-validation-on-submit>
+                        <span class="help-inline" ng-message="required">Required</span>
+                        <span class="help-inline" ng-message="minlength">Minimum {{config.minPasswordLength}} characters</span>
+                        <span class="help-inline" ng-message="valServerField"></span>
+                    </span>
                 </umb-control-group>
 
-                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="!$parent.showReset" required="true">
-                    <input type="password" name="confirmpassword" ng-model="$parent.passwordValues.confirm"
-                           class="input-block-level umb-textstring textstring"                           
-                           val-compare="password" 
+                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="!showReset" required="true">
+                    <input type="password" name="confirmpassword" ng-model="passwordValues.confirm"
+                           class="input-block-level umb-textstring textstring"
+                           val-compare="password"
                            no-dirty-check
                            autocomplete="off" />
-
-                    <span class="help-inline" val-msg-for="confirmpassword" val-toggle-msg="valCompare">
-                        <localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize>
+                    <span ng-messages="passwordForm.confirmpassword.$error" show-validation-on-submit>
+                        <span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>
                     </span>
                 </umb-control-group>
 

src/Umbraco.Web/UI/JavaScript/JsInitialize.js

@@ -15,6 +15,7 @@
     'lib/angular-touch/angular-touch.js',
     'lib/angular-sanitize/angular-sanitize.js',
     'lib/angular-animate/angular-animate.js',
+    'lib/angular-messages/angular-messages.js',
 
     'lib/angular-ui-sortable/sortable.js',