How do I check form validity with angularjs?

81

I'm very new to angularjs. Say my app has a form. Using the inspector, I noticed that if angularjs thinks that the form is invalid, it adds an ng-invalid class to the form. Lovely.

So it seems that in order to check if the form is valid I need to pollute my code with Jquery selector?! What is the angularjs way to indicate form validity without using a form controller?

This question is tagged with angularjs

~ Asked on 2013-01-13 01:40:09

The Best Answer is


150

When you put <form> tag inside you ngApp, AngularJS automatically adds form controller (actually there is a directive, called form that add nessesary behaviour). The value of the name attribute will be bound in your scope; so something like <form name="yourformname">...</form> will satisfy:

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

So to check form validity, you can check value of $scope.yourformname.$valid property of scope.

More information you can get at Developer's Guide section about forms.

~ Answered on 2013-01-13 02:25:04


36

Example

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

~ Answered on 2014-10-01 10:18:53


Most Viewed Questions: