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

Force ngPattern validation when another input is changed

本文关键字：ngPattern 验证 另一个 输入      更新时间：2023-09-26

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

为了实现这个所需的功能，我使用了与此类似的解决方案（肮脏的方式）。我不检查requireTel布尔值，而是检查countryCode是USA还是CAN，以确定是否使用我的电话号码模式进行验证。

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

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

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

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>

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

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})$/;

这将导致无限$digest错误。

这是解决问题的一种方法。

我基本上所做的是在下拉列表中添加一个ng-change="changed()"。

<select ng-model="selectedCountry" ng-change="changed()" ng-options="country as country.countryName for country in countries">
    </select>

在JS中，我重置了输入文本框的值 

 $scope.changed=function()
  {
    $scope.phone="";
  }

这将强制再次执行验证。

这是演示.

让我知道此解决方案是否适合您。

相关文章：