Merge pull request #1918 from spadgett/delay-env-validation-errors

Merged by openshift-bot
openshift · Aug 8, 2017 · bba7c7f · bba7c7f
2 parents 419c1e6 + 8db1b91
commit bba7c7f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 43 deletions.
diff --git a/app/views/directives/key-value-editor.html b/app/views/directives/key-value-editor.html
@@ -26,7 +26,7 @@
       <!-- The name/key block -->
       <div
         class="form-group key-value-editor-input"
-        ng-class="{ 'has-error' :  (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid) }">
+        ng-class="{ 'has-error' :  (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid && forms.keyValueEditor[uniqueForKey(unique, $index)].$touched) }">
 
         <label for="uniqueForKey(unique, $index)" class="sr-only">{{keyPlaceholder}}</label>
 
@@ -50,36 +50,38 @@
           spellcheck="false">
 
         <!-- name/key help block -->
-        <span
-          class="help-block key-validation-error"
-          ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)">
-          <span class="validation-text">{{ entry.keyValidatorError || keyValidatorError }}</span>
-          <span ng-if="entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip" class="help action-inline">
-            <a
-              aria-hidden="true"
-              data-toggle="tooltip"
-              data-placement="top"
-              data-original-title="{{entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip}}">
-              <i class="{{entry.keyValidatorErrorTooltipIcon || keyValidatorErrorTooltipIcon}}"></i>
-            </a>
+        <span ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$touched)">
+          <span
+            class="help-block key-validation-error"
+            ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)">
+            <span class="validation-text">{{ entry.keyValidatorError || keyValidatorError }}</span>
+            <span ng-if="entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip" class="help action-inline">
+              <a
+                aria-hidden="true"
+                data-toggle="tooltip"
+                data-placement="top"
+                data-original-title="{{entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip}}">
+                <i class="{{entry.keyValidatorErrorTooltipIcon || keyValidatorErrorTooltipIcon}}"></i>
+              </a>
+            </span>
+          </span>
+          <span
+            class="help-block key-min-length"
+            ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.minlength)">
+            <span class="validation-text">Minimum character count is {{keyMinlength}}</span>
+          </span>
+          <span
+            class="help-block key-validation-error"
+            ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)">
+            <span class="validation-text">{{keyRequiredError}}</span>
           </span>
-        </span>
-        <span
-          class="help-block key-min-length"
-          ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.minlength)">
-          <span class="validation-text">Minimum character count is {{keyMinlength}}</span>
-        </span>
-        <span
-          class="help-block key-validation-error"
-          ng-show="(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)">
-          <span class="validation-text">{{keyRequiredError}}</span>
         </span>
       </div>
 
       <!-- the value block -->
       <div
         class="form-group key-value-editor-input"
-        ng-class="forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid ? 'has-error' : ''">
+        ng-class="{ 'has-error': (forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid && forms.keyValueEditor[uniqueForValue(unique, $index)].$touched) }">
 
         <label for="uniqueForValue(unique, $index)" class="sr-only">{{valuePlaceholder}}</label>
 
@@ -176,24 +178,26 @@
         </div>
 
         <!-- value help block -->
-        <span
-          class="help-block value-validation-error"
-          ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)">
-          <span class="validation-text">{{ entry.valueValidatorError || valueValidatorError}}</span>
-          <span ng-if="entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip" class="help action-inline">
-            <a
-              aria-hidden="true"
-              data-toggle="tooltip"
-              data-placement="top"
-              data-original-title="{{entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip}}">
-              <i class="{{entry.valueValidatorErrorTooltipIcon || valueValidatorErrorTooltipIcon}}"></i>
-            </a>
+        <span ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$touched)">
+          <span
+            class="help-block value-validation-error"
+            ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)">
+            <span class="validation-text">{{ entry.valueValidatorError || valueValidatorError}}</span>
+            <span ng-if="entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip" class="help action-inline">
+              <a
+                aria-hidden="true"
+                data-toggle="tooltip"
+                data-placement="top"
+                data-original-title="{{entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip}}">
+                <i class="{{entry.valueValidatorErrorTooltipIcon || valueValidatorErrorTooltipIcon}}"></i>
+              </a>
+            </span>
+          </span>
+          <span
+            class="help-block value-min-length"
+            ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)">
+            <span class="validation-text">Minimum character count is {{valueMinlength}}</span>
           </span>
-        </span>
-        <span
-          class="help-block value-min-length"
-          ng-show="(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)">
-          <span class="validation-text">Minimum character count is {{valueMinlength}}</span>
         </span>
       </div>
 

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -7264,10 +7264,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<div class=\"key-value-editor-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in entries\" as-sortable-item>\n" +
     "\n" +
-    "<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error' :  (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid) }\">\n" +
+    "<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error' :  (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid && forms.keyValueEditor[uniqueForKey(unique, $index)].$touched) }\">\n" +
     "<label for=\"uniqueForKey(unique, $index)\" class=\"sr-only\">{{keyPlaceholder}}</label>\n" +
     "<input type=\"text\" class=\"form-control\" ng-class=\"{ '{{setFocusKeyClass}}' : $last  }\" id=\"{{uniqueForKey(unique, $index)}}\" name=\"{{uniqueForKey(unique, $index)}}\" ng-attr-placeholder=\"{{ (!isReadonlyAny) && keyPlaceholder || ''}}\" ng-minlength=\"{{keyMinlength}}\" maxlength=\"{{keyMaxlength}}\" ng-model=\"entry.name\" ng-readonly=\"isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonlyKey || entry.isReadonly\" ng-pattern=\"validation.key\" ng-value ng-required=\"!allowEmptyKeys && entry.value\" ng-attr-key-value-editor-focus=\"{{grabFocus && $last}}\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n" +
     "\n" +
+    "<span ng-show=\"(forms.keyValueEditor[uniqueForKey(unique, $index)].$touched)\">\n" +
     "<span class=\"help-block key-validation-error\" ng-show=\"(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.pattern)\">\n" +
     "<span class=\"validation-text\">{{ entry.keyValidatorError || keyValidatorError }}</span>\n" +
     "<span ng-if=\"entry.keyValidatorErrorTooltip || keyValidatorErrorTooltip\" class=\"help action-inline\">\n" +
@@ -7282,9 +7283,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span class=\"help-block key-validation-error\" ng-show=\"(forms.keyValueEditor[uniqueForKey(unique, $index)].$error.required)\">\n" +
     "<span class=\"validation-text\">{{keyRequiredError}}</span>\n" +
     "</span>\n" +
+    "</span>\n" +
     "</div>\n" +
     "\n" +
-    "<div class=\"form-group key-value-editor-input\" ng-class=\"forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid ? 'has-error' : ''\">\n" +
+    "<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error': (forms.keyValueEditor[uniqueForValue(unique, $index)].$invalid && forms.keyValueEditor[uniqueForValue(unique, $index)].$touched) }\">\n" +
     "<label for=\"uniqueForValue(unique, $index)\" class=\"sr-only\">{{valuePlaceholder}}</label>\n" +
     "<div ng-if=\"(!entry.valueFrom)\">\n" +
     "<input type=\"text\" class=\"form-control\" ng-class=\"{ '{{setFocusValClass}}' : $last  }\" id=\"{{uniqueForValue(unique, $index)}}\" name=\"{{uniqueForValue(unique, $index)}}\" ng-attr-placeholder=\"{{ (!isReadonlyAny) && valuePlaceholder || ''}}\" ng-minlength=\"{{valueMinlength}}\" maxlength=\"{{valueMaxlength}}\" ng-model=\"entry.value\" ng-readonly=\"isReadonlyAny || isReadonlySome(entry.name) || entry.isReadonly\" ng-pattern=\"validation.val\" ng-required=\"!allowEmptyKeys && entry.value\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n" +
@@ -7348,6 +7350,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "\n" +
+    "<span ng-show=\"(forms.keyValueEditor[uniqueForValue(unique, $index)].$touched)\">\n" +
     "<span class=\"help-block value-validation-error\" ng-show=\"(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.pattern)\">\n" +
     "<span class=\"validation-text\">{{ entry.valueValidatorError || valueValidatorError}}</span>\n" +
     "<span ng-if=\"entry.valueValidatorErrorTooltip || valueValidatorErrorTooltip\" class=\"help action-inline\">\n" +
@@ -7359,6 +7362,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span class=\"help-block value-min-length\" ng-show=\"(forms.keyValueEditor[uniqueForValue(unique, $index)].$error.minlength)\">\n" +
     "<span class=\"validation-text\">Minimum character count is {{valueMinlength}}</span>\n" +
     "</span>\n" +
+    "</span>\n" +
     "</div>\n" +
     "<div class=\"key-value-editor-buttons\">\n" +
     "<span ng-if=\"(!cannotSort) && (entries.length > 1)\" class=\"fa fa-bars sort-row\" role=\"button\" aria-label=\"Move row\" aria-grabbed=\"false\" as-sortable-item-handle></span>\n" +