不应用ng-class

Question

我正在尝试使用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类从未被应用过。我试过电子邮件。$有效，电子邮件。$无效和电子邮件。$错误。除了登录到控制台之外，控制器什么也不做，所以我知道它被调用了。但是，当我设置$scope.email = 'asd@asd.com'硬编码时，它的设置是正确的。

当我没有输入值或无效的字符串时，为什么不应用我的ng类？

Answer 1

您还必须使用表单名进行限定：

<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>

<form>有自己的指令，因此它明白，如果它看到一个表单，它应该将一个对象添加到命名相同的当前作用域。在这种情况下，emailForm。因此，在控制器中，您可以将email字段定位为$scope.emailForm.email。

由于您正在专门寻找required，所以您也可以使用以下内容：

ng-class="{ error: emailForm.email.$error.required }"