1

I am a newbie to Angular js and I just started doing a project in Angular JS. Let me give you a brief idea about my application. I have a json data which contains data of some nodes, which form a hierarchy. I am using to display this data. So It will take one node at a time and display based on the data in it. I need to display a select field based on the data.

Everything worked fine until I need to display error messages, if the user doesn't select a value in the field. It should be displayed on that particular node. For this I should identify each node( as this is a template). I mapped the id in the data as the name of the select tag, made the tag as required and written a span which displays an error message.

This span will be displayed based on the condition

$error.required

.

The code snippet is as follows.

<form class='css-form form-search' name="myForm" novalidate>
......
<script type="text/ng-template" id="mynodetemplate">
........
<select name="{{node.id}}" ng-model="node.attributeId" ng-options="attribute.id as attribute.name for attribute in attributes" ng-show ="node.showData" required>
       <option value="">Select an Attribute</option>
</select>
<span ng-show=”myForm.node.id.$error.required" style="text-align:center; color:red">Please select</span>

'''''''
</script>
..........
<div ui-tree id="tree-root">
      <ol ui-tree-nodes ng-model="nodes">
            <li ng-repeat="node in nodes” ui-tree-node ng-include="mynodetemplate”></li>
       </ol>
</div>

..........

But I am not able to give the correct expression here- ng-show=”myForm.node.id.$error.required"

I have tried so many ways to evaluate the correct expression, but its not working.

Any help appreciated.

Thanks in advance.

dasrohith
  • 533
  • 2
  • 8
  • 21

2 Answers2

0

Just as in JavaScript, if you want the name of an object attribute to be node.id, you can't just write 

object.node.id

because that references the attribute id of the attribute nodeof the object. So you're forced to use

object['node.id']

So your expression should be

ng-show="myForm['node.id'].$error.required"

But I agree with charlieftl in the comments. You're making your own life difficult by choosing a name containing a dot. Just rename it nodeId, and you can use

ng-show="myForm.nodeId.$error.required"

EDIT:

The name is now in fact a dynamic name. So, in JavaScript you would use

object[node.id]

In the expression, since the scope is implicit, you would use

ng-show="myForm[node.id].$error.required"
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • Thanks for the answer. But actually node.id is not a static name JB. I was trying to give the value inside the node.id. I have made correction in the code snippet. Now the name ="{{node.id}}" – dasrohith May 08 '15 at 06:13
  • @dasrohith it should work. Provide a plunkr reproducing the problem. – JB Nizet May 08 '15 at 06:43
  • I am sorry, ours is a isolated environment. Its very difficult to reproduce the snippet in plunker. I am sorry for that. Thanks a lot for your help – dasrohith Jun 15 '15 at 10:02
0

I have used the solution posted here

What I have done is that , I will just check whether value exists in the modal or not, or its length.

A sample snippet from the answer is as follows

<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>

Thanks @Supr for the answer.

I dont know why the form validation is not working though :(

Community
  • 1
  • 1
dasrohith
  • 533
  • 2
  • 8
  • 21