ngMessages和嵌套范围 - 选项卡上的ngForm中的Datepicker

时间:2016-08-26 06:40:41

标签: angular-ui-bootstrap ng-messages

OP更新

我已经找到了问题,这个问题现已关闭。有一天会喜欢在这里找到发布解决方案的时间。

我在Angular Bootstrap选项卡上的ng-form中使用ngMessages时遇到了一些问题。更复杂的是,我正在验证的是Angular Bootstrap datepicker。所以代码如下,正如你所看到的,我在一个选项卡上的ng-form上有一个日期选择器。

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

我已使用以下行将该表单分配给作用域:

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

我已成功设置控件以触及提交,这会使边框变为红色:

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.
        });
    });
}

但是不显示所需的ng-message。

任何想法为什么?可能是一个很难的嵌套范围等(选项卡和选择器)。

0 个答案:

没有答案