In AngularJS, forms are typically handled using the <form> tag. However, Angular also provides the ng-form directive, which allows you to create nested forms and prevent default form submissions. This is particularly useful when you want to manage form validation without actually submitting the data to a server.
Why Use ng-form?
Prevents page reloads caused by default form submission
Supports nested forms inside another form
Works well with AngularJS form validation ($valid, $invalid, etc.)
Ideal for handling partial forms inside larger forms
Topics Covered
- What is
ng-form? - Basic Example of Preventing Form Submission
- Using
ng-submitwithng-form - Nested Forms with
ng-form - Disabling the Submit Button Until Form is Valid
- Conclusion
1. What is ng-form?
The ng-form directive behaves just like the standard <form> tag, but it does not trigger a default page reload when submitted. Instead, AngularJS controls the form handling logic.
Syntax:
htmlCopyEdit<ng-form name="formName">
<!-- Form fields go here -->
</ng-form>
2. Basic Example of Preventing Form Submission
By default, pressing Enter in an input field inside a standard <form> tag submits the form and refreshes the page. To prevent this, we use ng-form.
Example:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="FormController">
<ng-form name="userForm">
<label>Username:</label>
<input type="text" name="username" ng-model="user.username" required>
<button type="submit">Submit</button>
</ng-form>
</body>
</html>
How It Works:
The form won’t submit or refresh the page when the user presses Enter.
ng-form prevents default browser submission behavior.
3. Using ng-submit with ng-form
To handle form submission manually, use ng-submit and prevent the default action.
Example:
<ng-form name="userForm" ng-submit="submitForm()">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<button type="submit">Submit</button>
</ng-form>
<script>
var app = angular.module('myApp', []);
app.controller('FormController', function ($scope) {
$scope.user = {};
$scope.submitForm = function () {
alert("Form submitted with: " + $scope.user.email);
};
});
</script>
How It Works:
The form does not reload the page when submitted.
The submitForm() function handles submission manually.
4. Nested Forms with ng-form
In some cases, you may have a larger form with multiple sub-sections, each with its own validation. ng-form allows you to handle each section separately.
Example: Nested Forms
<ng-form name="mainForm">
<h2>Personal Details</h2>
<ng-form name="personalForm">
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required>
<p ng-show="personalForm.name.$touched && personalForm.name.$invalid" style="color:red;">
Name is required.
</p>
</ng-form>
<h2>Account Details</h2>
<ng-form name="accountForm">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<p ng-show="accountForm.email.$touched && accountForm.email.$invalid" style="color:red;">
Enter a valid email.
</p>
</ng-form>
<button type="submit" ng-disabled="mainForm.$invalid">Submit</button>
</ng-form>
How It Works:
Each section (Personal Details and Account Details) has its own validation.
The main form is valid only if both nested forms are valid.
Improves user experience by breaking validation into smaller sections.
5. Disabling the Submit Button Until Form is Valid
To ensure users cannot submit an invalid form, disable the button using $valid.
Example:
<ng-form name="userForm" ng-submit="submitForm()">
<label>Phone Number:</label>
<input type="text" name="phone" ng-model="user.phone" required>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</ng-form>
How It Works:
Button remains disabled until the form is valid.
Prevents users from submitting incomplete or incorrect data.