diff --git a/dist/scripts/api-console.js b/dist/scripts/api-console.js index 7a56102f9..634f32555 100644 --- 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 index 5d0b52dd0..bd1678955 100644 --- 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 index 530407c17..23a94d1f8 100644 --- 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 index 74abdd001..86d14f4ec 100644 --- 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 index b7c3c10ed..6b6472f53 100644 --- 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;