Check if a form is empty in AngularJS

Question

I have a project with some business rules that ultimately rely on checking whether a form at a given route is empty. When I say empty, I really mean, empty...but, regardless of whether the user may have entered information at one point then deleted it. As far as I can tell, the $pristine model property is cleared if anything is entered into a field, and remains cleared even if the field is emptied again.

I do not believe that the models being bound are a good source of "empty" in our case, as they may have some initial state, so not everything is going to be null or a blank string. That could be done, if that is the only way to handle this particular use case, but that would require manually implementing this code on each and every view, for each and every model or set of models, for each and every unique form.

Is there a simpler way of checking if a form is empty, in that the fields of the form are at their initial states (i.e. text boxes blank (regardless of whether they may have been filled out and emptied again at some point), checkboxes in their initial state (regardless of whether they may have been changed then restored to their original state manually by the user at some point), radio buttons, dropdowns, etc. all the same way)?

Still an issue. I'm currently manually checking each field in all the forms I have to deal with. It's extremely tedious. There may be a way to handle it with a directive, but I have not really had a chance to figure that out. — jrista
– jrista, Commented Aug 26, 2014 at 1:15

SirTophamHatt · Accepted Answer · 2014-08-14 17:02:46Z

1

For any form which has a name, you can use a combination of $invalid and ng-minlength or ng-required/required on the input to determine if the user has left the field empty. In the following example, the submit button is disabled if the user leaves the input blank by checking the model against the ng-minlength and ng-required attributes.

<form name="someForm">
    <input type="text" ng-model="someName" ng-minlength="1" ng-required="true" name="someName">
    <button type="submit" ng-disabled="someForm.$invalid">
</form>

answered Aug 14, 2014 at 17:02

SirTophamHatt

1,58118 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jrista Over a year ago

Thanks for the answer. I should clarify that we need to use form validity as a different check. The goal is to display a modal popup, and the contents of that popup change depending on whether the form is simply "empty" vs. invalid. I'll be using the form $invalid check for the secondary case...I'm still hung up on the initial case where the form is empty...as that requires different content in this popup. It should probably also be clarified that we already have some extensive form validation in place, including ng-required on certain fields, but not others, as well as custom validators.

SirTophamHatt Over a year ago

Empty is an invalid state, the two are not mutually exclusive. For empty, you will need to verify that form.$invalid AND form.model.$error.required for each model.

RIM · Accepted Answer · 2014-10-18 14:13:19Z

I guess this could be the solution you are looking for. save all your models in one single object and compare it with an empty object when the form is submitted. If both equals : you display your popup.

HTML:

<form>
   <input type="email" ng-model="user.email" name="uEmail" required/>
   <input type="name" ng-model="user.name" name="uEmail" required/
   <button ng-click="isUnchanged(user)">SUBMIT</button>
</form>

JS:

  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master= {};
    $scope.isUnchanged = function(user) {
      if(angular.equals(user, $scope.master)){

        //show your popup here

       }else{
        //validation, submit etc.
      }
    };

  }]);

Please have a look at the RESET function in this example "Binding to form and control state" here => https://docs.angularjs.org/guide/forms

Collectives™ on Stack Overflow

Check if a form is empty in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related