更新intl-tel-input插件后无法获取输入框值的问题求助

我来帮你梳理下这个问题的核心：新增默认的"No country"选项后，AngularJS的ngModel和intl-tel-input插件的状态没同步上，导致提交时拿不到输入值。下面给你几个实用的解决思路：

思路1：手动同步插件选择事件与ngModel #

当选择"No country"时，插件默认的getNumber()方法可能因为识别不到有效国家而返回空，这时候我们需要手动监听选择事件，直接获取输入框的原始值并同步到Angular模型中。

示例代码：

angular.module('yourApp').controller('PhoneController', function($scope, $element) {
  // 获取输入框DOM元素
  const phoneInput = $element.find('#phone-input')[0];
  
  // 初始化intl-tel-input插件
  const iti = window.intlTelInput(phoneInput, {
    // 保留你的原有配置，比如placeholder、utilsScript等
  });

  // 手动添加"No country"选项到下拉列表
  const noCountryOpt = document.createElement('option');
  noCountryOpt.value = 'no-country';
  noCountryOpt.textContent = 'No country';
  iti._countryList.appendChild(noCountryOpt);
  // 设置默认选中该选项
  iti.setCountry('no-country');

  // 监听国家选择变化事件
  phoneInput.addEventListener('countrychange', function() {
    const selectedCountry = iti.getSelectedCountryData();
    if (selectedCountry.iso2 === 'no-country') {
      // 选择默认项时，直接取输入框原始值
      $scope.phoneNumber = phoneInput.value;
    } else {
      // 正常国家选择时，用插件的格式化号码
      $scope.phoneNumber = iti.getNumber();
    }
    // 手动触发Angular脏检查，更新模型
    $scope.$apply();
  });

  // 表单提交处理
  $scope.submitForm = function() {
    // 再次确认取值逻辑，避免遗漏
    const finalPhone = iti.getSelectedCountryData().iso2 === 'no-country' 
      ? phoneInput.value 
      : iti.getNumber();
    console.log('提交的手机号：', finalPhone);
    // 这里写你的表单提交逻辑
  };
});

对应的HTML绑定：

<input type="tel" id="phone-input" ng-model="phoneNumber">
<button ng-click="submitForm()">提交</button>

思路2：扩展插件的国家数据，让"No country"成为有效选项 #

我们可以给intl-tel-input的全局国家列表中添加一个自定义条目，让插件把"No country"识别为一个有效的“无区号国家”，这样getNumber()方法就能直接返回输入的原始号码。

示例代码：

angular.module('yourApp').controller('PhoneController', function($scope) {
  // 先扩展插件的国家数据
  window.intlTelInputGlobals.countries.push({
    iso2: 'xx',
    name: 'No country',
    dialCode: '',
    priority: 999 // 让它排在下拉列表最前面
  });

  // 初始化插件，设置默认选中自定义国家
  const phoneInput = document.querySelector('#phone-input');
  const iti = window.intlTelInput(phoneInput, {
    initialCountry: 'xx',
    // 你的其他配置
  });

  // 此时ngModel可以直接绑定，插件会返回输入的原始值
  $scope.submitForm = function() {
    console.log('提交的手机号：', iti.getNumber());
  };
});

关键注意点 #

• AngularJS v1.5的脏检查机制：在插件的原生事件回调中，必须调用$scope.$apply()来通知Angular更新模型，否则视图和模型会出现不同步的情况。
• 避免过度依赖插件的getNumber()：当选择无效国家时，这个方法可能返回空，直接取输入框的value值更可靠。

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