Angularjs 隐藏页面加载错误

Question

我正在创建一个带有数字文本框的表单，允许 12 到 30 之间的数字。如果用户键入除此之外的值，它应该会提示错误。下面的代码就是这样工作的。但是当页面加载时我不需要这个错误。我怎样才能实现它？

代码

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

Answer 1

想通了。

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

应该是：

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

因为age代表元素，agee代表代码中的class

Answer 2

您在

中 agee 拼错了 age

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

Answer 3

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>

Angularjs 隐藏页面加载错误

Angularjs Hide error on page load

javascript

client-side-scripting

angularjs