javascript - 在 Angular JS 1.x 中动态更改输入数字元素的验证模式的最佳方法是什么？

Question

我需要实现一个输入数字元素，它可以接受正整数值或百分比值。我添加了两个单选按钮，用户可以在其中选择他想要提供的值类型。

我的问题是:使用 Angular 1.x 实现此验证的最佳方法是什么？我为每种情况创建了两个正则表达式，但我不知道动态地重新定义模式标记。

Answer 1

这就是我的做法。下面是伪代码。

您可以在 Controller 上创建将保存当前验证模式的值。

Controller

$scope.validationPattern = 'number';

然后，当选定的单选按钮更改时，应更新此验证模式:

html

<input type="radio" value="number" ng-model="validationPattern">
<input type="radio" value="percent" ng-model="validationPattern">

然后您可以编写自定义指令，将验证器添加到 ngModel。此自定义指令可以监视 validationPattern 并删除以前的验证器并在更改时添加新的验证器。

app.directive('regexValidator', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          $scope.$watch('validationPattern', function() {
             // remove previous regex pattern
             ngModel.$validators.splice()

             // add new regex pattern
             ngModel.$validators.push()
          });