4

我正在努力进行 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 指令一开始是正确的（显示“无效”和“原始”），但一旦我开始在该字段中输入，它们就会全部消失。据我所知，我正在按照文档指示执行此操作，那么出了什么问题？

4

1 回答 1

5

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

艾哈迈德要求的澄清：该表达式myForm.email是指由 AngularJS 创建的对象，用于表示表单email中的字段myForm。它不是该字段的实际值，而是您应该放入元素ng-model属性中的值。<input>为此，我应该只指定要用于存储该值的范围内的属性名称。所以改变ng-model说只是email代替myForm.email是解决方法。然后范围的email属性将包含一个字符串，该字符串是在字段中输入的值（当它有效时）。

于 2013-08-01T20:58:38.913 回答