Question

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

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

我正在更改ng-change下拉列表中ng-pattern的值。验证工作正常，但是当我更改下拉值时，先前在输入中输入的值未验证。

例如，如果我在下拉列表中选择货币并输入文本'abc'以使其有效，但当我更改下拉文字时，它仍会显示无效值。

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

任何解决方案都表示赞赏。感谢

Answer 1

从查找问题开始，就像没有基于ng-pattern更新CSS类一样。没有详细说明，但这个傻瓜可能会帮助你。

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

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Answer 2

这似乎是一个有角度的错误。

我找到了一个解决方案，但效果不是很好。

jsfiddle上的实例。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: