Table of Contents
hide
Introduction of Forms in AJS
- These are just some of the basic features of forms in AngularJS.
Definition of Forms in AJS
- In AngularJS, forms are an essential part of building interactive web applications.
- AngularJS provides powerful features for creating and managing forms, including data binding, validation, and submission handling.
Features of Forms in AJS
- With AngularJS’s form support, we can create complex, interactive forms with ease, handling validation, submission, and data binding efficiently.
Form’s Directives in AJS
- Here’s a brief overview of forms in AngularJS:
-
- ngModel Directive:
- AngularJS uses the
ngModeldirective to bind form controls to properties in the scope. - This allows for two-way data binding, meaning changes in the UI are reflected in the model and vice versa.
- For example: <input type=”text” ng-model=”username”>
- AngularJS uses the
- Form Control Directives:
- AngularJS provides various directives to work with form controls, such as
input,textarea,select, andcheckbox. - These directives can be combined with
ngModelto create interactive forms:-- <form>
<input type=”text” ng-model=”username” required>
<input type=”password” ng-model=”password” required>
<button ng-click=”login()”>Login</button>
</form>
- <form>
- AngularJS provides various directives to work with form controls, such as
- Validation:
- AngularJS supports both built-in and custom validation for form controls.
- We can use attributes like
required,minlength,maxlength,pattern, etc., to enforce validation rules. - AngularJS automatically adds CSS classes (
ng-valid,ng-invalid,ng-pristine,ng-dirty, etc.) to form controls based on their validity state:-- <form name=”myForm”>
<input type=”email” ng-model=”email” name=”email” required>
<div ng-show=”myForm.email.$error.required”>Email is required</div>
<div ng-show=”myForm.email.$error.email”>Invalid email format</div>
</form>
- <form name=”myForm”>
- Form Submission:
- AngularJS provides the
ngSubmitdirective to handle the form submission. - It allows us to execute functions defined in the controller when the form is submitted:-
- <form ng-submit=”submitForm()”>
<!– Form fields here –>
<button type=”submit”>Submit</button>
</form>
- <form ng-submit=”submitForm()”>
- AngularJS provides the
- Form Controller:
- AngularJS creates a form controller behind the scenes for each form using the
ngFormdirective. - This controller allows us to access form properties and methods programmatically from within your controller:-
- AngularJS creates a form controller behind the scenes for each form using the
- ngModel Directive:
angular.module(‘myApp’, [])
.controller(‘MyController’, function($scope) {
$scope.submitForm = function() {
if ($scope.myForm.$valid)
.controller(‘MyController’, function($scope) {
$scope.submitForm = function() {
if ($scope.myForm.$valid)
{
// Form is valid, submit data
}
// Form is valid, submit data
}
else
{
// Form is invalid, display error messages
}
};
});
// Form is invalid, display error messages
}
};
});
Program Examples of Forms in AJS
Example : A simple program of AJS Forms to display a message when entered into an input box.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<form>
Enter Your Value : <input type="text" ng-model="firstname">
</form>
<h1>The entered value is = {{firstname}}</h1>
</div>
</body>
</html>Example : A simple program of AJS Forms to display a message when checked a check box.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<form>
Select or Uncheck the Box to Show or Hide the Message:
<input type="checkbox" ng-model="chBox1">
</form>
<h1 ng-show="chBox1">Check Box Selected</h1>
</div>
</body>
</html>Example : A simple program of AJS Forms to display a message when Clicking a Radio Button.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<form>
Click a Radio Button:
<input type="radio" ng-model="switchVar" value="Lotus">Lotus
<input type="radio" ng-model="switchVar" value="Rose">Rose
<input type="radio" ng-model="switchVar" value="Marigold">Marigold
</form>
<div ng-switch="switchVar">
<div ng-switch-when="Lotus">
<h1>You Clicked Lotus Flower Choice</h1>
</div>
<div ng-switch-when="Rose">
<h1>You Clicked Rose Flower Choice</h1>
</div>
<div ng-switch-when="Marigold">
<h1>You Clicked Marigold Flower Choice</h1>
</div>
</div>
</div>
</body>
</html>Example : A simple program of AJS Forms to display a message when Selecting from a Combo or Drop-Down Box.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<form>
Select Single Choice from the List:
<select ng-model="switchVar">
<option value="">
<option value="Lotus">Lotus
<option value="Rose">Rose
<option value="Marigold">Marigold
</select>
</form>
<div ng-switch="switchVar">
<div ng-switch-when="Lotus">
<h1>You Selected Lotus Flower Choice from the List</h1>
</div>
<div ng-switch-when="Rose">
<h1>You Selected Rose Flower Choice from the List</h1>
</div>
<div ng-switch-when="Marigold">
<h1>You Selected Marigold Flower Choice from the List</h1>
</div>
</div>
</div>
</body>
</html>
0 Comments