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値はちょうどだったはずemailです。

Ahmad の要求による明確化: 式は、フォーム内のフィールドmyForm.emailを表すために AngularJS によって作成されたオブジェクトを参照します。これは、要素の属性に入れることになっているフィールドの実際の値ではありません。そのためには、その値を格納するために使用するスコープ内のプロパティの名前を指定するだけです。そのため、代わりにjust と言うように変更するのが修正です。スコープのプロパティには、フィールドに入力された値である文字列が含まれます (有効な場合)。emailmyFormng-model<input>ng-modelemailmyForm.emailemail

于 2013-08-01T20:58:38.913 に答える