Luis Becerril Luis Becerril - 1 year ago 148
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">
<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>

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
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
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 Source


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