javascript - AngularJS ng-class 不应用 Bootstrap 错误类

Question

我正在构建一个多步骤 AngularJS 表单，在 ng-class 上添加 Bootstrap 错误类。我使用本教程作为构建表单 http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router#building-our-angular-app-app.js 的基础.

问题:当子字段无效时，为什么我的 ng-class css 类没有应用于我的表单组包装器？在表单字段正确之前，我的提交按钮保持禁用状态，但错误类和样式永远不会应用。

HTML

<div class="form-group" ng-class="{'has-error has-feedback' : longForm.fullName.$invalid && !longForm.fullName.$pristine}">
  <label class="hidden-xs" for="FullName">Full Name</label>
  <input class="form-control input-lg" type="text" name="FullName" placeholder="Your Full Name" ng-model="longFormData.fullName" required />
</div>
<div class="form-group">
  <button class="btn btn-cta btn-lg btn-block" type="submit" ng-disabled="longForm.$invalid">Next</button>
</div>

Answer 1

在这种特殊情况下，它实际上非常简单。

您将输入的名称设为 FullName，但您将其引用为 fullName。

在表单 Controller 上发布的属性名称是区分大小写的，因此只需更改其中任何一个的大小写即可:

name="FullName" 到 name="fullName"

或

longForm.fullName 到 longForm.FullName