Luis Becerril Luis Becerril - 6 months ago 19
AngularJS Question

ng messages inside repeater not appearing

I have created a directive that what does is to basically displays blank inputs to fill in an array of objects. The objects have multiple properties, but here I am only filling the projectname property.

<div ng-repeat="projectStatus in projectStatusList track by $index">
<md-input-container>
<label>Project Name {{$index +1}}</label>
<input ng-model="projectStatusList[$index].projectName" name="projectName_{{$index+1}}" ng-required="isRowRequired($index)">
<div ng-messages="parentForm['projectName_{{$index+1}}'].$error">
<div ng-message="required">The project name is required</div>
</div>
</md-input-container>
</div>


This directive is being called inside a form which is being passed to it as parentForm. I have already checked and the form is being passed correctly to the directive. My suspicion is that the binding in
ng-messages="parentForm['projectName_{{$index+1}}'].$error"
is not happening correctly. Whenever I inspect the generated HTML nothing appears inside the ng messages div.

Also, the required property of the field is set dynamically through
isRowRequired($index)
and this is rendering correctly.
The issue is that the input becomes underlined with a red border when empty and required but the messages just dont appear.

Answer

Try:

<div ng-messages="parentForm['projectName_' + $index + 1].$error">
Comments