0

これは AngularJS の通常の動作ですか? FORM に関連し、FORM (または INPUT) タグの前に参照される ng-class 式は、そのフォーム要素の検証ステータスが変更された場合にのみ正しく計算されます (フィドルで有効な電子メールを入力してみてください)。タグの前に異なる式の計算を示し、電子メール入力編集後に正しい値を示す 3 つの同一の 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 に答える