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

您在

中用age拼写了agee

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

弄清楚了。

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

应为：

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

因为 age 表示元素，而 agee 表示代码中的类。

Answer 3

使用表格时，可以尝试输入标签名称[此处为年龄。]

您应该组合尝试。不应该   交互[原始]而不被触摸。

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

Angular.js在页面加载时隐藏错误

3 个答案: