Fix validations on load

mulesoft · Nov 10, 2015 · 7934cbb · 7934cbb
1 parent cd26966
commit 7934cbb
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 27 deletions.
diff --git a/dist/scripts/api-console.js b/dist/scripts/api-console.js
@@ -1137,6 +1137,11 @@
 
           keys.forEach(function (fieldName) {
             var value = angular.copy(form.form[fieldName].$viewValue);
+
+            value = value || '';
+
+            console.log(value);
+
             form.form[fieldName].$setViewValue(value);
           });
 

diff --git a/dist/styles/api-console-dark-theme.css b/dist/styles/api-console-dark-theme.css
@@ -593,11 +593,15 @@ span.CodeMirror-selectedtext { background: none; }
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
-input.ng-invalid {
+/*input.ng-dirty.ng-invalid {
+  border: 1px solid red;
+}*/
+
+input.ng-dirty.ng-invalid-required {
   border: 1px solid red;
 }
 
-input.ng-invalid-required + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-required + span.raml-console-field-validation-error::after {
   content: 'Required';
   color: white;
   position: absolute;
@@ -608,6 +612,10 @@ input.ng-invalid-required + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
+input.ng-dirty.ng-invalid-min-length {
+  border: 1px solid red;
+}
+
 input.ng-invalid-min-length + span.raml-console-field-validation-error::after {
   content: 'Invalid min length';
   color: white;
@@ -619,7 +627,11 @@ input.ng-invalid-min-length + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-max-length + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-max-length {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-max-length + span.raml-console-field-validation-error::after {
   content: 'Invalid max length';
   color: white;
   position: absolute;
@@ -630,7 +642,11 @@ input.ng-invalid-max-length + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-enum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-enum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-enum + span.raml-console-field-validation-error::after {
   content: 'Invalid enum value';
   color: white;
   position: absolute;
@@ -641,7 +657,11 @@ input.ng-invalid-enum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-minimum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-minimum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-minimum + span.raml-console-field-validation-error::after {
   content: 'Invalid minimum';
   color: white;
   position: absolute;
@@ -652,7 +672,11 @@ input.ng-invalid-minimum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-maximum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-maximum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-maximum + span.raml-console-field-validation-error::after {
   content: 'Invalid maximum';
   color: white;
   position: absolute;
@@ -663,7 +687,11 @@ input.ng-invalid-maximum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-type + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-type {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-type + span.raml-console-field-validation-error::after {
   content: 'Invalid type';
   color: white;
   position: absolute;
@@ -674,7 +702,11 @@ input.ng-invalid-type + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-pattern + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-pattern {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-pattern + span.raml-console-field-validation-error::after {
   content: 'Invalid pattern';
   color: white;
   position: absolute;
@@ -685,7 +717,11 @@ input.ng-invalid-pattern + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-repeat + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-repeat {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-repeat + span.raml-console-field-validation-error::after {
   content: 'Invalid repeat';
   color: white;
   position: absolute;

diff --git a/dist/styles/api-console-light-theme.css b/dist/styles/api-console-light-theme.css
@@ -593,11 +593,15 @@ span.CodeMirror-selectedtext { background: none; }
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
-input.ng-invalid {
+/*input.ng-dirty.ng-invalid {
+  border: 1px solid red;
+}*/
+
+input.ng-dirty.ng-invalid-required {
   border: 1px solid red;
 }
 
-input.ng-invalid-required + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-required + span.raml-console-field-validation-error::after {
   content: 'Required';
   color: white;
   position: absolute;
@@ -608,6 +612,10 @@ input.ng-invalid-required + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
+input.ng-dirty.ng-invalid-min-length {
+  border: 1px solid red;
+}
+
 input.ng-invalid-min-length + span.raml-console-field-validation-error::after {
   content: 'Invalid min length';
   color: white;
@@ -619,7 +627,11 @@ input.ng-invalid-min-length + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-max-length + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-max-length {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-max-length + span.raml-console-field-validation-error::after {
   content: 'Invalid max length';
   color: white;
   position: absolute;
@@ -630,7 +642,11 @@ input.ng-invalid-max-length + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-enum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-enum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-enum + span.raml-console-field-validation-error::after {
   content: 'Invalid enum value';
   color: white;
   position: absolute;
@@ -641,7 +657,11 @@ input.ng-invalid-enum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-minimum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-minimum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-minimum + span.raml-console-field-validation-error::after {
   content: 'Invalid minimum';
   color: white;
   position: absolute;
@@ -652,7 +672,11 @@ input.ng-invalid-minimum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-maximum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-maximum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-maximum + span.raml-console-field-validation-error::after {
   content: 'Invalid maximum';
   color: white;
   position: absolute;
@@ -663,7 +687,11 @@ input.ng-invalid-maximum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-type + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-type {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-type + span.raml-console-field-validation-error::after {
   content: 'Invalid type';
   color: white;
   position: absolute;
@@ -674,7 +702,11 @@ input.ng-invalid-type + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-pattern + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-pattern {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-pattern + span.raml-console-field-validation-error::after {
   content: 'Invalid pattern';
   color: white;
   position: absolute;
@@ -685,7 +717,11 @@ input.ng-invalid-pattern + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-repeat + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-repeat {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-repeat + span.raml-console-field-validation-error::after {
   content: 'Invalid repeat';
   color: white;
   position: absolute;

diff --git a/src/app/directives/sidebar.js b/src/app/directives/sidebar.js
@@ -158,6 +158,11 @@
 
           keys.forEach(function (fieldName) {
             var value = angular.copy(form.form[fieldName].$viewValue);
+
+            value = value || '';
+
+            console.log(value);
+
             form.form[fieldName].$setViewValue(value);
           });
 

diff --git a/src/assets/styles/error.css b/src/assets/styles/error.css
@@ -1,8 +1,12 @@
-input.ng-invalid {
+/*input.ng-dirty.ng-invalid {
+  border: 1px solid red;
+}*/
+
+input.ng-dirty.ng-invalid-required {
   border: 1px solid red;
 }
 
-input.ng-invalid-required + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-required + span.raml-console-field-validation-error::after {
   content: 'Required';
   color: white;
   position: absolute;
@@ -13,6 +17,10 @@ input.ng-invalid-required + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
+input.ng-dirty.ng-invalid-min-length {
+  border: 1px solid red;
+}
+
 input.ng-invalid-min-length + span.raml-console-field-validation-error::after {
   content: 'Invalid min length';
   color: white;
@@ -24,7 +32,11 @@ input.ng-invalid-min-length + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-max-length + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-max-length {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-max-length + span.raml-console-field-validation-error::after {
   content: 'Invalid max length';
   color: white;
   position: absolute;
@@ -35,7 +47,11 @@ input.ng-invalid-max-length + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-enum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-enum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-enum + span.raml-console-field-validation-error::after {
   content: 'Invalid enum value';
   color: white;
   position: absolute;
@@ -46,7 +62,11 @@ input.ng-invalid-enum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-minimum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-minimum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-minimum + span.raml-console-field-validation-error::after {
   content: 'Invalid minimum';
   color: white;
   position: absolute;
@@ -57,7 +77,11 @@ input.ng-invalid-minimum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-maximum + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-maximum {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-maximum + span.raml-console-field-validation-error::after {
   content: 'Invalid maximum';
   color: white;
   position: absolute;
@@ -68,7 +92,11 @@ input.ng-invalid-maximum + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-type + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-type {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-type + span.raml-console-field-validation-error::after {
   content: 'Invalid type';
   color: white;
   position: absolute;
@@ -79,7 +107,11 @@ input.ng-invalid-type + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-pattern + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-pattern {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-pattern + span.raml-console-field-validation-error::after {
   content: 'Invalid pattern';
   color: white;
   position: absolute;
@@ -90,7 +122,11 @@ input.ng-invalid-pattern + span.raml-console-field-validation-error::after {
   text-align: center;
 }
 
-input.ng-invalid-repeat + span.raml-console-field-validation-error::after {
+input.ng-dirty.ng-invalid-repeat {
+  border: 1px solid red;
+}
+
+input.ng-dirty.ng-invalid-repeat + span.raml-console-field-validation-error::after {
   content: 'Invalid repeat';
   color: white;
   position: absolute;