Error message does not hide after angular form validation

Question

This is my form my HTML

        <form id = "myform" name="myform"  ng-submit="saveForm()" novalidate >

            <div class="input-group">
                <span class="input-group-addon"> <img src="/icon.png" alt=""/> </span>                    
                <input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required>                    
            </div>
            <span ng-show="formInvalid">Please enter username</span>


            <button type="submit" class="btn btn-default" id="saveBtn"> Save </button>
        </form>

And inside the controller I have

$scope.formInvalid = false;

$scope.saveForm = function(){  
  if($scope.myform.username.$invalid){  
       $scope.formInvalid = true;
  }

if($scope.myform.$valid){
//....save it....

At first the form has no error message, if I hit "Save" the "Please enter username" appears, so far, all good.

But if I click on the form field to type a username, the error message does not go away. Even if I finish typing and click somewhere else, the error message still does not go away.

I also try

  if(!$scope.myform.username.$valid){  
       $scope.formInvalid = true;
  }

and I also try together

  if(!$scope.myform.username.$valid){  
       $scope.formInvalid = true;
  }

  if($scope.myform.username.$valid){  
       $scope.formInvalid = false;
  }

and the problem is still there. How can I debug? How do I fix this?

Thanks

Michel · Accepted Answer · 2016-03-20 22:18:50Z

3

You don't have to introduce and maintain a new variable ($scope.formInvalid) for managing the state of your form. Angular maintains the valid / invalid state of the form for you.

As your form is named myform, just show the message about the username based on the value of myform.username.$invalid, and save the form only if myform.$valid is true:

HTML

<span ng-show="myform.username.$invalid">Please enter username</span>

JS

$scope.saveForm = function () {
  if ($scope.myform.$valid) {
    // save the form
  }
};

See fiddle

answered Mar 20, 2016 at 22:18

Michel

28.5k6 gold badges67 silver badges72 bronze badges

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

3 Comments

slevin Over a year ago

Aha, so its really simple. Two things. 1- With this method, is there a way to begin with no message at all and show the message when field is empty and hit "Save"? I mixed ng-show/ng-hide with $valid/$invalid, but nothing. 2- The method I use in my original post is in the book "Beginning AngularJS", © 2014 by Andrew Grant, chapter 6. How come it is not working? I mean, its in a book, it should work, right? Thanks

Michel Over a year ago

1. Sure. When you hit enter, i.e. as soon as you submit the form, the flag myform.$submitted is set to true even if the form is invalid. So something like ng-show="myform.$submitted && myform.username.$invalid" should do the trick.

Michel Over a year ago

2. I don't know this book, but if the introduction of the variable formInvalid so as to show or hide a validation message comes from there, I think it's not a good advice. Basically the example you provided does not work because formInvalid is not set to false as soon as you start typing in the input.

z.a. · Accepted Answer · 2016-03-20 21:51:28Z

0

you can try a watch event,

$scope.$watch('myform.$valid', function(n, o) {
if(n) {
$scope.formInvalid = false;
} else {
$scope.formInvalid = true;
}
});

But i might even be a better idea, if you start using validators.

answered Mar 20, 2016 at 21:51

z.a.

2,7973 gold badges15 silver badges17 bronze badges

2 Comments

slevin Over a year ago

What do you mean by "validators"? Can you give me an example? Thanks

z.a. Over a year ago

blog.thoughtram.io/angularjs/2015/01/11/…

Ran Sasportas · Accepted Answer · 2016-03-21 07:09:24Z

you do not trigger a change to form invalid property anywhere, I suggest you solve this issue with angulars built in validators and ng-messages module, which will listen to changes on you're form inputs and notify when the inputs are valid or invalid and notify the warning text. Another approach you can take is use the ng-change directive on the inputs you want to listen to changes in and trigger and update on the form invalid property according to the inputs validity.

example : (taken from the official angular website )

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

i think this is the most elegant way to do it.

Can you give me an example on how to use validators and ng-messages? Thanks
i just edited my original answer with an example, take a look.

Collectives™ on Stack Overflow

Error message does not hide after angular form validation

3 Answers 3

3 Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Related