Show red border for all invalid fields after submitting form angularjs

Question

I have a form in which I have some input fields. Some of them are required fields and some are email fields.

I am using HTML5

Answer 1

I have created a working CodePen example to demonstrate how you might accomplish your goals.

I added ng-click to the

and removed the logic from your button:

...

Here's the updated template:

  
    First Name
    

    First Name is required

    Last Name
    

    Last Name is required

    Email
    

    Email address is required
    Email address is not valid

      
  

and controller code:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

I hope this helps.