使用 ng-pattern Angularjs 进行动态验证答案

【问题标题】：Dynamic validation using ng-pattern Angularjs使用 ng-pattern Angularjs 进行动态验证
【发布时间】：2016-07-11 20:23:33
【问题描述】：

我正在尝试根据从下拉列表中选择的值对输入进行验证。

JSFiddle: https://jsfiddle.net/Raj_13290/qqLnqw3f/9/

我在 ng-change of dropdown 中更改 ng-pattern 的值。验证工作正常，但是当我更改下拉值时，之前在输入中输入的值无法验证。

例如，如果我在下拉列表中选择货币并输入文本“abc”以便验证，但当我将下拉列表更改为文本时，它仍然显示无效值。

我尝试过使用更高版本的 Angular，它可以正常工作，但对于 1.2.23，它不起作用。

感谢任何解决方案。谢谢

【问题讨论】：

请问您为什么要继续使用旧版本1.2.23，因为新版本没有任何问题？
这是一些遗留应用程序，它对旧版本 @PankajParkar 有一些依赖性

标签： javascript html angularjs validation

【解决方案1】：

看来这是一个bug angular。

我找到了解决办法，但不是很好。

jsfiddle 上的实时示例。

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

myApp.controller("MyCtrl", function($scope) {
  var tThis = this;
  $scope.dataTypeList = [{
    'id': 1,
    "label": "Currency"
  }, {
    'id': 2,
    "label": "Number"
  }, {
    'id': 3,
    "label": "Text"
  }];
  $scope.dataTypeValue;
  $scope.textValue = {
    text: ""
  };
  $scope.customPattern = /.*/;
  $scope.getCustomPattern = function(pInput) {
    if (!$scope.dataTypeValue)
      return $scope.customPattern;
    var dataTypeId = $scope.dataTypeValue.id;
    if (dataTypeId === 1) {
      $scope.customPattern = /^\d{1,10}$/;
    } else if (dataTypeId === 2) {
      $scope.customPattern = /^\d+$/;
    } else if (dataTypeId === 3) {
      $scope.customPattern = /^.*$/;
    }
    if (!$scope.getCustomPattern.isParser) {
      $scope.getCustomPattern.isParser = true;
      pInput.$setViewValue(pInput.$viewValue);
    } else {
      $scope.getCustomPattern.isParser = false;
    }
    return $scope.customPattern;
  };
});

input.ng-invalid {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <ng-form name="MyForm">

      <h3>
     With dynamic pattern
    </h3>
      <select ng-model="dataTypeValue" ng-options="t as t.label for t in dataTypeList" ng-change="getCustomPattern(MyForm.input)">

      </select>

      <input type="text" ng-model="textValue.text" ng-pattern="getCustomPattern(MyForm.input)" ng-model-options="{allowInvalid:true}" name="input">
      <br>
      <br>
      <br>Data type: {{dataTypeValue}}
      <br>Entered value: {{textValue}}

    </ng-form>
  </div>
</div>

【讨论】：

谢谢斯蒂芬，干得好！！！有效。不需要局部变量“isParser”。
@Manish 没有局部变量 isParser 我递归执行函数 getCustomPattern。看到这个jsfiddle。
如果没有isParser 检查，这是行不通的。我指的是var isParser = false 线。

【解决方案2】：

从你的问题来看，它就像没有根据 ng-pattern 更新你的 CSS 类。没有详细介绍，但这个 plunkr 可能会对您有所帮助。

https://plnkr.co/edit/JSgH3LZHQysIO71u03yF?p=preview

var myApp = angular.module('myApp', []);
myApp.controller("MyCtrl", function ($scope) {
var tThis = this;
$scope.dataTypeList = [{
        'id' : 1,
        "label" : "Currency"
    }, {
        'id' : 2,
        "label" : "Number"
    }, {
        'id' : 3,
        "label" : "Text"
    }
];
$scope.dataTypeValue;
$scope.textValue
$scope.customPattern = '';
$scope.className = "ng-invalid ng-invalid-pattern"
    $scope.setCustomPattern = function () {
    var dataTypeId = $scope.dataTypeValue.id;
    console.log(dataTypeId + 'llsdkfalskdf');
    if (dataTypeId === 1) {
        $scope.customPattern = /^\d{1,10}$/;
    } else if (dataTypeId === 2) {
        $scope.customPattern = /^\d+$/;
    } else if (dataTypeId === 3) {
        $scope.customPattern = /^.*$/;
    }
    return $scope.customPattern
};
$scope.$watch("[dataTypeValue, textValue]", function (nw, old) {
    var s = $('input[name=input]').val()
        $scope.textValue = s;
    var pattern = $scope.setCustomPattern()
        if (pattern.test($scope.textValue)) {
            $scope.className = "ng-valid ng-valid-pattern"
        } else {
            $scope.className = "ng-invalid ng-invalid-pattern"
        }
});

});

【讨论】：

感谢阿伦，很好的发现！！这是一个很好的解决方案，但我不能使用 $watch，因为我有很多输入字段。