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 ディレクティブは最初は正しく (「無効」と「初期」を表示)、フィールドに入力し始めるとすべて消えます。私が知る限り、ドキュメントが示すようにこれを行っているので、何が問題なのですか?