Angularjs Hide error on page load

Question

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>

Sujan Gainju · Accepted Answer · 2018-06-27 11:44:25Z

You have misspelled age by agee in

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

         angular.module('formMod',[])
                .controller('formCont',[ function(){
                          this.valueContainer = 'Ms.';

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

<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.age.$pristine">Age must lie between 12 to 30</span>

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

Sadiq · Accepted Answer · 2018-06-27 11:43:24Z

0

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.

answered Jun 27, 2018 at 11:43

Sadiq

8381 gold badge12 silver badges37 bronze badges

Comments

Ravi Kiran Ayinampudi · Accepted Answer · 2018-06-27 11:51:00Z

0

When you use form, you could try with input tag name[Here it is age.]

You should give a combination try. It should not be interacted[pristine] and not touched.

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

edited Jun 27, 2018 at 11:51

answered Jun 27, 2018 at 11:45

Ravi Kiran Ayinampudi

5992 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angularjs Hide error on page load

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related