What is AngularJS Form

What is AngularJS Form| How to use  AngularJS Form controls and events

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