1

AngularJS を使用してフォームを検証しようとしています。これは私のフォームです：

<form ng-controller="LoginCtrl" role="form" class="form-horizontal">
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: email.$invalid }" id="email">
        </div>
    </div>
</form>

ng-class は適用されません。email.$valid、email.$invalid、email.$error を試しました。コントローラーはコンソールへのログ記録以外は何もしないので、呼び出されていることがわかります。ハードコードを設定$scope.email = 'asd@asd.com'すると、正しく設定されます。

値を入力しないか無効な文字列を入力すると、ng-class が適用されないのはなぜですか?

4

1 に答える 1

4

フォーム名も修飾する必要があります。

<form ng-controller="LoginCtrl" name="emailForm" role="form" class="form-horizontal">
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input required type="email" name="email" ng-model="email" class="form-control" ng-class="{ error: emailForm.email.$invalid }" id="email">
        </div>
    </div>
</form>

Angular には独自のディレクティブがあるため<form>、フォームが表示された場合、同じ名前のオブジェクトを現在のスコープに追加する必要があることを理解しています。この場合emailForm。したがって、コントローラーでは、emailフィールドを としてアドレス指定します$scope.emailForm.email。

あなたは特に探しているので、これをrequired使うこともできます：

ng-class="{ error: emailForm.email.$error.required }"
于 2013-11-28T16:26:40.727 に答える