0

这是AngularJS中的正常行为吗?与 FORM 相关并在 FORM(或 INPUT)标记之前引用的 ng-class 表达式只有在该表单元素的验证状态发生更改时才正确计算(尝试在小提琴中输入有效的电子邮件)。三个相同的 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;
}
4

1 回答 1

1

这有点奇怪。

要获得基于表单状态的表单验证消息的一致行为,您可能需要对表单使用 ngPristine 检查。像这样

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

要更好地了解表单状态的工作原理,请参阅 Benjamin Lesh 的帖子

顺便说一句,到目前为止,还没有 API 可以将表单设置为原始状态。它在 1.2 的路线图上

于 2012-12-29T06:41:11.493 回答