Adding bootstrap Feedback icons in angularjs

Question

I have a small problem with adding feedback buttons in AngularJS. The has-error works but when i add the has-feedback i do not get any feedback response but has-error still works.

I think there is something wrong with the way i added the has-feedback but i'm not sure.

    <div class="form-group" ng-class="{ 'has-error has-feedback': form.email.$dirty && form.email.$invalid }">

        <label for="email"> Email</label>
        <input type="text" ng-model="signup.email" ng-model-options="{ debounce: 500 }" name="email" id="email" class="form-control" required email-validator>


        <div  class="help-block" ng-messages="form.email.$error" ng-if="form.email.$dirty">
            <p ng-message="required">Your name is required.</p>
            <div ng-message="email" class="help-block" >email already in use</div>
        </div>

Update 1

When i add following class i can see a icon but it's completely out if sync with the form and probably not the right way:

                    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 `

check the generated HTML code if the class `has-feedback` has been added to the list of classes and check if the `has-feedack` has been defined in the css — Michael, Oct 06 '15 at 08:06
I think i forgot to load something but i have added this bower_components/bootstrap-css-only/css/bootstrap.min.css" and when i look in the classes in does contain the the has-feedback. But do i also need to import font awesome to get the icons? — Greg, Oct 06 '15 at 08:19

score 3 · Answer 1 · edited May 23 '17 at 12:31

So the best solution i found for this is following:

       <div class="form-group"  ng-class="{'has-error has-feedback': form.email.$dirty && form.email.$invalid, 'has-success has-feedback': form.email.$dirty && form.email.$valid  }">

            <label for="email"> Email</label>
            <input type="text" ng-model="signup.email" ng-model-options="{ debounce: 500 }" name="email" id="email" class="form-control" required email-validator>


            <div  class="help-block"  ng-messages="form.email.$error" ng-if="form.email.$dirty">
                <p ng-message="required">Your name is required.</p>
                <div ng-message="email" class="help-block" >email already in use</div>
            </div>

            <span ng-show="form.email.$dirty && form.email.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
            <span ng-show="form.email.$dirty && form.email.$invalid" class="glyphicon glyphicon-remove  form-control-feedback"></span>

        </div>

I also used Adding multiple class using ng-class as example provide in the other answer. I hope i save somebody some time on this topic..

Adding bootstrap Feedback icons in angularjs

1 Answers1