AngularJS字段验证表达式似乎不适用于ng-show

Question

我正在努力使用AngularJS验证.这是我在HTML 5中的SSCCE(由于我的服务器端框架,它必须是有效的XML):

在JSFiddle中查看

HTML

<div ng-app="">
    <form name="myForm" ng-controller="ValidationTest" novalidate="novalidate">
        <input name="email" ng-model="myForm.email" type="email" required="required" />
        <div>
            Field:
            <span ng-show="myForm.email.$valid">valid</span>
            <span ng-show="myForm.email.$invalid">invalid</span>
            <span ng-show="myForm.email.$pristine">pristine</span>
            <span ng-show="myForm.email.$dirty">dirty</span>
        </div>
        <div>
            Form:
            <span ng-show="myForm.$valid">valid</span>
            <span ng-show="myForm.$invalid">invalid</span>
            <span ng-show="myForm.$pristine">pristine</span>
            <span ng-show="myForm.$dirty">dirty</span>
        </div>
    </form>
</div>

CSS

input.ng-valid {
    border-color: #0f0;
}
input.ng-invalid {
    border-color: #f00;
}
input.ng-pristine {
    background-color: #eef;
}
input.ng-dirty {
    background-color: #fee;
}

JavaScript的

function ValidationTest($scope) {}

当我运行这个场景时,应用于表单元素的CSS类正确地反映了它的验证状态,表单的ng-show指令也是如此.但是,该字段的ng-show指令开始正确(显示"无效"和"原始")但是一旦我开始在字段中键入,所有指令都会消失.据我所知,我正如文档所示这样做,所以有什么不对？

Answer 1

刚才意识到原因:表示字段的AngularJS对象和字段本身的值都绑定到同一个位置:myForm.email.该input元素的值应该是刚email.

根据Ahmad的要求进行澄清:表达式myForm.email是指由AngularJS创建的对象,用于表示表单中的email字段myForm.它不是字段的实际值,这是您应该放在元素的ng-model属性中的值<input>.为此,我应该在范围中指定要用于存储该值的属性的名称.所以ng-model改为说email而不是myForm.email修复.然后,作用域的email属性将包含一个字符串,该字符串是在字段中输入的值(当它有效时).