Question

我正在努力进行AngularJS验证。这是我在HTML 5中的SSCCE（由于我的服务器端框架，它必须是有效的XML）：

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指令开始正确（显示“无效”和“原始”）但是一旦我开始在字段中键入，所有指令都会消失。据我所知，我这样做documentation表明，那有什么不对？

Answer 1

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

Ahmad要求的澄清：表达式myForm.email是指由AngularJS创建的对象，用于表示email形式的myForm字段。它不是字段的实际值，这是您应该放在ng-model元素的<input>属性中的值。为此，我应该在范围中指定要用于存储该值的属性的名称。因此，修改ng-model仅改为email而不是myForm.email。范围的email属性将包含一个字符串，该字符串是在字段中输入的值（当它有效时）。

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

1 个答案: