数据选择器eonasdan-bootstrap-datetimepicker在验证后将ng-model的值更改为null

时间:2018-08-30 11:47:38

标签: javascript angularjs angularjs-directive

我两个指令中都有两个数据传递者(overlap-activity-async-validator),并且都发送参数(end-date =“ $ ctrl.model.endDate”和start-date =“ $ ctrl) .model.startDate“)转到此指令。如果其中之一获得验证,并且如果我更改其他数据发布者的日期,则此经过验证的数据选择器上的日期更改为null。为什么将此值更改为null,我可以对此做些什么?

 <form-group label="{{ 'common.startDate' | translate }}" is-required="true">
            <div class="input-group date-picker" style="margin-bottom:5px"
                 ng-class="{'invalid': form.startDate.$invalid && form.startDate.$touched}">
                <input class="form-control form-input" name="startDate"
                       datetimepicker options="dateTimeWithSecondsField"
                       ng-model="$ctrl.model.startDate"
                       ng-change="revalidateEndDate(); $ctrl.getShifts($ctrl.model.startDate)"
                       start-date="$ctrl.model.startDate" end-date="$ctrl.model.endDate" is-end-date="false"

                       overlap-activity-async-validator activity-id="$ctrl.model.id" worker-id="$ctrl.model.workerId"
                       revalidate-on="event:startDate-revalidate"
                       ng-required="true"
                       ng-disabled="!$ctrl.model.workerId"  />
                <span class="input-group-addon">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </span>
            </div>

            <div ng-messages="form.startDate.$error" ng-if="form.startDate.$touched" class="validation-messages">
                <p ng-message="required" translate="common.validation.required"></p>
                <p ng-message="startDateShouldNotBeLaterThanEndDate">startDateShouldNotBeLaterThanEndDate</p>
                <p ng-message="dateTimeRangeLengthValidator">dateTimeRangeLengthValidator</p>
                <p ng-message="overlapActivityAsyncValidator">
                    <span ng-if="form.startDate.overlappingActivityEndDate"
                          translate="activityTimeCorrection.overlappingActivityValidationMessage"
                          translate-values="{ overlappingActivityStartDate: form.startDate.overlappingActivityStartDate, overlappingActivityEndDate: form.startDate.overlappingActivityEndDate}"></span>
                    <span ng-if="!form.startDate.overlappingActivityEndDate"
                          translate="activityTimeCorrection.openedOverlappingActivityValidationMessage"
                          translate-values="{ overlappingActivityStartDate: form.startDate.overlappingActivityStartDate}"></span>
                </p>
            </div>
        </form-group>

        <form-group label="{{ 'common.endDate' | translate }}" is-required="true">
            <div class="input-group date-picker" style="margin-bottom:5px"
                 ng-class="{'invalid': form.endDate.$invalid && form.endDate.$touched}">
                <input class="form-control form-input" name="endDate"
                       datetimepicker options="dateTimeWithSecondsField"
                       ng-model="$ctrl.model.endDate"
                       end-date="$ctrl.model.endDate" start-date="$ctrl.model.startDate" is-end-date="true"
                       overlap-activity-async-validator activity-id="$ctrl.model.id" worker-id="$ctrl.model.workerId"
                       ng-change="revalidateStartDate()"
                       revalidate-on="event:endDate-revalidate"
                       ng-required="true"
                       ng-disabled="!$ctrl.model.workerId"
                       ng-invalid="$ctrl.model.endDate < $ctrl.model.startDate"
                       />
                <span class="input-group-addon">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </span>
            </div>

            <div ng-messages="form.endDate.$error" ng-if="form.endDate.$touched" class="validation-messages">
                <p ng-message="required" translate="common.validation.required"></p>
                <p ng-message="startDateShouldNotBeLaterThanEndDate">startDateShouldNotBeLaterThanEndDate</p>
                <p ng-message="dateTimeRangeLengthValidator">dateTimeRangeLengthValidator</p>
                <p ng-message="overlapActivityAsyncValidator">
                    <span
                          translate="activityTimeCorrection.overlappingActivityValidationMessage"
                          translate-values="{ overlappingActivityStartDate: form.endDate.overlappingActivityStartDate, overlappingActivityEndDate: form.endDate.overlappingActivityEndDate}"></span>

                </p>
            </div>
        </form-group>

指令:

angular
.module('sfcTimeCorrectionProductiveActivity')
.directive('overlapActivityAsyncValidator', ['$http', '$q', 'formattedDateTimeWithSecondsFilter', function ($http, $q, formattedDateTimeWithSecondsFilter) {
    return {
        require: 'ngModel',
        link: function ($scope, $elem, $attr, ctrl) {
            ctrl.$asyncValidators.overlapActivityAsyncValidator = function (value) {

                var date = {}
                var secondDate = {}
                var workerId = $scope.$eval($attr.workerId);

                var endDate = $scope.$eval($attr.endDate);
                var startDate = $scope.$eval($attr.startDate);
                var isEndDate = $scope.$eval($attr.isEndDate);
                var machineWorkerActivityId = $scope.$eval($attr.activityId);

                if (!isEndDate && endDate) {
                    date = startDate = value;
                    secondDate = endDate;
                }
                else if (isEndDate && startDate) {
                    secondDate = endDate = value;
                    date = startDate;
                }
                else if (!isEndDate && !endDate) {
                    date = startDate = value;
                }

                var requestData = {
                    workerId: workerId,
                    date: date,
                    secondDate: secondDate,
                    machineWorkerActivityId: machineWorkerActivityId
                };
                if (requestData.workerId) {
                    return $http.post('/Activities/TimeCorrectionProductiveActivity/GetOverlapActivityInfo', requestData).then(function (response) {

                        var overlappingActivityExists = response.data.overlappingActivityExists;
                        ctrl.overlappingActivityStartDate = formattedDateTimeWithSecondsFilter(response.data.overlappingActivityStartDate);
                        ctrl.overlappingActivityEndDate = response.data.overlappingActivityEndDate ?
                            formattedDateTimeWithSecondsFilter(response.data.overlappingActivityEndDate) : null;
                        if (overlappingActivityExists)
                            return $q.reject()
                        return $q.resolve();
                    })
                }
                else {
                    return $q.resolve();
                };
            }
        },
    };
}])

0 个答案:

没有答案