ngMessages and Nested Scopes - Datepicker in an ngForm on a Tab

Question

OP Update

I've figured out the problem and this issue is now closed. Would one day like to find the time to post the solution as an answer here.

I'm having a bit of an issue working with ngMessages inside an ng-form on an Angular Bootstrap tab. Further complicating things, the thing I am validating is a Angular Bootstrap datepicker. So the code is as follows, and as you can see, I've got a datepicker on an ng-form which is on a Tab.

<uib-tab index="5" heading="{{tabs[5].title}}" select="changeCheck($event)">
    <ng-form name="{{tabs[5].form}}">
        <div class="col-md-9">
        ...     
            <div class="col-md-6">
                <h4>Add Followup</h4>
                <div class="form-group">
                    <label for="addFollowupDate" class="control-label">Date:</label>                    
                    <div class="input-group">
                        <input type="text" id="addFollowupDate"
                               class="form-control"
                               uib-datepicker-popup="{{format}}"
                               ng-required="true"
                               ng-model="newFollowup.date"
                               is-open="addFollowupPopup.opened"
                               datepicker-options="dateOptions"
                               close-text="Close"
                               alt-input-formats="altInputFormats" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="openAddFollowupPopup()"><i class="fa fa-calendar"></i></button>
                        </span>
                        <div class="help-block" ng-messages="followupsForm.newFollowup.date.$error" ng-if="followupsForm.newFollowup.date.$invalid && followupsForm.newFollowup.date.$touched">
                            <div ng-message="required">This field is required</div>
                        </div>
                    </div>
                </div>

I've assigned that form to the scope using the following line:

$scope.followupsForm = $('ng-form[name="followupsForm"]').data('$formController');

And I have successfully set the control to touched on a submit which does make the border go red:

if ($scope.followupsForm.$invalid) {

    angular.forEach($scope.followupsForm.$error, function (formErrorField) {
        angular.forEach(formErrorField, function (errorField) {
            errorField.$setTouched(); // by setting to touched, the relevant message will display if the field is invalid.
        });
    });
}

But the ng-message for required does not display.

Any ideas why? Could be a tough one with nested scopes etc. (of the tab and the picker).

ngMessages and Nested Scopes - Datepicker in an ngForm on a Tab

0 Answers0