AngularJS ng-class not applying bootstrap error classes

Question

I'm building a multi-step AngularJS form that adds bootstrap error classes on ng-class. I'm using this tutorial as my base for building the form http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router#building-our-angular-app-app.js.

Question: Why are my ng-class css classes not being applied to my form-group wrapper when child fields are invalid? My submit button stays disabled until form fields are correct, but error classes and styling never gets applied.

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>

Josh · Accepted Answer · 2014-10-21 01:13:09Z

1

In this particular case it's actually really simple.

You have the name of your input as FullName, but you are referencing it as fullName.

The property names published on the form controller are case sensitive, so just change the case of either:

name="FullName" to name="fullName"

OR

longForm.fullName to longForm.FullName

answered Oct 21, 2014 at 1:13

Josh

45k7 gold badges106 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JoseM Over a year ago

I'm also not sure if the class names in ng-class should be specified together like that

Josh Over a year ago

@JoseM - They actually can. It's just a JavaScript property name at the end of the day, and spaces in the middle of JavaScript properties is 100% legal :)

Josh Over a year ago

@JasonSpence - No problem man :) Admittedly the form stuff is really easy to get mixed up on due to all the repetition.

Collectives™ on Stack Overflow

AngularJS ng-class not applying bootstrap error classes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related