时间戳

首页 > 解决方案 > 重置表单时未调用AngularJS指令

javascript - 重置表单时未调用AngularJS指令

问题描述

当我单击按钮类型重置时，在表单中使用指令时出现问题。我的问题可以在stackblitz上找到并复制。我的指令是一个基本指令，如果给定的输入低于 1900，它会将输入置于错误状态。请注意，我无法更改按钮的类型，它必须保留type=reset。

重现指令的正常行为

  1. 在输入中输入 100 => 你会看到输入处于错误状态
  2. 在 input 里面输入 2000 => 你会看到 input 没有错误

重现指令的错误行为

  1. 在输入中输入 100 => 输入处于错误状态
  2. 单击重置按钮 => 输入内容被重置，但输入仍处于错误状态而应该没有错误

这是 HTML 代码：

<form name="dateForm">
    <div class="form-group" name="dateForm">
        <label for="usr">Name:</label>
        <input type="text" class="form-control" id="year" name="year"
               valid-year="true" ng-model="$ctrl.year" year-min="1900">
    </div>
    <button type="reset" class="btn btn-primary">Reset</button>
</form>

这是我的 JS 代码：

angular.module('app', requires)
.directive('validYear', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            if (attrs.validYear === 'true') {
                if (!modelCtrl) {
                    return;
                }
                modelCtrl.$parsers.push(function (value) {
                    console.log('--> call to directive');

                    if (angular.isDefined(attrs.yearMax) && parseInt(value) > parseInt(attrs.yearMax)) {
                        modelCtrl.$setValidity('validYear', false);
                    } else {
                        modelCtrl.$setValidity('validYear', true);
                    }
                    if (angular.isDefined(attrs.yearMin) && parseInt(value) < parseInt(attrs.yearMin)) {
                        modelCtrl.$setValidity('validYear', false);
                    } else {
                        if (angular.isDefined(attrs.yearMax) && parseInt(value) > parseInt(attrs.yearMax)) {
                            modelCtrl.$setValidity('validYear', false);
                        } else {
                            modelCtrl.$setValidity('validYear', true);
                        }
                    }
                    return value;
                });
            }
        }
    };
});

标签： javascriptangularjsangularjs-directive

解决方案

首先，您的验证指令非常奇怪——如果您从控制器更改值，它将不起作用……这很奇怪。（或者这是需要的？）请看一下如何在 angularjs 文档中添加验证器。

其次，您的主要问题是没有运行验证，但“重置”按钮不会更改模型值。你最好不要依赖这些原生的东西，你可以覆盖重置按钮的行为：

<button type="reset" ng-click="$event.preventDefault();$ctrl.year=null"...

推荐阅读