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>
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>