Search code examples
javascriptangularjsclient-side-scripting

Angularjs Hide error on page load

I'm creating a form with numeric textbox that allows numbers between 12 to 30. In case, user types value other than this it should prompt an error. The following code works just like that. But I don't need this error when the page is loaded. How could I achieve it?

Code

<html ng-app="formMod">
<head>
    <title>Custom Form Validation</title>
    <style type="text/css">
    .castIn{
        color: red;
        display: show;
    }
    .castAway{
        display: none;
    }
    </style>
</head>
<body ng-controller="formCont as ctrl" >

<form name="myForm" >
    How old are you
        <input type="number"
               class="agee" 
               required="required"                    
               min="12"  max="30" 
               name="age"
               ng-model="user.age">

<span ng-class="ctrl.shouldIshow(user.age)" ng-hide="myForm.agee.$pristine">Age must lie between 12 to 30</span>

</br><input type="submit" name="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
         angular.module('formMod',[])
                .controller('formCont',[ function(){
                          this.valueContainer = 'Ms.';

                          this.shouldIshow = function(age){
                               return {
                                 castAway : (age >= 12) || (age <= 30),
                                 castIn : (age == null)
                               };                       
                          };
                }]);
</script>
</body>
</html>
Solution

  • Figured it out. 

    ng-hide="myForm.agee.$pristine"

    should be:

    ng-hide="myForm.age.$pristine"

    because age represents the element and agee represents the class in code.