如何在Angular js中放置ngshow消息

Question

如何在文本框旁边而不是文本框下方显示ng-show消息。 现在，它在输入框下方显示所有验证消息。

<!DOCTYPE html>
<html ng-app="myApp" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script>
            "use strict";
            var app = angular.module('myApp', []);

            app.controller('MainCtrl', function ($scope) {
                $scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
                $scope.submit = function ($event) {
                    if ($scope.myForm.$invalid) {
                        // Or some other update
                        $scope.myForm.$submitted = true;
                        $event.preventDefault();
                    }
                };
            });
            app.directive('uniqueUsername', function ($http) {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    link: function (scope, element, attrs, ngModel) {
                        element.bind('blur', function (e) {
                            ngModel.$setValidity('unique', true);

                            $http.post('CheckUserName2.do').success(function (data) {
                                if (data) {
                                    ngModel.$setValidity('unique', false);
                                }
                            });
                        });
                    }
                };
            });
        </script>
    </head>
    <body ng-controller="MainCtrl">
        <div class="container">
            <div class="col-md-6 col-md-offset-0">
                <div class="panel panel-login">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="text-muted">Registration form</h2>
                                <div>
                                    <form name="myForm" action="RegistrationServlet.do" method="POST" >
                                        First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/>
                                        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
                                        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
                                        <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
                                        <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

这是pl子

Answer 1

您在右边没有空间在输入框旁边显示错误消息。 将错误消息放在“提交”按钮上方将导致一个较小的UI问题：每次出现错误时，表单的“提交”按钮将垂直闪烁。 即 -提交表单，而无需输入任何输入以获取错误消息。 -在输入框中键入/擦除任何字符以查看闪烁

解决方法：

要么将错误消息保留在“提交”按钮下方，要么为错误消息提供专用的高度，以避免产生不良影响，或者同时

  <form name="myForm" action="RegistrationServlet.do" method="POST" >
      First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/><br><br>
      <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
      <div style="height=100px">
        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
        <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
        <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
      </div> 
  </form>

演示