使用angularjs验证结束日期是否大于开始日期

时间:2018-01-21 21:20:34

标签: asp.net angularjs asp.net-mvc .net-core

如果结束日期[文本框]大于开始日期[文本框],如何在单击保存按钮时检查/验证angularjs?

    <form name="myform" class="form-horizontal" role="form" novalidate>

                <div class="row form-group  ">
                    <div class="col-md-3 col-md-offset-2  ">
                        <label class="control-label">From</label>
                        <i id="validationMark">*</i>

                        <input type="date" id="startDate" name="From" ng-model="empModel.from" class="form-control" ng-model-options="{timezone: 'utc'}" />
                        <i class="fa fa-calendar"></i>
                    </div>
                    <div class="col-md-3 ">
                        <label class="control-label">To</label>
                        <i id="validationMark">*</i>

                        <input type="date" id="endDate" name="To" ng-model="empModel.to" 
                               class="form-control" ng-model-options="{timezone: 'utc'}"  />
                        <i class="fa fa-calendar"></i>
                        <span>{{errMessage}}</span>
                    </div>

                </div>

     <button type="button" value="Save" ng-disabled="isDisabledsave"  
             ng-click="myform.$valid && saveCustomer() " id="btnsave" 
             class="btn btn-primary next-step">Save</button>
</form>
如果saveCustomer() [文本框]小于endDate [文本框],则

保存按钮不应调用startDate功能

1 个答案:

答案 0 :(得分:0)

如果要添加一些自定义验证逻辑 - 唯一的方法是构建一个指令。在指令中,您可以使用以下内容:

if($scope.ngModel > $scope.maxValue) ctrl.$setValidity("outOfRange", false);

但是如果你只是需要禁止用户在结束日期大于开始日期时触发click事件,那么你可以写下这样的内容:

<button type="button" value="Save" ng-disabled="checkDates()"  
         ng-click="saveCustomer() " id="btnsave" 
         class="btn btn-primary next-step">Save</button>

并比较checkDates();

中的日期

<强>更新

最简单的方法就是添加:

 if($scope.empModel.from > $scope.empModel.to){
    $scope.errMessage="Date is out of range!"
    return;
  }

在saveCustomer()函数的开头。