表单 – 角度表单验证：当至少一个输入为ng-invalid和ng-dirty时显示ng-ng

概述我在Angular partial中有以下表格： <form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate > <input type="text" name="first_name" ng-model=" 我在Angular partial中有以下表格：

<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>

这是UGLY.有没有更好的方法呢？

解决方法 方法1：在控制器设置的$scope上使用函数.

因此,为了更好地理解您的问题,您希望在表单上的任何字段同时$invalID和$dirty时显示一条消息…

添加控制器方法：

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>

总结

以上是内存溢出为你收集整理的表单 – 角度表单验证：当至少一个输入为ng-invalid和ng-dirty时显示ng-ng全部内容，希望文章能够帮你解决表单 – 角度表单验证：当至少一个输入为ng-invalid和ng-dirty时显示ng-ng所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。