- AngularJS provides form validation using $invalid and $valid tag.
- These $invalid and $valid tags are Boolean in nature.
- In this Demo,"We will create button with 2 required input field. The submit button will be disabled and text color is red if form is invalid.Once the form is valid the submit button become active and color of the text green".
- If ng-disabled built-in directive takes the value from these flags and controls the submit button.
- Below code shows the demo code link in JSBIN.
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js">
</script>
<meta charset="utf-8">
<title>AngularJS Form Validation Example</title>
</head>
<body ng-controller="FormController">
<form name="userForm" class="userForm" novalidate>
<input type="text" ng-model="user.name"
placeholder="Enter your name"
name="name" required><br/>
<input type="email" ng-model="user.email"
placeholder="Enter your email"
name="email" required><br/>
<button type="submit" class="submit" ng-disabled="userForm.$invalid">
Submit
</button>
</form>
<script>
var studentApp = angular.module("studentApp",[]);
//Using controller
studentApp.controller("FormController",
function ($scope) {});
</script>
</body>
</html>
- Output of the above code is present below with embedded JSBIN.
