Javascript 当按下退格/删除键时，如何使用Angularjs重置输入字段？

当按下退格/删除键时，如何使用Angularjs重置输入字段

我使用过这个，它工作得很好，除非用户用backspace或delete键清除字段。然后验证会阻止用户提交表单（使用Chrome v.50.0.2661.102）

我试图修改指令，但没有成功。非常感谢您的帮助

下面是我在el.bind（）中修改的指令：

angular.module（myApp）
.directive（'resetField'，
函数resetField（$compile，$timeout）{
返回{
要求：'ngModel'，
作用域：{}，
结论：是的，
链接：函数（范围、el、属性、ctrl）{
//限制特定类型的输入元素
var inputTypes=/text | search | tel | url | email | password/i；
如果（el[0].nodeName！=“输入”）
抛出新错误（“resetField仅限于输入元素”）；
如果（！inputTypes.test（属性类型））
抛出新错误（“resetField的输入类型无效：“+attrs.type”）；
//编译的重置图标模板
变量模板=$compile（“”）（范围）；
el.addClass（“重置字段”）；
el.之后（模板）；
scope.reset=函数（）{
ctrl.$setViewValue（空）；
ctrl.$render（）；
$timeout（函数（）{
el[0].focus（）；
}，0，假）；
scope.enabled=false；
};
el.bind（'input'，function（）{
//我添加了这个代码段，因为指令本身的工作原理非常简单
//好吧，（上面的scope.reset（）会起作用）但是
//没有通过验证…因此剩下的代码
如果（ctrl.$isEmpty（el.val（））{
scope.reset（）；
el[0].classList.remove（'ng-dirty'）；
el[0].classList.remove（'ng-touch'）；
el[0].classList.add（'ng-pristine'）；
el[0].classList.remove（'ng-invalid-required'）；
el[0].classList.add（'ng-pristine'）；
el[0].classList.add（'ng-valid'）；
}否则{
scope.enabled=！ctrl.$isEmpty（el.val（））；
}
作用域：$apply（）；
})
.bind（'focus'，function（）{
$timeout（函数（）{
scope.enabled=！ctrl.$isEmpty（el.val（））；
作用域：$apply（）；
}，0，假）；
})
.bind（'blur'，函数（）{
$timeout（函数（）{
scope.enabled=false；
}，0，假）；
});
}
};
};
);

html仍然显示ng invalid required，因为使用退格重置的依赖字段不为空

---

如果我调用与单击“X”完全相同的调用，为什么它的功能不相同？

有效性设置存储在输入指令的控制器上，因此删除HTML中的类名并不重要-它们将在下一个摘要中重新添加

但是，您可以访问指令中的-作为

ctrl

传递到link（）函数中-因此您可以在那里调用方法来手动“设置”其有效性/原始性

下面是一个快速演示（原始指令作者的示例，加上上面的代码，已修改）：

我已经将第一个字段设为必填字段，并且它还有一个

ng模式

regex，它必须匹配才能有效。退格时，字段类将重置以将其标记为原始且有效

希望这有帮助

参考资料：

---

谢谢你的帮助。这很有道理。不幸的是，它在我的案例中不起作用，因为正如你所说，它“在下一个摘要中被重新添加”。这解决了一个巨大的谜团，因为两个输入相互依赖，每当我清除一个，然后清除另一个，第一个输入就再次无效。有趣的是，指令的ng click工作正常。你回答了我的问题！嗯。ngModel控制器上的$setValidity和$setPristine（）函数应该可以实现这一点。你能发送一个链接到你的代码/演示吗？

angular.module(myApp)
.directive('resetField', 
function resetField($compile, $timeout) {
return {
    require: 'ngModel',
    scope: {},
    transclusion: true,
    link: function (scope, el, attrs, ctrl) {
        // limit to input element of specific types
        var inputTypes = /text|search|tel|url|email|password/i;
        if (el[0].nodeName !== "INPUT")
            throw new Error("resetField is limited to input elements");
        if (!inputTypes.test(attrs.type))
            throw new Error("Invalid input type for resetField: " + attrs.type);

        // compiled reset icon template
        var template = $compile('<i ng-show="enabled" ng-mousedown="reset()" class="fa fa-times-circle"></i>')(scope);
        el.addClass('reset-field');
        el.after(template);

        scope.reset = function () {
            ctrl.$setViewValue(null);
            ctrl.$render();
            $timeout(function () {
                el[0].focus();
            }, 0, false);
            scope.enabled = false;
        };

        el.bind('input', function () {    

          //I added this snippet since the directive on its own works so  
          // well, (thought scope.reset() above would do the trick) but it                   
          //doesn't pass the validations... thus the remaining code
            if (ctrl.$isEmpty(el.val())) {      
                scope.reset();     

                el[0].classList.remove('ng-dirty');
                el[0].classList.remove('ng-touched');
                el[0].classList.add('ng-pristine');
                el[0].classList.remove('ng-invalid-required');
                el[0].classList.add('ng-pristine');
                el[0].classList.add('ng-valid');

            } else {
                scope.enabled = !ctrl.$isEmpty(el.val());
            }
            scope.$apply();
        })
        .bind('focus', function () {
            $timeout(function () {
                scope.enabled = !ctrl.$isEmpty(el.val());
                scope.$apply();
            }, 0, false);
        })
        .bind('blur', function () {           
            $timeout(function () {
                scope.enabled = false;                    
            }, 0, false);

        });
    }
};
};
);