javascript - 当另一个输入更改时强制 ngPattern 验证

Question

我有一个 Angular JS 应用程序，其中有一个必填的电话号码字段以及一个国家/地区选择字段。国家/地区选择默认为美国。当所选国家/地区为美国或加拿大时，我想使用国内电话号码模式验证电话号码字段，但当选择任何其他国家/地区时，我不想验证电话号码模式。

为了实现这个所需的功能，我使用了与 this 类似的解决方案(脏方式)。我没有检查 requireTel bool 值，而是检查 countryCode 是 USA 还是 CAN 来确定是否验证与我的电话号码模式。

此解决方案有效，但前提是您在更改国家/地区后更改了电话号码。例如，如果您选择了美国，并输入了一个很长的国际电话号码，例如 +441234567890，它会使用国内电话号码验证并显示无效模式。但是当我将国家/地区更改为巴哈马时，它不应再使用国内电话号码验证，并且无效模式消息应该消失。但是，在我更改电话号码之前，仍然会显示无效模式消息。一旦我更改了电话号码，该消息就会消失。

发生这种情况的原因是，当更改国家/地区选择时，不会再次在电话号码字段上执行 ng-pattern 验证。有没有办法在国家/地区发生变化时强制重新评估 ng-pattern 验证？

请参阅下面的代码片段来重现该问题。

var app = angular.module('example', []);

app.controller('exampleCtrl', function($scope) {
  $scope.countries = [{
    countryName: 'United States',
    countryCode: 'USA'
  }, {
    countryName: 'Canada',
    countryCode: 'CAN'
  }, {
    countryName: 'Bahamas',
    countryCode: 'BHS'
  }, {
    countryName: 'Chile',
    countryCode: 'CHL'
  }];

  $scope.selectedCountry = $scope.countries[0];

  $scope.phoneNumberPattern = (function() {
    var regexp = /^\(?(\d{3})\)?[ .\/-]?(\d{3})[ .-]?(\d{4})$/;
    return {
      test: function(value) {
        var countryCode = $scope.selectedCountry.countryCode;
        if (countryCode !== 'USA' && countryCode !== 'CAN') {
          return true;
        }
        return regexp.test(value);
      }
    }
  })();

});

.error {
  color: red;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="example" ng-controller="exampleCtrl">
  <ng-form name="exampleForm">
    <label>Country:</label>
    <select ng-model="selectedCountry" ng-options="country as country.countryName for country in countries">
    </select>
    <label>Phone:</label>
    <input type="text" ng-model="phone" name="phone" ng-pattern="phoneNumberPattern" required>
    <small class="error" ng-show="exampleForm.phone.$error.pattern">Invalid pattern.</small>
    <small class="error" ng-show="exampleForm.phone.$error.required">Phone number is required.</small>
  </ng-form>
</div>

Answer 1

这是另一个解决方案。使用返回模式的函数。

jsfiddle 上的实例.

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.countries = [{
      countryName: 'United States',
      countryCode: 'USA'
    }, {
      countryName: 'Canada',
      countryCode: 'CAN'
    }, {
      countryName: 'Bahamas',
      countryCode: 'BHS'
    }, {
      countryName: 'Chile',
      countryCode: 'CHL'
    }];

    $scope.selectedCountry = $scope.countries[0];
    var regUSA = /^\(?(\d{3})\)?[ .\/-]?(\d{3})[ .-]?(\d{4})$/;
    var regAll = /.*/;
    $scope.phoneNumberPattern = function() {
      var countryCode = $scope.selectedCountry.countryCode;
      if (countryCode !== 'USA' && countryCode !== 'CAN')
        return regAll;
      else
        return regUSA;
    }
  });

.error {
  color: red;
  font-style: italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <ng-form name="exampleForm">
      <label>Country:</label>
      <select ng-model="selectedCountry" ng-options="country as country.countryName for country in countries">
      </select>
      <label>Phone:</label>
      <input type="text" ng-model="phone" name="phone" ng-pattern="phoneNumberPattern()" required>
      <small class="error" ng-show="exampleForm.phone.$error.pattern">Invalid pattern.</small>
      <small class="error" ng-show="exampleForm.phone.$error.required">Phone number is required.</small>
    </ng-form>
  </div>
</div>

注意: 正则表达式变量在函数外部声明非常重要。如果您尝试按以下方式更改方法:

if (countryCode !== 'USA' && countryCode !== 'CAN')
    return /.*/;
else
    return /^\(?(\d{3})\)?[ .\/-]?(\d{3})[ .-]?(\d{4})$/;

这将导致 infinite $digest error .