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-class。我试过电子邮件。$有效，电子邮件。$无效和电子邮件。$错误。除了登录到控制台之外，控制器不执行任何操作，因此我知道它已被调用。当我设置$scope.email = 'asd@asd.com'硬编码时，它设置正确。

当我没有输入任何值或无效字符串时，为什么我的ng-class不适用？

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>

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

因为，你专门寻找required，你也可以使用它：

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

ng-class未应用

1 个答案: