Question

这是AngularJS中的正常行为吗？只有当该表单元素的验证状态发生更改时（尝试在小提琴中键入有效的电子邮件），才能正确计算与FORM相关的ng-class表达式并在FORM（或INPUT）标记之前引用。三个相同的H2-s在标签之前显示不同的表达式计算，并在电子邮件输入编辑之后显示正确的值（注意{{TestForm.Email。$ valid}}在两种情况下都显示正确的值）：

JSFiddle：http://jsfiddle.net/nEzpS/26/

HTML:
<div ng-controller="TestController">

    <h2 class="someInitialClass" ng-class="TestForm.Email.$valid && 'classOK' || 'classError'">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h1>

    <form name="TestForm" ng-submit="formSubmit()">

         <input type="email" class="input-xlarge" maxlength="100"
                             name="Email" 
                             ng-model="Client.Email" 
                             ng-required="true" ng-maxlength="100"
        >

    </form>

    <h2 class="someInitialClass" ng-class="TestForm.Email.$valid && 'classOK' || 'classError'">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h1>

    <br/><br/>

    <ul ng-repeat="FormItem in TestForm">
        <li>{{$index}} {{FormItem.$error}}
        </li>
    </ul>

    <br/><br/>

</div>

JS:
function TestController($scope) {

}

CSS:
.someInitialClass {
    font-family: Helvetica;
}

.classError {
    color:red;
}

.classOK {
    color: green;
}

Answer 1

那有点奇怪。

要根据表单状态获取表单验证消息的一致行为，您可能需要使用ngPristine检查表单。 Like this

    <h2 class="someInitialClass" ng-class="!TestForm.$pristine && (TestForm.Email.$valid && 'classOK' || 'classError')">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h2>

要了解表单状态的工作原理，请参阅本杰明Lesh's post

顺便说一下，截至目前，没有API可以将表单设置为原始状态。它是1.2

的路线图

AngularJS在<form>标记</form>之前的表单项验证属性

1 个答案: