ngif markup error while displaying ngMessages error in angularjs - angularjs

Question

i am using ngMessages to validate a form , which is dynamically generated using ngRepeat.ngMessages is working fine but i want to display validation error messages only submit button is clicked.I am using ng-if for checking
submit button clicked and current form field is invalid . but i am getting angular compiler error , i think it is something to do with constructing the control name dynamically.
can any one suggest what is wrong with following markup.
<div ng-repeat="item in Data" class="container-fluid">
<ng-form name="fm">
<div class="row">
<div class="col-md-10">
<h2>{{ item.headerName}}</h2>
</div>
</div>
<div class="row" ng-repeat="it in item.items">
<div class="col-md-8">
<div class="form-group">
<label for="''{{ it.name}}''" class="col-xs-4 control-label"> {{ it.name}}</label>
<div class="col-xs-2">
<select name='{{"yOrNo" + $parent.$index + $index}}'
id='{{"yOrNo" + $parent.$index + $index}}'
class="form-control"
data-ng-disabled="false"
ng-model="it.yesorNo"
ng-options="yno.id as yno.value for yno in lookups.yno"
ng-required="true"></select>
<div class="messages" ng-messages="fm.yOrNo{{$parent.$index}}{{$index}}.$error" ng-if="fm.yOrNo{{$parent.$index}}{{$index}}.$error && submitClicked" >
<div class="error-message" ng-message="required">* required.</div>
</div>
</div>
</div>
</div>
</div>
</ng-form>
</div>

Answer 1

Your ng-form needs a unique name per iteration, so instead of:
<ng-form name="fm"> try something like:
<ng-form name="fm{{$index}}">
note that all references to that name=fm{{$index}} will now needs to be adjusted accordingly, E.G: this: fm.yOrNo{{$parent.$index}}{{$index}}.$error will need to become this: fm{{$parent.$index}}.yOrNo{{$parent.$index}}{{$index}}.$error