AngularJS问题：ngModel的$formatters返回undefined

哈，我帮你梳理下这个问题～你遇到的$formatters里的参数是undefined，大概率是因为绑定的ngModel初始值没设置，就是undefined或者null，直接传给过滤器就卡壳了。另外你的指令代码还有几个小细节可以优化，我一步步给你说：

问题出在哪？ #

• 首先要搞清楚：$formatters的回调函数接收到的是控制器里的模型值（modelValue），不是页面上的视图值哦！当你的绑定数据一开始没赋值的时候，这个参数自然就是undefined，如果你的phoneFormatter过滤器没处理这种空值情况，肯定会出问题。
• 你在$parsers里手动给ngModel.$modelValue赋值是多余的，$parsers的返回值会自动变成新的模型值，不用手动改这个属性哈。

修正后的完整指令代码 #

(function () {
  /* @ngInject */
  function MyPhoneDirective($filter) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link(scope, element, attributes, ngModel) {
        // 处理用户输入：把页面上带格式的手机号转成纯数字存到模型里
        ngModel.$parsers.push((viewValue) => {
          // 先判断输入是否为空，避免调用replace报错
          if (!viewValue) return '';
          // 移除所有空格（可以改成移除所有非数字字符，更严谨）
          const purePhoneNumber = viewValue.replace(/\s/g, '');
          return purePhoneNumber;
        });

        // 处理模型数据：把纯数字转成带格式的手机号显示在页面上
        ngModel.$formatters.push((modelValue) => {
          // 先处理空值，给过滤器传一个安全的初始值
          const valueToFormat = modelValue || '';
          // 调用自定义过滤器格式化
          return $filter('phoneFormatter')(valueToFormat);
        });
      }
    };
  }

  // 别忘了把指令注册到你的Angular模块里
  angular.module('yourAppModule').directive('myPhone', MyPhoneDirective);
})();

额外的小建议 #

1. 一定要让你的phoneFormatter过滤器能处理空值，比如这样写：

angular.module('yourAppModule').filter('phoneFormatter', function() {
  return function(input) {
    // 先处理空值或undefined的情况
    if (!input) return '';
    // 先把输入里的非数字都清掉
    const cleanedNumber = input.replace(/\D/g, '');
    // 假设是11位国内手机号，格式化成 xxx xxxx xxxx
    if (cleanedNumber.length === 11) {
      return cleanedNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
    }
    // 如果不是11位，就返回原输入（或者根据需求做其他处理）
    return input;
  };
});

2. 最好在控制器里给绑定的手机号变量设置初始空字符串，比如$scope.userPhone = '';，这样$formatters一开始就能拿到空字符串，而不是undefined，逻辑会更顺畅。

这样调整后，不管初始值是空还是有数据，格式化逻辑都能正常跑起来啦～

内容的提问来源于stack exchange，提问作者Majesty