Question

我在AngularJS中添加反馈按钮有一个小问题。 has-error有效，但当我添加has-feedback时，我没有得到任何反馈回复，但has-error仍有效。

我认为添加has-feedback的方式有问题，但我不确定。

    <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>

更新1

当我添加以下课程时，我可以看到一个图标但是如果与表格同步并且可能不正确的方式它就完全没了：

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

Answer 1

所以我找到的最佳解决方案如下：

       <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>

我还在另一个答案中使用Adding multiple class using ng-class作为示例提供。我希望我能节省一些时间来讨论这个话题。

在angularjs中添加bootstrap反馈图标

1 个答案: