Hala El Barchah Hala El Barchah - 1 month ago 11
AngularJS Question

Angularjs: fire function if datepicker values are invalid

I've assigned min and max values for datepicker https://material.angularjs.org/latest/demo/datepicker and it worked.

However, also, I want to disable submit button if the date values are invalid.

When I tried to use

ng-change
, It failed because the function
onChange()
doesn't fire if the values are invalid, because
myDate
doesn't change in this case.


How can I do that? to fire function if the date values are invalid?

Snippet Added



angular.module("myApp", ["ngMaterial"])
.controller("main", function($scope){

$scope.myDate = new Date();

$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() - 2,
$scope.myDate.getDate());

$scope.maxDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() + 2,
$scope.myDate.getDate());

$scope.InvalidDate = false;
$scope.onChange = function(date){
//this function executes only if the date is valid
console.log(date);
}
})

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.3.7/angular-material.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>

<div ng-app="myApp" ng-controller="main">
<md-datepicker ng-model-options="{allowInvalid : true}"

ng-model="myDate"
md-min-date="minDate"
md-max-date="maxDate"

ng-change="onChange(myDate)">
</md-datepicker>

<md-button ng-disabled="InvalidDate">submit</md-button>
</div>





Any idea will be appreciated.

Thanks in advance.

Answer

See following code. button will be disabled if datepicker contains errors.

angular.module("myApp", ["ngMaterial"])
    .controller("main", function($scope){

      $scope.myDate = new Date();

      $scope.minDate = new Date(
       $scope.myDate.getFullYear(),
       $scope.myDate.getMonth() - 2,
       $scope.myDate.getDate());

      $scope.maxDate = new Date(
       $scope.myDate.getFullYear(),
       $scope.myDate.getMonth() + 2,
       $scope.myDate.getDate());
      
    $scope.InvalidDate = false;
    })
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.3.7/angular-material.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>

<div ng-app="myApp" ng-controller="main">
    <form name="myForm">
      <md-datepicker name="myDateField"
               ng-model="myDate" 
               md-min-date="minDate" 
               md-max-date="maxDate">
      </md-datepicker>
      <md-button ng-disabled="myForm.myDateField.$error.mindate || myForm.myDateField.$error.maxdate">submit</md-button>
      {{ myForm.myDateField.$error | json }}
    </form>
</div>

Comments