加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 当ng-pattern为$invalid时,Angular.js – ng-chang

发布时间:2020-12-17 08:32:13 所属栏目:安全 来源:网络整理
导读:我使用ng-pattern来验证一些表单字段,我使用ng-change来观察和处理任何更改,但是ng-change(或$ scope。$ watch)只会在表单元素位于$ valid state!我是新的角,所以我不知道如何解决这个问题,虽然我怀疑一个新的指令是要走的路。 如何获得ng-change在$ in
我使用ng-pattern来验证一些表单字段,我使用ng-change来观察和处理任何更改,但是ng-change(或$ scope。$ watch)只会在表单元素位于$ valid state!我是新的角,所以我不知道如何解决这个问题,虽然我怀疑一个新的指令是要走的路。

如何获得ng-change在$ invalid和$ valid表单元素状态中触发,ng-pattern仍然像以前一样设置表单元素的状态?

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

我创建了一个工作的JS小提琴,它显示了我有的问题。

http://jsfiddle.net/JAN3x/1/

顺便说一下,这个角度问题似乎也是相关的:
https://github.com/angular/angular.js/issues/1296

你可以写一个简单的指令来监听输入事件。

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/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读