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

Answer: 
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](http://jsfiddle.net/ata5q1vj/)**
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.