Issue
I have input[type='date'] with no further validation rules.
Validation is not fired in the case when only part of a date is entered (say, the day and month). So when you have '01/02/YYYY' it's been taken for empty value and $error.date is not changed, so the validation message is missing.
If you first enter any valid date and then remove its part (say, the year) $error.date is updated and a validation message shows up.
Does anybody have any idea how to fire validation on a partly entered date?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-date-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: ''
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date:</label>
<input type="date" id="exampleInput" name="input" ng-model="example.value" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
Solution
The bug was fixed in the next versions of Angular (upgraded from 1.4.3 to 1.8.2):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-date-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: ''
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date:</label>
<input type="date" id="exampleInput" name="input" ng-model="example.value" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>Answered By - Julia Meshcheryakova
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.