角表单验证：NG-节目时，至少有一个输入是NG-无效，NG-脏 [英] Angular form validation: ng-show when at least one input is ng-invalid and ng-dirty

问题描述

我在角部分的格式如下：

I have the following form in an 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-脏和NG-无效。因为它是上面，该错误将显示，直到形式是完全有效的。长期的解决办法是做这样的事情：

The trouble I'm having is with the span at the bottom that says "Error!". I want this to show ONLY if one of the inputs is both "ng-dirty" and "ng-invalid". As it is above, the error will show until the form is completely valid. The long solution would be to do something like:

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

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

Which is UGLY. Any better way to do this?

推荐答案

所以能够更好地了解你的问题，你想显示一条消息，如果的您的窗体上的任何领域既$无效，$脏 ...

Method 1: Use a function on $scope set up by your controller.

So with a better understanding of your problem, you wanted to show a message if any field on your form was both $invalid and $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试玩它

现在所有这一切说，如果有人已在您的表单中输入的数据，和它的不完整，形式本身的是的无效。所以，我不知道这是最好的可用性。但它应该工作。

Now all of that said, if someone has entered data in your form, and it's not complete, the form itself is invalid. So I'm not sure this is the best usability. But it should work.

我现在推荐一个过滤器这样的事情...

I now recommend a filter for this sort of thing...

以下过滤器是一样的上面，但它的角度更好的做法，海事组织。 又一个普拉克。

The following filter does the same as the above, but it's better practice for 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-节目时，至少有一个输入是NG-无效，NG-脏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！