重置表单时未调用AngularJS指令答案

【问题标题】：AngularJS Directive not called when reset form重置表单时未调用AngularJS指令
【发布时间】：2019-08-15 07:51:54
【问题描述】：

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

重现指令的正常行为

在输入中输入 100 => 你会看到输入处于错误状态
在输入中输入2000 =>你会看到输入没有错误

重现指令的错误行为

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

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

【问题讨论】：

当点击 reset 时，'--> call to directive' 没有触发。所以状态不会改变。
那么为什么不调用该指令以及如何调用它？
我有两个想法。一种是覆盖方法 'reset' 。另一种是使用函数'watch'来观察值'$ctrl.year'

标签： javascript angularjs angularjs-directive

【解决方案1】：

首先，你的验证指令很奇怪——如果你改变控制器的值，它就不起作用了……这很奇怪。（或者这是需要的？）请看看你应该如何在 angularjs 文档中添加验证器。

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

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

【讨论】：