Error messages are not shown on clicking submit button using angular validation

Question

I am working on angular form validations. Apart from rest of the validations, I also want that if we submit the form without touching any field, then all error messages should be shown in form.Here I am using below code in name field so that if we click on submit button without touching name field then error in name field should be shown with red border but it is not working-

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

    <label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$invalid && (myForm.submitted  || myForm.name.$touched )">Name</label>
                       <label class="error_message_text" ng-show="myForm.name.$invalid && (myForm.submitted  || myForm.name.$touched )">
                            Please enter the name
                        </label><br>
    <input type="text" name="name" class="form-control" ng-class="" ng-model="user.name" required/>

</div>

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

Can anyone tell me how I will achieve the validation error messages with red border on clicking submit button?

krutkowski86 krutkowski86 · Accepted Answer · 2016-07-19T11:13:18

Instead of myForm.submitted use myForm.$submitted

<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && (myForm.$submitted  || myForm.name.$touched ) }">
    <label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$invalid && (myForm.$submitted  || myForm.name.$touched )">Name</label>
    <label class="error_message_text" ng-show="myForm.name.$invalid && (myForm.$submitted  || myForm.name.$touched )">
        Please enter the name
    </label><br>
    <input type="text" name="name" class="form-control" ng-class="" ng-model="user.name" required/>
</div>

Error messages are not shown on clicking submit button using angular validation

1 Answers