Angular Forms - LearnKode

AngularJS Forms

Form In Angular JS

A form is a collection of input controls for example textboxes, select lists, textareas, buttons, checkboxes etc. When define a form tag give a name to this form tag because by specifying name, the Angular JS Form controller published onto current scope under this name. With the help of this form name you can check the validation of the form. We will discuss about the Angular Validations in the next topic. Let's try with an example:

Angular-Form Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <form name="sampleForm">
            First Name :<input type="text" ng-model="firstName" />
            Last Name :<input type="text" ng-model="lastName" />
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

Try it » Download Example »

Output

In the above example we define a form with two textboxes one for first name and other for last name and a button for submit the data. Name of the form is “sampleForm” .

Form Validation

Angular JS forms provide the facility of validate the data,that means if user enter the invalid data it notify the user that data is invalid. Let's try with an example of how validation work:

Form-Validation Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <form name="sampleForm">
            <input type="text" ng-model="name" name="name" required />
            <span ng-show="sampleForm.name.$error.required" class="text-danger">This field is required !</span><br />

            Form Valid : {{sampleForm.$valid}}    <br />
            Form Invalid : {{sampleForm.$invalid}}    <br />

            Input Valid : {{sampleForm.name.$valid}}  <br />
            Input Invalid : {{sampleForm.name.$invalid}}  <br />

            Required Error : {{sampleForm.name.$error.required}}  <br />

            dirty : {{sampleForm.name.$dirty}}  <br />
            pristine : {{sampleForm.name.$pristine}}  <br />
        </form>
    </div>
</body>
</html>

Try it » Download Example »

Output

In the above example we have a input box and it is required. If user try to submit the form without filling data in this field it will show an error that "This field is required!". We can check that the form is valid or not as in the example {{ sampleForm.$valid }}, "sampleForm" is the name of the form {{ sampleForm.$valid }} is true if form is true means the form content is valid. The {{sampleForm.$invalid}} is true if form is invalid.

We can also check that the field’s content is valid or not. {{ sampleForm.name.$valid }} is true if field’s value is valid otherwise it is false. Here "name" {{ sampleForm.name.$valid }} is the name of the input field. {{ sampleForm.name.$invalid }} is true if field’s content is invalid otherwise false. Next is {{ sampleForm.name.$error.required }} it is true if field is required and empty. {{ sampleForm.name.$dirty }} is true if user has interact with the form data and {{sampleForm.name.$pristine}} is true if user has not interact with the form data.

Client- side validations alone are not more secure , you should also validate the data at server side.

novalidate form attribute

If you make the textbox required then in HTML 5 browser validations gets enable. If you want to disable the browser validation then simply write the novalidate attribute to the form tag. See how to use this form attribute.

Form-Novalidate Example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Welcome in the Angular JS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <form name="sampleForm" novalidate>
            First Name :<input type="text" ng-model="firstName" />
            Last Name :<input type="text" ng-model="lastName" />
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

Try it » Download Example »

Output

ng-Form

In the angular JS forms can be nested. However the browsers do not allow the nesting forms. In the Angular JS the ng-form directive behaves same as the form tag. This is very useful as somewhere in the application we need to validate only the inner form and submit the data of the inner form. The outer form is valid if all inner forms are valid.

« Previous