Angularjs Examples

AJS Examples

AngularJS Form Validation

In AngularJS $invalid, $valid and $error property is used to validate form fields (input, textarea and select) client-side. Find AngulaJS ng-form Properties like $valid, $invalid, $dirty, $error from below list.


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

AngulaJS Form Validation Properties

$validIt is used to check inputs are valid or not.
$invalidIt is used to check inputs are invalid or not.
$pristineIt is used to check inputs are unmodified by the user or not.
$dirtyIt is used to check inputs are modified by the user or not. Its just revers of pristine.
$errorThis contains collection of invalid control's input, if a validation fail it return true, otherwise false.

AngularJS Form Validation Example

<!doctype html>
<html ng-app>  
<title>My first AngularJS ng-form Directive code</title>  
<script src="">  
   function formData($scope) {
   $scope.userName = 'Jimi Scotts';
   $ = '[email protected]';
   $scope.password = '1234';
.error {
  border: 1px solid #FF552A;
<form name="login" ng-controller="formData" novalidate>  
  <div ng-form="loginform">
    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.
  <p>Email : 
    <input type="email" name="email" ng-model="email" placeholder="Email ID" required/>  
    <div ng-show="$dirty &&$invalid">  
      <span class="error" ng-show="$error.required">
	  Email is required.
      <span class="error" ng-show="$">  
      Enter a valid email.

  <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.
  <button type="submit" ng-disabled="(login.loginform.userName.$dirty 
  && login.loginform.userName.$invalid)  
  || ($dirty &&$invalid) 
  || login.loginform.pass.$dirty 
  && login.loginform.pass.$invalid">Submit Form</button>  
See Live Example