Question

我有一个javascript函数，我们在遗留系统中使用，在您键入时改变输入字段的格式;

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;
    }
}

我一直在尝试使用ngModel将此函数转换为angularjs指令，但我似乎无法对其进行排序。有谁知道如何将其转换为角度指令？

非常感谢！

Answer 1

有十亿种方法可以做你想做的事。这是一个快速的解决方案，我把它放在一起让你开始：

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

我建议您编写自定义角度验证器。有一些很好的文章。这是我喜欢的一个：

Form Validation with AngularJS

表单及其包含字段附加了特殊属性，您可以利用这些属性进行绑定表达式和客户端验证：

$ pristine，$ dirty，$ valid，$ error

Answer 3

不确定您是否希望在键入时或离开字段后对其进行验证。两者都可以工作，但下面的实现是在您离开现场后失效（失去焦点）。

使用现有的算法，虽然它看起来只处理非常特殊的情况（即2位数日，2位数月，2-4位数年）并且可以改进。目前，它按原样复制。 JSFiddle在这里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>

指令声明：

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;
                }
            }   
        }
    };
})

使用ngModel的Angularjs指令

3 个答案: