简体   繁体   中英

AngularJS ng-pattern function with regEx and date on year input field

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM