Getting error while trying to display validation message using Angular.js

Question

I am getting the following error while trying to display the validation message using Angular.js.

Error:

angularjs.js:107 Error: [$parse:syntax] http://errors.angularjs.org/1.4.6/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=17&p3=billdata.upload_%7B%7BNaNndex%7D%7D.%24touched&p4=%7B%7B%index%7D%7D.%24touched

I am providing my code below:

<div class="input-group bmargindiv1 col-md-12" ng-repeat="mul in mulImage">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
 <div>
<div ng-class="{'myError': billdata.upload_{{$index}}.$touched && billdata.upload_{{$index}}.$invalid }">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="400" ngf-resize="{width: 400, height:400}"  ngf-select="onFileSelect1('upload_{{$index}}',mul.image);">
 <div style="clear:both;"></div>
</div>
 </div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;">
 <input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
                                  
</span>
 <div class="help-block" ng-messages="billdata.upload_{{$index}}.$error" ng-if="billdata.upload_{{$index}}.$touched">
 <p ng-message="maxSize" style="color:#F00;">File is too large.Max size is 2 mb.</p>
 <p ng-message="minHeight" style="color:#F00;">Minimum height should be 400px</p>
 </div>
</div>

Here when I am adding this validation message <div class="help-block" ng-messages="billdata.upload_{{$index}}.$error" ng-if="billdata.upload_{{$index}}.$touched"> it's throwing the above error. How can I resolve this error?

statements in ng-if are treated as javascript, so {{$index}} is not replaced by the index. — ayushgp
– ayushgp, Commented Apr 15, 2016 at 13:22
You can change the ng-if="billdata.upload_{{$index}}.$touched" to ng-if="billdata['upload_'+this.$index].$touched". and same changes to ng-messages. — ayushgp
– ayushgp, Commented Apr 15, 2016 at 13:31
Please post how you did resolve that. If you solved with the help of a comment, state it and give credit to the author. If you solved in different way, write it down. — MarcoS
– MarcoS, Commented Apr 15, 2016 at 13:35

MarcoS · Accepted Answer · 2016-04-15 13:32:47Z

0

Instead of "billdata.upload_{{$index}}.$error, I would use "billdata['upload_' + $index].$error

answered Apr 15, 2016 at 13:32

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ayushgp · Accepted Answer · 2016-04-15 13:41:28Z

0

You can change the ng-if="billdata.upload_{{$index}}.$touched" to ng-if="billdata['upload_'+this.$index].$touched". and same changes to ng-messages

answered Apr 15, 2016 at 13:41

ayushgp

5,12110 gold badges46 silver badges81 bronze badges

Collectives™ on Stack Overflow

Getting error while trying to display validation message using Angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related