コントローラーによってすぐに読み込まれるフォーム/モデルで AngularJS の検証に問題があります。フォームは部分的に正しくない検証状態で読み込まれます。正しい検証状態に戻す唯一の方法は、実際の無効な状態に入ることです。もう 1 つの回避策は、フォームのモデルを 1 ミリ秒の遅延で設定することです。ここでこの機能を説明する jsFiddle を作成しました: http://jsfiddle.net/YAuxm/4/
より明確にするために、有効な値で初期化された必須としてマークされたプロパティでは、フォームと入力の両方が有効として正しくマークされますが、ラッピング div は無効としてマークされます。値を変更しても、値が実際に無効になる (つまり、空になる) までは効果がありません。フィールドが適切に無効化されると、ルートが変更されるまで、後続のすべての変更が適切に検証されます。変更された場合、動作はここで説明したものに戻ります。
以下は、jsFiddle に投稿された例の短縮版です。
<div ng-app="Test">
<script type="text/ng-template" id="Templ">
<ul style="width:20%; float:left;">
<li ng-repeat="item in Items">
<a href="#/edit/{{item.Id}}">Edit {{item.Name}}</a>
</li>
</ul>
<form name="editor" ng-show="CurrentItem">
<!-- this evaluates to true on initial load even when the value is valid -->
<div ng-class="{error: editor.ItemName.$invalid}">
<input type="text" name="ItemName" ng-model="CurrentItem.Name" required />
</form>
</script>
<div ng-view></div>
</div>
<script type='text/javascript'>
var items = [{Id: 0, Name: 'Item 1', SomeNumber: 100},
{Id: 1, Name: 'Item 2', SomeNumber: 200},
{Id: 2, Name: 'Item 3', SomeNumber: 300}];
angular.module('Test', []).
config(function($routeProvider) { $routeProvider.
when('/edit/:itemIndex', { controller: TestCtrl, templateUrl: 'Templ' }).
otherwise({ redirectTo: '/edit/0' });
});
function TestCtrl($scope, $location, $routeParams) {
$scope.Items = items;
$scope.CurrentItem = $scope.Items[$routeParams.itemIndex];
}
</script>