Question

我正在使用角度js进行验证，并尝试通过ng-message指令显示错误消息。但我的问题是，当我输入任何错误输入时，在我的表单中，它不会在第一时间显示消息，当我单击表单外的任何地方，然后只显示消息。我也希望当错误被删除时，原始标签应该出现。但是一旦显示错误消息，那么标签就不会出现在我的表单中。我使用下面的代码进行验证 -

<div class="form-group" ng-class="{ 'has-error' : myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched ) || myForm.num.$error.minlength || myForm.num.$error.maxlength || myForm.num.$error.pattern}">

    <label for="Number" style="color:#767676" class=""
           ng-hide="myForm.num.$invalid && (myForm.$submitted  || myForm.num.$touched || myForm.num.$error.minlength || myForm.num.$error.pattern)">Number</label>

    <div ng-show="myForm.num.$touched " ng-messages="myForm.num.$error">
        <label class="error_message_text" ng-message="required">required field</label>
        <label class="error_message_text" ng-message="minlength">too short</label>
        <label class="error_message_text" ng-message="pattern">wrong pattern</label>
    </div>
    <br>
    <input type="text" numbers-only name="num" class="form-control" ng-class="" ng-minlength="7" ng-maxlength="9"
           ng-model="user.name" ng-pattern="/^\d{7}$|^\d{9}$/" required/>

</div>

我在这里创造了一个傻瓜 - https://plnkr.co/edit/tYDdIs8ZhrdjSko68Wkh?p=preview

任何人都可以帮助我验证我失踪的地方吗？

Answer 1

这是因为您已将ng-show="myForm.num.$touched "添加到错误消息容器中。从输入字段中删除焦点时，$touched将为true。这就是您在外部点击后收到错误消息的原因。

Answer 2

Update 2 Demo

使用$dirty代替$touched。所以你的代码应该是这样的：

<div ng-show="myForm.num.$dirty " ng-messages="myForm.num.$error">

<强>更新

Number标签应如下所示：

数

从numbersOnly指令删除if条件。

.directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {

                    var transformedInput = text.replace(/[^0-9]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;  

            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };

使用以下代码显示验证消息：

<div ng-show="myForm.num.$dirty || myForm.$submitted" ng-messages="myForm.num.$error">
            <label class="error_message_text" ng-message="required">required field</label>
             <label class="error_message_text" ng-message="minlength">too short</label>
             <label class="error_message_text" ng-message="pattern">wrong pattern</label>
</div>

Answer 3

同时使用脏和错误有效，

 <div ng-show="myForm.num.$invalid && myForm.$submitted" ng-messages="myForm.num.$error">

请参阅此plunker，但我已删除了在必要的验证期间出现问题的号码验证码 https://plnkr.co/edit/3m0zLJ2PhAruSFxStwmt?p=preview

更新的最终答案 - https://plnkr.co/edit/v65oGQaZ64nU25EhX2nz?p=preview

ng-message未正确显示消息

3 个答案: