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 有自己的 for 指令<form>，因此理解如果它看到一个表单，它应该将一个对象添加到名称相同的当前作用域。在这种情况下emailForm。因此，在控制器中，您将email字段寻址为$scope.emailForm.email.

因为，您正在专门寻找required您也可以使用它：

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