![element element](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了Angular.js - 当 ng-pattern 为 $invalid 时,ng-change 不会触发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 ng-pattern 来验证一些表单字段,并且我正在使用 ng-change 来观察和处理任何更改,但是 ng-change(或 $scope.$watch)只会在表单元素时触发处于 $valid 状态!我是 angular 的新手,所以我不知道如何解决这个问题,尽管我怀疑一个新的指令是要走的路.
如何让 ng-change 在 $invalid 和 $valid 表单元素状态下触发,而 ng-pattern 仍然像以前一样设置表单元素状态?
HTML:
<div ng-controller="控制器"><表格名称=表格"><input type="text" name="textbox" ng-pattern="/^[0-9]+$/" ng-change="change()" ng-model="inputtext">变化:{{变化}}</表单><br>输入任意数量的数字,更改应该会增加.<br><br>现在输入任何不是数字的内容,更改将停止增加.当表单处于 $invalid 状态时,ng-change 不会触发.<br><br>现在删除所有不是数字的字符.它将再次像往常一样递增.当表单处于 $valid 状态时,ng-change 将触发.<br><br>即使表单为 $invalid,我也希望 ng-change 触发.<br><br>form.$valid: <font color="red">{{ form.$valid }}</font>
Javascript:
angular.module('test', []).controller('controller', function ($scope) {$scope.changes = 0;$scope.change = 函数 () {$scope.changes += 1;};});
我创建了一个可用的 JS Fiddle,它显示了我遇到的问题.
http://jsfiddle.net/JAN3x/1/
顺便说一下,这个角度问题似乎也很重要:https://github.com/angular/angular.js/issues/1296
解决方案
Edit 当 ng-model-options
不可用时已回答此问题.请查看最高投票的答案.
您可以编写一个简单的指令来监听 input
事件.
HTML:
<input type="text" name="textbox" ng-pattern="/^[0-9]+$/" watch-change="change()" ng-model="inputtext>变化:{{变化}}
JS:
app.directive('watchChange', function() {返回 {范围: {onchange: '&watchChange'},链接:函数(范围,元素,属性){element.on('输入', function() {范围.$应用(函数(){范围.onchange();});});}};});
http://jsfiddle.net/H2EAB/
I am using ng-pattern to validate some form fields, and I am using ng-change with it to watch and process any changes, however ng-change (or $scope.$watch) will only fire when the form element is in the $valid state! I'm new to angular, so I don't know how to solve this issue, although I suspect a new directive is the way to go.
How can I get ng-change to fire in both $invalid and $valid form element states, with ng-pattern still setting the form element states as before?
Html:
<div ng-app="test">
<div ng-controller="controller">
<form name="form">
<input type="text" name="textbox" ng-pattern="/^[0-9]+$/" ng-change="change()" ng-model="inputtext"> Changes: {{ changes }}
</form>
<br>
Type in any amount of numbers, and changes should increment.
<br><br>
Now enter anything that isn't a number, and changes will stop incrementing. When the form is in the $invalid state, ng-change doesn't fire.
<br><br>
Now remove all characters that aren't numbers. It will increment like normal again. When the form is in the $valid state, ng-change will fire.
<br><br>
I would like ng-change to fire even when the the form is $invalid.
<br><br>
form.$valid: <font color="red">{{ form.$valid }}</font>
</div>
</div>
Javascript:
angular.module('test', []).controller('controller', function ($scope) {
$scope.changes = 0;
$scope.change = function () {
$scope.changes += 1;
};
});
I have created a working JS Fiddle which shows the problem I am having.
http://jsfiddle.net/JAN3x/1/
By the way, this angular issue also seems to be relevant:https://github.com/angular/angular.js/issues/1296
解决方案
Edit This was answered when ng-model-options
was not available. Please see the top-voted answer.
you can write a simple directive to listen input
event.
HTML:
<input type="text" name="textbox" ng-pattern="/^[0-9]+$/" watch-change="change()" ng-model="inputtext"> Changes: {{ changes }}
JS:
app.directive('watchChange', function() {
return {
scope: {
onchange: '&watchChange'
},
link: function(scope, element, attrs) {
element.on('input', function() {
scope.$apply(function () {
scope.onchange();
});
});
}
};
});
http://jsfiddle.net/H2EAB/
这篇关于Angular.js - 当 ng-pattern 为 $invalid 时,ng-change 不会触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!