gpt4 book ai didi

forms - Angular 表单验证 : ng-show when at least one input is ng-invalid and ng-dirty

转载 作者:行者123 更新时间:2023-12-03 08:01:36 24 4
gpt4 key购买 nike

我在 Angular 部分中有以下形式:

<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
<input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
<input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
<input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
<input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
<span ng-show="submit_entry_form.$invalid">Error!</span>
<input type="submit" id="submit" value="Submit" />
</form>

我遇到的问题是底部的跨度显示“错误!”。我希望这仅在输入之一同时是“ng-dirty”和“ng-invalid”时显示。如上所述,错误将一直显示,直到表单完全有效。长期的解决方案是执行以下操作:
<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>

这是丑陋的。有没有更好的方法来做到这一点?

最佳答案

方法 1:使用 Controller 设置的 $scope 上的函数。
因此,为了更好地了解您的问题,您希望在表单上的任何字段同时为 $invalid 和 $dirty 时显示一条消息...
添加 Controller 方法:

app.controller('MainCtrl', function($scope) {

$scope.anyDirtyAndInvalid = function (form){
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$dirty && form[prop].$invalid) {
return true;
}
}
}
return false;
};
});
并在您的 HTML 中:
<span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>
Here is a plunker to demo it
综上所述,如果有人在您的表单中输入了数据,但数据不完整,则表单本身就是无效的。所以我不确定这是最好的可用性。但它应该工作。

方法2:使用过滤器! (受到推崇的)
我现在为这种事情推荐一个过滤器......
以下过滤器的作用与上述相同,但对于 Angular、IMO 来说是更好的做法。 Also a plunk.
app.filter('anyInvalidDirtyFields', function () {
return function(form) {
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$invalid && form[prop].$dirty) {
return true;
}
}
}
return false;
};
});
<span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>

关于forms - Angular 表单验证 : ng-show when at least one input is ng-invalid and ng-dirty,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14347024/

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