使用ng模式Angularjs进行动态验证
Dynamic validation using ng-pattern Angularjs
我正试图根据从下拉列表中选择的值对输入进行验证。
JSFiddle: https://jsfiddle.net/Raj_13290/qqLnqw3f/9/
我正在更改下拉列表中ng模式的值。验证工作正常,但当我更改下拉列表值时,以前在输入中输入的值不会进行验证。
例如,如果我在下拉列表中选择货币并输入文本"abc",这样它就会生效,但当我将下拉列表更改为文本时,它仍然显示无效值。
我尝试过Angular的更高版本,它运行良好,但对于1.2.23,它不起作用。
欢迎任何解决方案。感谢
这似乎是一个角度错误。
我找到了一个解决方案,但不是很好。
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模式更新你的CSS类。虽然没有详细说明,但这个plunker可能会对你有所帮助。
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"
}
});
});
相关文章:
- Php,Javascript-动态表单id's和动态验证
- 将动态验证文本添加到自定义jQuery验证规则中
- 基于选择的角度动态验证
- 使用ng模式Angularjs进行动态验证
- 动态验证输入框是否有空格或是否为空
- 在 Javascript 中动态验证值列表
- j查询动态验证单选按钮选择
- 尝试使用 jQuery - 自定义函数动态验证字段
- 动态验证-只需一个附加
- 动态验证文本字段中的问题
- Jquery动态验证字段
- 动态验证和格式化邮政编码
- javascript表单的动态验证
- 动态验证密码规则
- 对输入进行动态验证
- 我可以使用HTML5 API根据允许的值列表动态验证表单字段值吗?
- Asp.net MVC日期时间动态验证客户端日期格式
- 使用PHP实现HTML表单的动态验证
- 客户端范围动态验证
- 动态验证表单数据