htt-form transformer-validation fix

ui/src/app/extension/extensions-forms/extension-form-http.directive.js

@@ -48,7 +48,9 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
                 enableBasicAutocompletion: true,
                 enableLiveAutocompletion: true
             },
-            onLoad: aceOnLoad
+            onLoad: function(_ace) {
+                _ace.$blockScrolling = 1;
+            }
         };
 
         if(scope.isAdd) {
@@ -120,24 +122,17 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
             attribute.transformer = "";
         }
 
-        function aceOnLoad(_ace) {
-            _ace.$blockScrolling = 1;
-            _ace.on("change", function(){
-                var aceValue = _ace.getSession().getDocument().getValue();
-                var valid = true;
-                if(!aceValue && !aceValue.length) {
-                    valid = false;
-                } else {
-                    try {
-                        angular.fromJson(aceValue);
-                    } catch(e) {
-                        valid = false;
-                    }
+        scope.validateTransformer = function (model, editorName) {
+            if(model && model.length) {
+                try {
+                    angular.fromJson(model);
+                    scope.theForm[editorName].$setValidity('transformerJSON', true);
+                } catch(e) {
+                    scope.theForm[editorName].$setValidity('transformerJSON', false);
                 }
-                scope.theForm.$setValidity('transformerRequired', valid);
-            });
+            }
         }
-
+        
         $compile(element.contents())(scope);
     }
 

ui/src/app/extension/extensions-forms/extension-form-http.tpl.html

@@ -152,11 +152,14 @@
                                                                                                                 <div flex class="tb-extension-custom-transformer"
                                                                                                                      ui-ace="extensionCustomTransformerOptions"
                                                                                                                      ng-model="attribute.transformer"
-                                                                                                                     name="test_{{$index}}">
+                                                                                                                     name="attributeCustomTransformer_{{configIndex}}{{converterIndex}}{{attributeIndex}}"
+                                                                                                                     ng-change='validateTransformer(attribute.transformer,"attributeCustomTransformer_" + configIndex + converterIndex + attributeIndex)'
+                                                                                                                     required>
                                                                                                                 </div>
                                                                                                             </div>
-                                                                                                            <div class="tb-error-messages" ng-messages="theForm['test_' + $index].$error" role="alert">
-                                                                                                                <div ng-message="transformerRequired" class="tb-error-message">Ну привет :)</div>
+                                                                                                            <div class="tb-error-messages" ng-messages="theForm['attributeCustomTransformer_' + configIndex + converterIndex + attributeIndex].$error" role="alert">
+                                                                                                                <div ng-message="required" class="tb-error-message" translate>extension.json-required</div>
+                                                                                                                <div ng-message="transformerJSON" class="tb-error-message" translate>extension.json-parse</div>
                                                                                                             </div>
                                                                                                         </div>
 
@@ -243,9 +246,16 @@
                                                                                                             <div flex class="tb-extension-custom-transformer-panel">
                                                                                                                 <div flex class="tb-extension-custom-transformer"
                                                                                                                      ui-ace="extensionCustomTransformerOptions"
-                                                                                                                     ng-model="timeseries.transformer">
+                                                                                                                     ng-model="timeseries.transformer"
+                                                                                                                     name="timeseriesCustomTransformer_{{configIndex}}{{converterIndex}}{{timeseriesIndex}}"
+                                                                                                                     ng-change='validateTransformer(timeseries.transformer,"timeseriesCustomTransformer_" + configIndex + converterIndex + timeseriesIndex)'
+                                                                                                                     required>
                                                                                                                 </div>
                                                                                                             </div>
+                                                                                                            <div class="tb-error-messages" ng-messages="theForm['timeseriesCustomTransformer_' + configIndex + converterIndex + timeseriesIndex].$error" role="alert">
+                                                                                                                <div ng-message="required" class="tb-error-message" translate>extension.json-required</div>
+                                                                                                                <div ng-message="transformerJSON" class="tb-error-message" translate>extension.json-parse</div>
+                                                                                                            </div>
                                                                                                         </div>
 
 

ui/src/app/locale/locale.constant.js

@@ -769,6 +769,8 @@ export default angular.module('thingsboard.locale', [])
                     "custom": "Custom",
                     "to-double": "To Double",
                     "transformer": "Transformer",
+                    "json-required": "Transformer json is required.",
+                    "json-parse": "Unable to parse transformer json.",
                     "attributes": "Attributes",
                     "add-attribute": "Add attribute",
                     "timeseries": "Timeseries",