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。

表单控制器上发布的属性名称区分大小写，因此只需更改以下任一情况：

name="FullName"至name="fullName"

OR

longForm.fullName至longForm.FullName

AngularJS ng-class不应用bootstrap错误类

1 个答案: