带有ngModel的Angularjs指令

Question

I've got a javascript function that we use in a legacy system that alters the format of an input field as you type;

function checkValidDate(dateStr) {
    if (dateStr && dateStr != '') {
        dateStr = dateStr.replace('/', '');
        dateStr = dateStr.replace('/', '');
        var d_f_m = dateStr;
        var d_f_d = dateStr;
        var d_f_y = dateStr;
        var err_msg = '';
        var d_s_day = d_f_d.slice(0, 2);
        d_s_day = d_s_day + "/";
        var d_s_month = d_f_m.slice(2, 4);
        d_s_month = d_s_month + "/";
        var d_s_year = d_f_y.slice(4, 8);
        //Now we check the year to see if it is only 2 digis, if is, add 2 more
        if (d_s_year.length == 2) {
            d_s_year = '19' + d_s_year;
        }
        return d_s_day + d_s_month + d_s_year;
    } else {
        return null;
    }
}

I've been trying to convert this function to an angularjs directive using ngModel but I just can't seem to sort it out. Would anyone know how to convert this to an angular directive?

Many thanks!

Answer 1

There are a billion ways to do what you want. Here is a quick solution I threw together to get your started:

JS:

var app = angular.module('myApp', []);

app.directive('dateValidator', function() {
  return function(scope, element, attrs) {
    // Watch for changes to the date model
    scope.$watch('date', function(newVal, oldVal) {      
      if (!angular.equals(newVal, oldVal)) {
        var formattedDate = checkValidDate(newVal);
        if (formattedDate) {
          element.text(formattedDate);
        }
      }
    });
  });
});

HTML:

<input type="text" date-validator date="myDate" ng-model="myDate" />

Answer 2

I recommend that you write a custom angular validator. There are some good articles on it. Here is one that I like:

Form Validation with AngularJS

The form and its containing fields have special properties appended to them that you can leverage for binding expressions and client-side validation:

$pristine, $dirty, $valid, $error

Answer 3

Not sure if you wanted it validated as you type or after you leave a field. Either can work, though the below is implemented to validate after you leave the field (lose focus).

The existing algorithm was used, though it looks like it handles only very specific cases (ie 2 digit day, 2 digit month, 2-4 digit year) and could be improved. For the moment, it was copied as is. JSFiddle is here http://jsfiddle.net/pSh4R/18/

HTML:

<div ng-app='app'>
    Please enter a date
    <br/>
    <input type='text' dateformat ng-model='myDate'></input>
    (Hit TAB when done)
    <hr/>
    Model Value : {{myDate}}
</div>

Directive Declaration:

var app = angular.module('app',[]);

app.directive('dateformat', function(){
    return {
        restrict : 'A',
        scope : {
            dateStr : '=ngModel'
        },
        link : function(scope, element){

            element.bind('focusout', function (){                 
                scope.$apply(function(){
                    scope.dateStr = checkValidDate(scope.dateStr);
                });
            });

            function checkValidDate(dateStr) {
                if (dateStr && dateStr != '') {
                    dateStr = dateStr.replace('/', '');
                    dateStr = dateStr.replace('/', '');
                    var d_f_m = dateStr;
                    var d_f_d = dateStr;
                    var d_f_y = dateStr;
                    var err_msg = '';
                    var d_s_day = d_f_d.slice(0, 2);
                    d_s_day = d_s_day + "/";
                    var d_s_month = d_f_m.slice(2, 4);
                    d_s_month = d_s_month + "/";
                    var d_s_year = d_f_y.slice(4, 8);
                    //Now we check the year to see if it is only 2 digis, if is, add 2 more
                    if (d_s_year.length == 2) {
                        d_s_year = '19' + d_s_year;
                    }
                    return d_s_day + d_s_month + d_s_year;
                } else {
                    return null;
                }
            }   
        }
    };
})