gpt4 book ai didi

javascript - 控制何时以 Angular 进行验证

转载 作者:行者123 更新时间:2023-11-30 13:02:51 24 4
gpt4 key购买 nike

是否可以控制 Angular 的表单验证何时运行?具体来说,我想

时将字段显示为无效
  1. 收到的字段和失去焦点(模糊)
  2. 用户尝试提交

我想在该字段具有焦点时隐藏它。

Angular 首次加载时在表单上显示验证错误的默认行为对我来说似乎是一种糟糕的用户体验。使用 here 中的模式,我已经能够部分处理 require 属性的模糊。 ,但我真的不想重新执行所有验证。

是否可以全局控制这个时间?

最佳答案

我最终通过使用自定义指令解决了这个问题,该指令将焦点/模糊属性和类添加到每个表单的控件中:

app.directive('input', function() {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) {
return;
}

elm.on('focus', function () {
elm.addClass('has-focus');

scope.$apply(function () {
ctrl.hasFocus = true;
});
});

elm.on('blur', function () {
elm.removeClass('has-focus');
elm.addClass('has-visited');

scope.$apply(function () {
ctrl.hasFocus = false;
ctrl.hasVisited = true;
});
});

elm.closest('form').on('submit', function () {
elm.addClass('has-visited');

scope.$apply(function () {
ctrl.hasFocus = false;
ctrl.hasVisited = true;
});
});

}
};
});

有了这个,您可以通过一些普通的 ol css 控制输入字段上的错误突出显示:

input.has-visited.ng-invalid:not(.has-focus) {
background-color: #ffeeee;
}

并检查 form.<element>.hasVisited显示验证错误消息时。

希望这对其他人有帮助。 :)

关于javascript - 控制何时以 Angular 进行验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16743373/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com