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

Question

我在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.有更好的方法吗？

Answer 1

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

这是一个演示它的plunker

现在,所有的这么说,如果有人在你的表单中输入的数据,这是不完全的,形式本身是无效的.所以我不确定这是最好的可用性.但它应该工作.

方法2:使用过滤器!(推荐的)

我现在推荐一种过滤器用于此类事情......

以下过滤器与上面的过滤器相同,但对于Angular,IMO来说,这是更好的做法.也是一个插件.

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>