In this article I will explain with an example, how to disable Submit Button when INPUT Text Field (TextBox) is empty in AngularJS.
When using AngularJS Form validation, the $invalid property can be used to disable the Submit Button when Form is not filled (empty) i.e. the INPUT Text Fields (TextBoxes) have invalid data.
Disabling Submit Button when INPUT Text Field (TextBox) is empty in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The AngularJS app HTML DIV consists of an HTML Form with HTML TextBoxes (Text, Email and Number) to be validated, HTML SPAN elements for displaying the error message for Required, Email and Number validations and a HTML Button.
Form
ng-submit – The HTML Form has been assigned ng-submit AngularJS directive which has the expression MyForm.$valid which means the Form will be submitted only if the $valid property of the Form is TRUE.
novalidate – It is an HTML5 attribute which directs the Browser to disable the HTML5 validations for the particular Form.
TextBox (INPUT)
required – It is an HTML5 attribute which is used to specify that the TextBox cannot be kept empty during Form submission.
SPAN
ng-show – The ng-show AngularJS directive will make the HTML SPAN visible only when the expression to be tested returns TRUE.
$dirty – This Flag is initially FALSE and is TRUE when User has modified the content in the field.
The first HTML SPAN will be visible when the Required validation for the TextBox is failing while the second HTML SPAN will be visible when the Email or Number validation for the Email TextBox and Number TextBoxes are failing.
Submit Button
ng-disabled – The ng-disabled AngularJS directive will disable the Submit Button and enable only when the expression to be tested returns TRUE.
$invalid – The Submit Button will be enabled only if the $invalid property of the Form is FALSE.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<form name="MyForm" ng-submit="MyForm.$valid" novalidate>
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>Name:</td>
<td><input type="text" ng-model="Name" name="Name" required /></td>
<td>
<span class="error" ng-show="MyForm.Name.$dirty && MyForm.Name.$error.required">*Required</span>
</td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" ng-model="EmailAddress" name="Email" required /></td>
<td>
<span class="error" ng-show="MyForm.Email.$dirty && MyForm.Email.$error.required">*Required</span>
<span class="error" ng-show="!MyForm.Email.$error.required && MyForm.Email.$invalid">*Invalid Email Address</span>
</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" ng-model="Age" name="Age" required /></td>
<td>
<span class="error" ng-show="MyForm.Age.$dirty && MyForm.Age.$error.required">*Required</span>
<span class="error" ng-show="!MyForm.Age.$error.required && MyForm.Age.$invalid">*Only numerical value</span>
</td>
</tr>
<tr>
<td colspan="3">
<hr />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button type="submit" ng-disabled="MyForm.$invalid">
Submit</button>
</td>
</tr>
</table>
</form>
</div>
Screenshot
![AngularJS: Disable Submit Button when INPUT Text Field (TextBox) is empty]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
