show validation error messages on submit in angularjs

Question

I have a form which need to show validation error messages if clicked submit.

Here is a working plunker

Answer 1

A complete solution to the validate form with angularjs.

HTML is as follows.

        
            

                  Area Name : 
                  

                      
                       Field is required
                  
            
             

                  Submit
             
        
    

AngularJS App and Controller is as follows

var areaApp = angular.module('areaApp', []); 
areaApp.controller('addCtrler', function ($scope) {
    $scope.submitAreaInfo = function () {  
       if ($scope.fareainfo.$valid) {
         //after Form is Valid
       } else {
          $scope.fareainfo.$setSubmitted();
       }
    };
});

---

Important Code Segments

1. ng-app="areaApp" ng-controller="addCtrler"
   Defines the angular app and controller

2. ng-show="(fareainfo.$submitted || fareainfo.name.$dirty) && fareainfo.name.$error.required"
   Above condition ensure that whenever a user first sees the form there's no any validation error on the screen and after a user does changes to the form it ensure that validation message show on the screen. .name. is the name attribute of the input element.

3. $scope.fareainfo.$valid
   Above code, segment check whether the form is valid whenever a user submits the form.

4. $scope.fareainfo.$setSubmitted();
   Above code, segment ensures that all validation messages are displayed on the screen whenever a user submits the form without doing anything.