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.
Syntax
<div ng-form="formName"></div>
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. |
<!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 = '[email protected]'; $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