What is AngularJS
Form| How to use
AngularJS Form is a collection of
controls with data binding and validation of input controls.
Input controls are ways for a user to
enter data.
input controls in AngularJS forms:
- input elements
- select elements
- button elements
- radio buttons elements
- checkbox elements
- textarea elements
Data-Binding
By using the ng-model directive, you
can perform data bind Input controls
<input type="text" ng-model="username"
name="username">
Below are list of events that
associated with the different HTML input elements in AngularJS:
- ng-click
- ng-dbl-click
- ng-change
- ng-keypress
- ng-keyup
- ng-keydown
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
Example:-
Following is the AngularJS Form example with controls with validation
<div ng-app="myapp" ng-controller="employeeController"> <div class="container"> <div class="col-sm-8 col-sm-offset-2"> <div class="page-header"><h1>AngularJS Form with controls with validation</h1></div> <!-- FORM :Disabeling HTMLS5 validatoin by using "novalidate" attribute --> <form name="registrationForm" ng-submit="submitForm()" novalidate> <!-- Employee Name --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.name.$invalid && (registrationForm.name.$dirty || submitted)}"> <label>Name</label> <input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Enter Employee Name" ng-required="true"> <p ng-show="registrationForm.name.$error.required && (registrationForm.name.$dirty || submitted)" class="help-block">Employee name is required.</p> </div> <!-- Employee username --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.username.$invalid && (registrationForm.username.$dirty || submitted)}"> <label>Username</label> <input type="text" name="username" class="form-control" ng-model="user.username" placeholder="Enter Employee Username" ng-minlength="3" ng-maxlength="8" ng-required="true"> <p ng-show="registrationForm.username.$error.required && (registrationForm.username.$dirty || submitted)" class="help-block">Username is required.</p> <p ng-show="registrationForm.username.$error.maxlength && (registrationForm.username.$dirty || submitted)" class="help-block">Username is too long.</p> <p ng-show="registrationForm.username.$error.minlength && (registrationForm.username.$dirty || submitted)" class="help-block">Username is too short.</p> </div> <!-- password --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.password.$invalid && (registrationForm.password.$dirty || submitted)}"> <label>Password</label> <input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true"> <p ng-show="registrationForm.password.$error.required && (registrationForm.password.$dirty || submitted)" class="help-block">Your password is required.</p> </div> <!-- confirm password --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.confirmPassword.$invalid && (registrationForm.confirmPassword.$dirty || submitted)}"> <label>Confirm Password</label> <input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true"> <p ng-show="registrationForm.confirmPassword.$error.required && (registrationForm.confirmPassword.$dirty || submitted)" class="help-block">Your confirm password is required.</p> <p ng-show="registrationForm.confirmPassword.$error.compare && (registrationForm.confirmPassword.$dirty || submitted)" class="help-block">Confirm password doesnot match.</p> </div> <!-- email --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.email.$invalid && (registrationForm.email.$dirty || submitted)}"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true"> <p ng-show="registrationForm.email.$error.required && (registrationForm.email.$dirty || submitted)" class="help-block">Email is required.</p> <p ng-show="registrationForm.email.$error.email && (registrationForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p> </div> <!-- contactno --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.contactno.$invalid && (registrationForm.contactno.$dirty || submitted) }"> <label>Contact Number</label> <input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Your Contact No" ng-pattern="/^[98]\d{9}$/" maxlength="10"> <p ng-show="registrationForm.contactno.$error.pattern && (registrationForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contact number.</p> </div> <!-- country --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.country.$invalid && (registrationForm.country.$dirty || submitted)}"> <label>Country</label> <select name="country" class="form-control" ng-model="user.country" ng-options="country.CountryId as country.Name for country in countryList" ng-required="true"> <option value=''>Select</option> </select> <p ng-show="registrationForm.country.$error.required && (registrationForm.country.$dirty || submitted)" class="help-block">Select country.</p> </div> <!-- city --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.city.$invalid && (registrationForm.city.$dirty || submitted)}"> <label>City</label> <select name="city" class="form-control" ng-model="user.city" ng-options="city.CityId as city.Name for city in cityList" ng-required="true"> <option value=''>Select</option> </select> <p ng-show="registrationForm.city.$error.required && (registrationForm.city.$dirty || submitted)" class="help-block">Select city.</p> </div> <!-- terms & conditions --> <div class="form-group" ng-class="{ 'has-error' : registrationForm.terms.$invalid && (registrationForm.terms.$dirty || submitted)}"> <label>Accept Terms & Conditions</label> <input type="checkbox" value="" name="terms" ng-model="user.terms" ng-required="true" /> <p ng-show="registrationForm.terms.$error.required && (registrationForm.terms.$dirty || submitted)" class="help-block">Accept terms & conditions.</p> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> <br /> </div>
AngularJS Code
<script> //defining module var myapp = angular.module('myapp', []); // create angular controller myapp.controller('employeeController', function ($scope) { $scope.countryList = [ { CountryId: 1, Name: 'India' }, { CountryId: 2, Name: 'USA' }, { CountryId: 3, Name: 'AU' }]; $scope.cityList = []; $scope.$watch('user.country', function (newVal, oldVal) { if (newVal == 1) $scope.cityList = [ { CountryId: 1, CityId: 1, Name: 'Noida' }, { CountryId: 1, CityId: 2, Name: 'Chandigarh' }, { CountryId: 1, CityId: 3, Name: 'Gurgaon' }, { CountryId: 1, CityId: 4, Name: 'Lucknow' }, { CountryId: 1, CityId: 5, Name: 'Delhi' }]; else if (newVal == 2) $scope.cityList = [ { CountryId: 2, CityId: 6, Name: 'Washington' }, { CountryId: 2, CityId: 7, Name: 'Texas' }, { CountryId: 2, CityId: 8, Name: 'Franklin' }, { CountryId: 2, CityId: 9, Name: 'NewYork' }]; else if (newVal == 3) $scope.cityList = [ { CountryId: 3, CityId: 10, Name: 'Brisbane' }, { CountryId: 3, CityId: 11, Name: 'Perth' }, { CountryId: 3, CityId: 12, Name: 'Adelaide'}, { CountryId: 3, CityId: 13, Name: 'Sydney' }]; else $scope.cityList = []; }); $scope.submitForm = function () { $scope.submitted = true; if ($scope.registrationForm.$valid) { alert("Form is valid!"); } else { alert("Please correct errors!"); } }; }); //creating custom directive myapp.directive('ngCompare', function () { return { require: 'ngModel', link: function (scope, currentEl, attrs, ctrl) { //getting first element var comparefield = document.getElementsByName(attrs.ngCompare)[0]; compareEl = angular.element(comparefield); //current field key up currentEl.on('keyup', function () { if (compareEl.val() != "") { var isMatch = currentEl.val() === compareEl.val(); ctrl.$setValidity('compare', isMatch); scope.$digest(); } }); //Element to compare field key up compareEl.on('keyup', function () { if (currentEl.val() != "") { var isMatch = currentEl.val() === compareEl.val(); ctrl.$setValidity('compare', isMatch); scope.$digest(); } }); } } }); </script>
You can try on below
