Нг- сообщение не отображает сообщение должным образом

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

Используйте грязную и допустимую ошибку,

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

Посмотрите этот поршень, но я удалил ваш код проверки номера, который создавал проблемы во время необходимых проверок https://plnkr.co/edit/3m0zLJ2PhAruSFxStwmt?p=preview

Обновленный окончательный ответ - https://plnkr.co/edit/v65oGQaZ64nU25EhX2nz?p=preview

Answer 2

Это потому что вы добавили ng-show="myForm.num.$touched " в ваш контейнер сообщений об ошибках. $touched будет истинным, когда вы удалите фокус из поля ввода. Вот почему вы получаете сообщение об ошибке после нажатия снаружи.

Answer 3

Обновление 2 Демо

использование $dirty вместо $touched, Итак, ваш код должен выглядеть так:

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

Обновить

Number ярлык должен выглядеть так:

Число

Удалить если условие из numbersOnly директивы.

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