Problem using ng-change directive with Dashboard Template

#1

Hello everyone, I am new to this forum and to using the dashboard template node. I have a flow where some input texts are populated from a message object that contains some arrays. This is working nice, but I need these input texts to be modified by the user and, as soon as they are modified, the Dashboard template node should issue a msg containing the current data input for the modified field. I am using the ng-change directive with the send(msg.payload) function. The problem is that the whole view of the template is erased as soon as the on blur event takes place.

Could you help me with that? I need your advice!

Here´s the flow:

[{"id":"b826660b.aa2018","type":"function","z":"2ffccd1d.ea6ffa","name":"Completa Template Radio","func":"if(msg.topic!=="Borrar"){\nvar long=Object.keys(msg.payload).length;\nvar Radio_Defaults=msg.payload.slice(2, long + 1);\n}\n\nelse{Radio_Defaults=[];}\n\nvar Radio_Parameters=["Freq","Spread","BW","CR","PrLen","Pwr","Wdt"];\nvar Radio_Errors=["Error 1!","Error 2!","Error 3!","Error 4!","Error 5!","Error 6!","Error 7!"];\nvar Radio_Labels=["Frecuencia Central","Spread Factor","Ancho de Banda","Tasa de Codificación","Longitud de Preámbulo","Potencia del Transmisor","Timeout de Recepción"];\n\n\n\ndata={};\n\ndata.payload=[\n \n {"Legend":"Parámetros de Radio",\n "Labels":Radio_Labels,\n "Parameters":Radio_Parameters,\n "Defaults":Radio_Defaults,\n "Errors":Radio_Errors}\n ];\n \nreturn data;\n","outputs":1,"noerr":0,"x":730,"y":220,"wires":[["15ac5f4f.5b8bf1"]]},{"id":"15ac5f4f.5b8bf1","type":"ui_template","z":"2ffccd1d.ea6ffa","group":"efd9b1d6.4939e","name":"Radio Params Setup","order":0,"width":"5","height":"9","format":"

\n<form name="Radio_Params_Form">\n <div ng-repeat="x in msg.payload">\n <md-input-container ng-repeat="y in msg.payload[$index].Parameters track by $index">\n {{msg.payload[$parent.$index].Labels[$index]}}\n <input style='font-size: 12pt; color: white; text-align: left;' name="msg.payload[$parent.$index].Parameters[$index]" ng-model="msg.payload[$parent.$index].Parameters[$index]" ng-model-options="{updateOn: 'change blur'}" ng-change="send(msg.payload[$parent.$index].Parameters[$index])" required ng-init="msg.payload[$parent.$index].Parameters[$index]=msg.payload[$parent.$index].Defaults[$index]">\n <div ng-messages="Comms_Form.msg.payload[$parent.$index].Parameters[$index].$error">\n <div ng-message="required">{{msg.payload[$parent.$index].Errors[$index]}}\n \n \n \n \n\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":1020,"y":220,"wires":[["5d80ac4e.7f137c"]]},{"id":"efd9b1d6.4939e","type":"ui_group","z":"","name":"Parámetros de Radio","tab":"28c5a3c8.4bb0bc","order":3,"disp":true,"width":"5","collapse":true},{"id":"28c5a3c8.4bb0bc","type":"ui_tab","z":"","name":"LoRa Configuración","icon":"dashboard"}]

0 Likes

#2

i cant improt your exemple. Have you find a solution .? actually, i'am trying to do the same thing.
And thank you.

0 Likes

#3

@Yago_1979 - Please read this, and edit your post above, so that it displays correctly.

0 Likes

#4

Hi!
Here's a simplified example on how to do that (since we can't import the OP's flow:

[{"id":"8604eca4.50ab1","type":"debug","z":"95993933.d7c978","name":"","active":true,"console":"false","complete":"false","x":690,"y":160,"wires":[]},{"id":"4e1358da.7b5908","type":"inject","z":"95993933.d7c978","name":"","topic":"Topic","payload":"payload","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":240,"y":160,"wires":[["948681fd.6f702"]]},{"id":"948681fd.6f702","type":"ui_template","z":"95993933.d7c978","group":"91686f0a.99283","name":"user input","order":3,"width":"0","height":"0","format":"<md-input-container  style=\"overflow:hidden;margin: 0px;\">\n    <span><label>User Input </label>\n    <input ng-model=\"msg.payload\"  type=\"search\"  ng-change=\"send(msg)\"></span>\n</md-input-container>\n    ","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":480,"y":160,"wires":[["8604eca4.50ab1"]]},{"id":"91686f0a.99283","type":"ui_group","z":0,"name":"Text input","tab":"e3a9c600.825af8","order":1,"disp":true,"width":"6"},{"id":"e3a9c600.825af8","type":"ui_tab","z":0,"name":"Angular UI templates","icon":"dashboard"}]
0 Likes