问题描述
我试图根据从下拉列表中选择的值对输入进行验证。
JSFiddle:https:// jsfiddle.net/Raj_13290/qqLnqw3f/9/
我正在改变ng-pattern的值ng下拉菜单的变化。验证工作正常,但是当我更改下拉值时,以前输入的值无法验证。
例如,如果我在下拉列表中选择货币并输入文本'abc'它验证,但当我改变下拉文本它仍然显示无效值。
我已经尝试过更高版本的Angular它工作正常,但对于1.2.23它不工作。
任何解决方案,赞赏。谢谢
看来,这是一个bug角度。我发现了一个解决方案,但它不是很好。
在。
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进行动态验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!