ngif markup error while displaying ngMessages error in 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>

score 0 · Answer 1 · answered Oct 28 '15 at 14:25

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

ngif markup error while displaying ngMessages error in angularjs

1 Answers1