ngModel date validation possible?
Closed this issue · 2 comments
Hi,
Is there any way to add date validation?
When I change dropdown day, month, year. following ng-combo-date-picker ng-valid or ng-pristine doesn't get changed!.
<ng-combo-date-picker ng-model="basic" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
I've added the following block for validating date entered. is this the right way to do so?
link: function (scope, element, attrs, ctrl) {
// Initialize variables.
var jqLite = angular.element;
var children = jqLite(element[0]).children();
var order = scope.ngOrder.split('');
// Add attributes.
if (scope.ngAttrsDate != null) jqLite(children[0]).attr(scope.ngAttrsDate);
if (scope.ngAttrsMonth != null) jqLite(children[1]).attr(scope.ngAttrsMonth);
if (scope.ngAttrsYear != null) jqLite(children[2]).attr(scope.ngAttrsYear);
// Reorder elements.
for (var i = 0; i < order.length; i++) {
if (order[i] == 'd') jqLite(element[0]).append(children[0]);
if (order[i] == 'm') jqLite(element[0]).append(children[1]);
if (order[i] == 'y') jqLite(element[0]).append(children[2]);
}
ctrl.$setValidity('incompleteDateOfBirth', true);
function validateDay() {
var valid = !(scope.date == null) && (scope.month > 0 || scope.year > 0);
ctrl.$setValidity('incompleteDateOfBirth', valid);
};
function validateMonth() {
var valid = !(scope.month == null) && (scope.date > 0 || scope.year > 0);
ctrl.$setValidity('incompleteDateOfBirth', valid);
};
function validateYear() {
var valid = !(scope.year == null) && (scope.date > 0 || scope.month > 0);
ctrl.$setValidity('incompleteDateOfBirth', valid);
};
scope.$watch('date', validateDay);
scope.$watch('month', validateMonth);
scope.$watch('year', validateYear);
Thank you very much
Hi sujithtomy,
Unfortunately, the directive is not as form friendly as I would like to (although it's a good suggestion), so the CSS classes ng-*
are not updated in the directive, they are only updated in their inner <select>
elements.
I have, however, just made a new release (v1.2.5) that will allow you to get access to the properties $valid
and $pristine
of each <select>
element: you just need to define the attribute name
for each combo box, by using the attributes the attributes ng-attrs-date
, ng-attrs-month
and ng-attrs-year
.
<style>
select.ng-pristine { color: red; }
select.ng-dirty { color: green; }
</style>
<form name="myForm" novalidate>
<ng-combo-date-picker ng-model="someDate" ng-attrs-date='{"name": "myDate", "required": true}' ng-attrs-month='{"name": "myMonth", "required": true}' ng-attrs-year='{"name": "myYear", "required": true}'></ng-combo-date-picker>
<p>Form is valid: <strong>{{ myForm.$invalid? 'No' : 'Yes' }}</strong></p>
<table>
<tr>
<th>Field</th>
<th>Pristine</th>
<th>Dirty</th>
</tr>
<tr>
<td>Date</td>
<td>{{ myForm.myDate.$pristine? 'Yes' : 'No' }}</td>
<td>{{ myForm.myDate.$dirty? 'Yes' : 'No' }}</td>
</tr>
<tr>
<td>Month</td>
<td>{{ myForm.myMonth.$pristine? 'Yes' : 'No' }}</td>
<td>{{ myForm.myMonth.$dirty? 'Yes' : 'No' }}</td>
</tr>
<tr>
<td>Year</td>
<td>{{ myForm.myYear.$pristine? 'Yes' : 'No' }}</td>
<td>{{ myForm.myYear.$dirty? 'Yes' : 'No' }}</td>
</tr>
</table>
</form>
Hi sujithtomy,
I have released a new version of the library (v1.3.0) which implements date validation.
Just add the attribute ngRequired
(set to true
) and the classes ng-dirty
, ng-pristine
, ng-valid
and ng-invalid
will be correctly updated.