当输入字段中出现错误时，ng-class不会添加has-error

Question

我正在尝试执行简单的表单验证。我在我的字段和ng-messages上使用required和ng-minlength条件来显示错误消息。仅当用户访问输入字段时才会显示错误消息。但我没有看到任何错误消息出现。当我使用chrome开发人员工具进行检查时，我发现输入字段上的类正在发生变化，但是没有在检查此情况的其他div元素上添加“has-error”类。

这是应用程序加载的时候。

这是当我点击用户名字段并离开字段而不提供任何数据时。请注意红色框中标记的元素类别。我没有收到任何错误。问题可能是什么？

1这是我正在使用的ng-messages代码段

<form role="form" name="userForm" novalidate class="container-fluid">
              <div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
                <label for="email">username</label>
                <input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" required ng-minlength="4">
                <div ng-messages='userExists'>
                   <div ng-message='error'>Error!</div>
                   <div class="form-group" ng-message='notAvailable' class="has-error">Username already exists. Please choose a different username!!</div>
               </div>

               <div class="help-block" ng-messages="userForm.username.$error" ng-show="userForm.username.$touched" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
                  <div class="form-group" ng-message='required' class="has-error">Username cannot be empty</div>
                  <div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
              </div>
                </div>

Answer 1

在发布源代码后编辑：

<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
    <label for="email">username</label>
    <input class="form-control" type="text" placeholder="UserName" name="username"  ng-blur="checkingUser($event)" ng-model="username" ng-required="true" ng-minlength="4">

    <div ng-messages='userExists'>
        <div ng-message='error'>Error!</div>
        <div class="form-group has-error" ng-message='notAvailable' >Username already exists. Please choose a different username!!</div>
    </div>

    <div ng-messages="userForm.username.$touched && userForm.username.$error" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
        <div class="form-group has-error" ng-message='required'>Username cannot be empty</div>
        <div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
    </div>
</div>

这适用于我的机器。

在您提交表单后，该消息将显示为。

确保在模块中添加了必需的依赖项以使用ngMessage。如有必要，请发布AngularJS代码。