# Problem using ng-change directive with Dashboard Template

**URL:** <https://discourse.nodered.org/t/problem-using-ng-change-directive-with-dashboard-template/2143>\
**Category:** Dashboard\
**Created:** [7 August 2018 16:53 UTC](https://discourse.nodered.org/t/problem-using-ng-change-directive-with-dashboard-template/2143 "2018-08-07T16:53:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yago\_1979](https://avatars.discourse-cdn.com/v4/letter/y/a183cd/32.png) [@Yago\_1979](https://discourse.nodered.org/u/Yago_1979)\
**Post date:** [7 August 2018 16:53 UTC](https://discourse.nodered.org/t/problem-using-ng-change-directive-with-dashboard-template/2143/1 "2018-08-07T16:53:38Z")

</div>

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"}]

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [15 November 2018 20:38 UTC](https://discourse.nodered.org/t/problem-using-ng-change-directive-with-dashboard-template/2143/2 "2018-11-15T20:38:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [15 November 2018 20:47 UTC](https://discourse.nodered.org/t/problem-using-ng-change-directive-with-dashboard-template/2143/3 "2018-11-15T20:47:51Z")

</div>

@Yago_1979 - Please [read this](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506), and edit your post above, so that it displays correctly.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [15 November 2018 20:53 UTC](https://discourse.nodered.org/t/problem-using-ng-change-directive-with-dashboard-template/2143/4 "2018-11-15T20:53:06Z")

</div>

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

```auto
[{"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"}]

```