ng-消息没有正确显示消息

Question

我正在使用 Angular 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>

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

谁能帮我验证我失踪的地方？

Answer 1

同时使用dirty和error valid，

 <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

Answer 2

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

Answer 3

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>