Merge pull request #1865 from spadgett/deploy-image-name-minlength

Merged by openshift-bot

Author: OpenShift Bot

app/scripts/directives/deployImage.js

@@ -24,6 +24,8 @@ angular.module("openshiftConsole")
       },
       templateUrl: 'views/directives/deploy-image.html',
       link: function($scope) {
+        $scope.forms = {};
+
         // Pick from an image stream tag or Docker image name.
         $scope.mode = "istag"; // "istag" or "dockerImage"
 

app/views/directives/deploy-image.html

@@ -109,10 +109,10 @@ <h2>
 
   <div class="row" ng-if-end>
     <div class="col-sm-12">
-      <form name="form" class="osc-form">
+      <ng-form name="forms.deployImage" class="osc-form">
         <div class="form-group">
          <label for="name" class="required">Name</label>
-         <div ng-class="{'has-error': form.name.$invalid || nameTaken}">
+         <div ng-class="{'has-error': (forms.deployImage.name.$invalid && forms.deployImage.name.$touched) || nameTaken}">
            <input type="text"
                   required
                   select-on-focus
@@ -128,19 +128,19 @@ <h2>
                   spellcheck="false">
           </div>
           <div class="help-block">Identifies the resources created for this image.</div>
-          <div class="has-error" ng-show="form.name.$invalid">
-            <div class="help-block" ng-show="form.name.$error.required">
+          <div class="has-error" ng-show="forms.deployImage.name.$invalid && forms.deployImage.name.$touched">
+            <div class="help-block" ng-show="forms.deployImage.name.$error.required">
               A name is required.
             </div>
-            <div class="help-block" ng-show="form.name.$error.pattern">
+            <div class="help-block" ng-show="forms.deployImage.name.$error.pattern">
               Name must be an alphanumeric (a-z, 0-9) string with a maximum length
               of 24 characters where the first character is a letter (a-z). The '-'
               character is allowed anywhere except the first or last character.
             </div>
-            <div class="help-block" ng-show="form.name.$error.minlength">
+            <div class="help-block" ng-show="forms.deployImage.name.$error.minlength">
               Name must have at least 2 characters.
             </div>
-            <div class="help-block" ng-show="form.name.$error.maxlength">
+            <div class="help-block" ng-show="forms.deployImage.name.$error.maxlength">
               Name can't have more than 24 characters.
             </div>
           </div>
@@ -188,10 +188,10 @@ <h2>
               class="btn btn-primary btn-lg"
               ng-click="create()"
               value=""
-              ng-disabled="form.$invalid || nameTaken || disableInputs">Create</button>
+              ng-disabled="forms.deployImage.$invalid || nameTaken || disableInputs">Create</button>
           <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
         </div>
-      </form>
+      </ng-form>
     </div>
   </div>
 

dist/scripts/scripts.js

@@ -13049,7 +13049,7 @@ labels: e,
 pullSecrets: n.pullSecrets
 });
 }
-n.mode = "istag", n.istag = {}, n.app = {}, n.env = [], n.labels = [ {
+n.forms = {}, n.mode = "istag", n.istag = {}, n.app = {}, n.env = [], n.labels = [ {
 name: "app",
 value: ""
 } ], n.pullSecrets = [ {

dist/scripts/templates.js

@@ -6336,24 +6336,24 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<div class=\"row\" ng-if-end>\n" +
     "<div class=\"col-sm-12\">\n" +
-    "<form name=\"form\" class=\"osc-form\">\n" +
+    "<ng-form name=\"forms.deployImage\" class=\"osc-form\">\n" +
     "<div class=\"form-group\">\n" +
     "<label for=\"name\" class=\"required\">Name</label>\n" +
-    "<div ng-class=\"{'has-error': form.name.$invalid || nameTaken}\">\n" +
+    "<div ng-class=\"{'has-error': (forms.deployImage.name.$invalid && forms.deployImage.name.$touched) || nameTaken}\">\n" +
     "<input type=\"text\" required select-on-focus minlength=\"2\" maxlength=\"24\" pattern=\"[a-z]([-a-z0-9]*[a-z0-9])?\" ng-model=\"app.name\" id=\"name\" name=\"name\" class=\"form-control\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n" +
     "</div>\n" +
     "<div class=\"help-block\">Identifies the resources created for this image.</div>\n" +
-    "<div class=\"has-error\" ng-show=\"form.name.$invalid\">\n" +
-    "<div class=\"help-block\" ng-show=\"form.name.$error.required\">\n" +
+    "<div class=\"has-error\" ng-show=\"forms.deployImage.name.$invalid && forms.deployImage.name.$touched\">\n" +
+    "<div class=\"help-block\" ng-show=\"forms.deployImage.name.$error.required\">\n" +
     "A name is required.\n" +
     "</div>\n" +
-    "<div class=\"help-block\" ng-show=\"form.name.$error.pattern\">\n" +
+    "<div class=\"help-block\" ng-show=\"forms.deployImage.name.$error.pattern\">\n" +
     "Name must be an alphanumeric (a-z, 0-9) string with a maximum length of 24 characters where the first character is a letter (a-z). The '-' character is allowed anywhere except the first or last character.\n" +
     "</div>\n" +
-    "<div class=\"help-block\" ng-show=\"form.name.$error.minlength\">\n" +
+    "<div class=\"help-block\" ng-show=\"forms.deployImage.name.$error.minlength\">\n" +
     "Name must have at least 2 characters.\n" +
     "</div>\n" +
-    "<div class=\"help-block\" ng-show=\"form.name.$error.maxlength\">\n" +
+    "<div class=\"help-block\" ng-show=\"forms.deployImage.name.$error.maxlength\">\n" +
     "Name can't have more than 24 characters.\n" +
     "</div>\n" +
     "</div>\n" +
@@ -6370,10 +6370,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</label-editor>\n" +
     "<alerts alerts=\"alerts\"></alerts>\n" +
     "<div ng-if=\"!isDialog\" class=\"button-group gutter-bottom\" ng-class=\"{'gutter-top': !alerts.length}\">\n" +
-    "<button type=\"submit\" class=\"btn btn-primary btn-lg\" ng-click=\"create()\" value=\"\" ng-disabled=\"form.$invalid || nameTaken || disableInputs\">Create</button>\n" +
+    "<button type=\"submit\" class=\"btn btn-primary btn-lg\" ng-click=\"create()\" value=\"\" ng-disabled=\"forms.deployImage.$invalid || nameTaken || disableInputs\">Create</button>\n" +
     "<a class=\"btn btn-default btn-lg\" href=\"#\" back>Cancel</a>\n" +
     "</div>\n" +
-    "</form>\n" +
+    "</ng-form>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div ng-if=\"!loading && import.error\" class=\"empty-state-message text-center\">\n" +