AngularJS Form Directive

The AngularJS ng-form directive is used to keep nested form while browser do not allow nesting of

elements.

Syntax

<div ng-form="formName"></div>

AngulaJS ng-form Properties

Property	Description
$valid	It is used to check inputs are valid or not.
$invalid	It is used to check inputs are invalid or not.
$pristine	It is used to check inputs are unmodified by the user or not.
$dirty	It is used to check inputs are modified by the user or not. Its just revers of pristine.
$error	This contains collection of invalid control's input, if a validation fail it return true, otherwise false.

AngularJS Form Directive Example

<!doctype html>
<html ng-app>  
<head>  
<title>My first AngularJS ng-form Directive code</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</script> 
 <script>
   function formData($scope) {
   $scope.userName = 'Jimi Scotts';
   $scope.email = 'jimi.s@aol.com';
   $scope.password = '1234';
   }
  </script>
<style>
.error {
  border: 1px solid #FF552A;
  color:#FF552A;
}
</style>
</head>  
<body>  
<form name="login" ng-controller="formData" novalidate>  
  <div ng-form="loginform">
    <p>
    User Name : 
    <input type="text" name="userName" ng-model="userName" placeholder="User Name" required/>  
    <div ng-show="loginform.userName.$dirty && loginform.userName.$invalid">  
      <span class="error" ng-show="loginform.userName.$error.required">
	  User name is required.
	  </span>  
    </div>  
    </p>
  <p>Email : 
    <input type="email" name="email" ng-model="email" placeholder="Email ID" required/>  
    <div ng-show="loginform.email.$dirty && loginform.email.$invalid">  
      <span class="error" ng-show="loginform.email.$error.required">
	  Email is required.
	  </span>
      <span class="error" ng-show="loginform.email.$error.email">  
      Enter a valid email.
	  </span>  
    </div>
  </p>

  <p>Password : 
    <input type="password" name="pass" ng-model="password" placeholder="Password" required/>  
    <div ng-show="loginform.pass.$dirty && loginform.pass.$invalid">  
      <span class="error" ng-show="loginform.pass.$error.required">
	  Password is required.
	  </span>  
    </div>
  </p>
  </div>  
  <button type="submit" ng-disabled="(login.loginform.userName.$dirty 
  && login.loginform.userName.$invalid)  
  || (login.loginform.email.$dirty && login.loginform.email.$invalid) 
  || login.loginform.pass.$dirty 
  && login.loginform.pass.$invalid">Submit Form</button>  
</form>   
</body>  
</html>

See Live Example

« Previous