I have a request from my client to add a unique form validation rule to a text input that excepts only 4 digits, no characters. The input only should take year format like 2015. The issue is that the client doesn't want the user to enter a year less than the current year and it cannot be more than 10 years past the current year.
So I created a function like this:
$scope.startYearPattern = function() {
var date = new Date();
var year = date.getFullYear();
var regex = /^[0-9]{2}$/;
if(EditProgCtrl.programDetails.academicYear > year && EditProgCtrl.programDetails.academicYear < year + 10 && regex);
};
Then on the html I have:
<div class="col-xs-6 form-horizontal program-edit" data-ng-class="{ 'has-error': programEditForm.academicYear.$invalid && programEditForm.academicYear.$touched }">
<div class="form-group required">
<label for="academicYear" class="col-xs-4 horizontal-left control-label">
Start Year
</label>
<div class="col-xs-6 program-edit">
<input type="text" ng-pattern="startYearPattern()" class="form-control input-sm" max="3000" name="academicYear" id="academicYear" data-ng-model="EditProgCtrl.programDetails.academicYear" title="Please enter a valid year" required="required" />
<div data-ng-if="programEditForm.academicYear.$touched" data-ng-messages="programEditForm.academicYear.$error">
<span class="help-block" data-ng-message="required">required field</span>
<span class="help-block" data-ng-message="pattern">Wrong Year Format</span>
</div>
</div>
</div>
</div>
It doesn't work though so I am missing something, just do not know what is wrong.
ng-pattern normally only accept pattern like ng-pattern="/^[0-9]{4}$/" i thought. I wrote ua validation directive
myModule.directive('academicYearValidation', academicYearValidation );
function academicYearValidation() {
return {
restrict: 'A',
require: 'ngModel',
link: link
}
function link (scope, element, attrs, ngModel) {
function validator(modelValue, viewValue) {
var value = modelValue || viewValue;
var date = new Date();
var year = date.getFullYear();
var regex = /^[0-9]{4}$/;
if(regex.test(value) && value > year && value < year + 10){
return true;
}else{
return false;
}
}
ngModel.$validators.academicyearvalidation = validator;
}
};
(ngModel.$validators is new in angular 1.3 before 1.3 u have to use ngModel.$parsers and ngModel.$formatters)
I made you a plunker http://plnkr.co/edit/jtCqB0zZhelQCXF6iiK6?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.