AngularJs - 修改输入格式的指令

AngularJs - Directive to modify input formatting

本文关键字：指令 格式 输入 修改 AngularJs      更新时间：2023-09-26

我想执行以下操作：

我的控制器模型中有一个日期对象，我想让用户修改它。应为用户提供两个输入字段。第一个输入字段应修改日期，另一个输入字段应修改时间。两个输入字段应适用于同一日期模型。

<input ng-model="model.date" date-format="YYYY-MM-DD">
<input ng-model="model.date" date-format="HH:mm:SS">

我没有找到关于这种装订的文献。通常，ng-model 指令负责输入字段的值。现在我想用我自己的格式覆盖这个值。此外，如果用户更改了输入，则应分析更改并将其放回日期对象中。

由于 vanilla js 中的日期操作有点奇怪，我使用 moment.js 来格式化和解析日期和字符串。

我目前的方法如下所示：

app.directive('dateFormat', function() {
    return {
        restrict: 'A',
        link: function(scope, el, at) {
            var format = at.dateFormat;
            scope.$watch(at.ngModel, function(date) {
                var result = moment(date).format(format);
                el.val(result);
            });
        }
    };
});

但是，一旦我想在浏览器中更改输入值，这将中断。我得到一些NaN：NaN...

我的问题是：

  • 如何对此进行建模？
  • 这种方法对角度哲学有效还是我在这里做了一些奇怪的事情？
  • 我可以同时使用 ng 模型和日期格式指令吗？
  • 有没有更简单的方法可以做到这一点？

过滤器是您要查找的：

//In your controller
$scope.modelDate = $filter('date')(dateToFormat, "YYYY-MM-DD");
//In your view
<input ng-model="modelDate" type="text">

话虽如此，您尝试执行的操作并不太"关闭"，因为每当用户写入输入时，格式都会中断。您需要使用 ngModel，它具有使用指令（API）的特殊方式，并且可以作为链接过程中的第四个参数直接浏览。

因此，对于您的代码，它将是这样的：

return {
  require: 'ngModel',
  link: function(scope, element, attrs, ngModelController) {
    ngModelController.$parsers.push(function(data) {
      //View -> Model
      return data;
    });
    ngModelController.$formatters.push(function(data) {
      //Model -> View
      return $filter('date')(data, "YYYY-MM-DD");
    });
  }
}

更多信息在这里

我遇到了同样的问题，经过一些研究和测试，我想出了以下解决方案。 它不会在每次击键时对"模糊"执行所需的格式化和验证。查看注释标签以获取有关每个步骤的信息。您将需要时刻.js来执行日期验证。

myApp.directive('validDate', function ($filter, $window, $parse, $timeout) {
return {
    require: '?ngModel',
    restrict: 'A',
    compile: function () {
        var moment = $window.moment;
        var getter, setter;
        return function (scope, element, attrs, ngModel) {
            //Declaring the getter and setter
            getter = $parse(attrs.ngModel);
            setter = getter.assign;
            //Set the initial value to the View and the Model
            ngModel.$formatters.unshift(function (modelValue) {
                if (!modelValue) return "";
                var retVal = $filter('date')(modelValue, "MM/dd/yyyy");
                setter(scope, retVal);
                console.log('Set initial View/Model value from: ' + modelValue + ' to ' + retVal);
                return retVal;
            });
            // If the ngModel directive is used, then set the initial value and keep it in sync
            if (ngModel) {
                element.on('blur', function (event) {
                    var date = moment($filter('date')(element.val(), "MM/dd/yyyy"));
                    // if the date entered is a valid date then save the value
                    if (date && moment(element.val(), "MM/DD/YYYY").isValid() && date <= moment() && date >= moment("01/01/1900")) {
                        element.css('background', 'white');
                        element[0].value = $filter('date')(date.toDate(), "MM/dd/yyyy");
                        console.log('change value to ' + element.val());
                        var newValue = element.val();
                        scope.$apply(function () {
                            setter(scope, newValue);
                        });
                    } else { //show an error and clear the value
                        console.log('INCORRECT VALUE ENTERED');
                        element.css('background', 'pink');
                        element[0].value = "";
                        scope.$apply(function () {
                            setter(scope, '');
                        });
                    }
                });
             }
         };
      }
  }; });

该指令可以在视图中使用，如下所示：

<input type="text" ng-model="member.BirthDate" required valid-date />
相关文章：