在 angularJS 中输入日期时自动插入字符

Question

说我有这个 html:

<input class="input-date" type="text" placeholder="DD.MM.YY" ng-model="hctrl.dateInput">

当用户输入日期时，我想在适当的地方自动插入 .。

我试过用 $watch 解决这个问题，像这样：

.controller('homeController', ['$scope', function($scope){
        var controller = this;
        controller.pageClass = 'page-home'
        controller.dateInput = '';

        $scope.$watch(angular.bind(this, function() {
            return this.dateInput;
        }), function(newVal, oldVal){

            var str = newVal.replace(/[.]/g, "");

            console.log('oldVal: ' + oldVal + ' newVal: ' + newVal + ' str: ' + str);

            if(str.length % 2 == 0 && str.length >= 2 && str.length <= 6) {
                console.log(str.length); 
                controller.dateInput += '.';
            }    
        });

    }])

但这会导致无限循环，因为我在 $watch 中添加了 controller.dateInput。

解决这个问题的正确方法是什么？

Answer 1

如果您不使用 angular-ui，请安装并使用它并在您的输入中输入以下语法：

<input class="input-date" type="text" placeholder="DD.MM.YY" ng-model="hctrl.dateInput" ui-mask="99.99.9999" model-view-value="true">

model-view-value 将保留模型对象上的遮罩。

Answer 2

正如 Wawy 所建议的，您应该使用指令。如果您不想选择具有 Mask 指令的 angular-ui，您可以自己滚动。这里有一些代码可以帮助您入门。

myApp.directive("dateFormat", function() {
            var directive = {};

            directive.restrict = 'A'; // only as attribute
            directive.require = 'ngModel'; // communicate with the parent HTML tags ngModelController
            directive.link = function(scope, element, attrs, ctrl) {
                scope.$watch(function() { return ctrl.$modelValue }, function(newVal, oldVal){
                    console.log("value in my parent is: " + newVal);
                    // logic here, such as if (newVal.endsWith('.'))...
                });
            }
            return directive;
        });

然后在您的 HTML 中： <输入类型="text" ng-模型="my.model" 日期格式>

Answer 3

既然您已经在使用模型，为什么不使用解析器进行自定义验证呢？不需要使用示波器监视。您应该编写一个需要 ngmodel 控制器的指令。然后你可以将一个解析器函数推送到那个控制器，它会做你想做的事。

您可以在此处的文档中阅读有关解析器和格式化程序的更多信息： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

编辑： 我有点不对，甚至不需要 setviewvalue。不过，我建议使用解析器而不是范围监视。

这是一个例子： http://jsfiddle.net/u8unudnr/2/

app.directive('parserFormatterExample', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl){
            ctrl.$parsers.push(function(viewValue){
                // logic goes here
                var newValue = viewValue.replace(/[.]/g, "");
                return newValue;               
            });
        }
    }
});

在 angularJS 中输入日期时自动插入字符

insert character automatically while typing a date in angularJS

javascript

angularjs

angular-ngmodel