使用ng-pattern Angularjs进行动态验证 [英] Dynamic validation using ng-pattern Angularjs

问题描述

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

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

我正在改变ng-pattern的值ng下拉菜单的变化。验证工作正常，但是当我更改下拉值时，以前输入的值无法验证。

例如，如果我在下拉列表中选择货币并输入文本'abc'它验证，但当我改变下拉文本它仍然显示无效值。

我已经尝试过更高版本的Angular它工作正常，但对于1.2.23它不工作。

任何解决方案，赞赏。谢谢

解决方案

看来，这是一个bug角度。我发现了一个解决方案，但它不是很好。

在 jsfiddle 。

var myApp = angular.module（'myApp'，[]）; myApp.controller（ MyCtrl，函数（$ 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。如果（dataTypeId === 1）{$ scope.customPat tern = / ^ \d {1,10} $ /;} if 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>借助动态模式< / h3> < select ng-model =dataTypeValueng-options =t as t.label for t in dataTypeListng-change =getCustomPattern（MyForm.input）> < /选择> < input type =textng-model =textValue.textng-pattern =getCustomPattern（MyForm.input）ng-model-options ={allowInvalid：true}name =input> <峰; br> <峰; br> < br>数据类型：{{dataTypeValue}}< br>输入值：{{textValue}}< / ng-form> < / div>< / div>

I am trying to do validation on a input based on value selected from a dropdown.

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

I am changing the value of ng-pattern in ng-change of dropdown. Validation works fine but when I change dropdown value previously entered values in input is not validating.

For example, If I select currency in dropdown and enter a text 'abc' so it validates but when I change dropdown to text it still show invalid value.

I have tried with higher version of Angular it works fine but for 1.2.23 it doesn't work.

Any solution is appreciated. thanks

解决方案

It seems that this is a bug angular.

I found a solution, but it is not very good.

Live example on 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>

这篇关于使用ng-pattern Angularjs进行动态验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！