CODEWITHSUNDEEP
angularjsformsvalidationng-messages
Aanchal
Aanchal

Reputation: 173

ng- message is not displaying message properly

I am doing validation using angular js and trying to display error messages through ng-message directive. But my issue is that in my form when I enter any error input , it does not display message at first time and when I click anywhere outside the form then only its displaying messages.Also I want that when error is removed then original label should appear. But here once error message is shown , then label don't appear in my form. I am using below code for validation-

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

I have created a plunker here- https://plnkr.co/edit/tYDdIs8ZhrdjSko68Wkh?p=preview

Can anyone help me in my validation where I am missing?

Upvotes: 2

Views: 1091

Answers (3)

Shintu Joseph
Shintu Joseph

Reputation: 962

Use both dirty and error valid,

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

See this plunker,but I have removed your number validation code that made problems during required validations https://plnkr.co/edit/3m0zLJ2PhAruSFxStwmt?p=preview

Updated Final Answer- https://plnkr.co/edit/v65oGQaZ64nU25EhX2nz?p=preview

Upvotes: 1

Khalid Hussain
Khalid Hussain

Reputation: 1694

Update 2 Demo

Use $dirty instead of $touched. So your code should look like this:

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

Update

Number label should look like this:

Number

Remove if condition from numbersOnly directive.

.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);
        }
    };

Show validation message with following code:

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

Upvotes: 1

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

This is because you have added ng-show="myForm.num.$touched " to your error message container. The $touched will be true when you remove focus from an input field. That is why you are getting the error message after you are clicking outside.

Upvotes: 1

Related Questions