Angular Form Validation Example

In this post, we will see how Angular form validation works. Earlier we looked into angular form and controls.

Angular Form Validation

AngularJS makes it easy to handle client-side form validations without much effort. In next sections we will look into some Angular form validation example.

Angular Form Validation – input

Following are some of the basic angular form validation options available for an input field.

    1. required

Adding required html5 tag to an input field validates whether the field is empty or not. This ensures that the field should have some value. The following syntax is used for required with input.

AngularJS provides a ng-required directive to do the same thing. Using this directive you have the flexibility to set the input field should have a value or not.

The following syntax is used to make sure that the input field should not be empty. We can set it to false if you do not want to restrict this.

    1. Minimum Length

The directive ng-minlength is used to validate the minimum length of the input value.  This will make sure that the length of the entered value not less than the value set using ng-minlength directive.

    1. Maximum Length

The directive ng-maxlength is used to validate the maximum length of the input value.  This will make sure that the length of the entered value is not more than the value set using ng-max length directive.

    1. Pattern

The ng-pattern directive is used to ensure that an input matches a regex pattern, the following syntax is used.

    1. Email

We can set the input type to email to ensure that the input field is a valid email id.

    1. Number

We can set the input type to number to ensure that the input field is a number.

    1. URL

We can set the input type to url to ensure that the input field is a url.

Angular Form Validation Properties

Angular provides properties on forms to keep track of all its controls and nested forms as well as the state of them, such as being valid/invalid or dirty/pristine. The following table describes those properties and corresponding angular classes that help us to validate forms.

Property Class Description
$valid ng-valid Boolean True if all of the containing forms and controls are valid.
$invalid ng-invalid Boolean True if at least one containing control or form is invalid.
$pristine ng-pristine Boolean True if user has not interacted with the form yet.
$dirty ng-dirty Boolean True if user has already interacted with the form.
$touched ng-touched Boolean True if the input has been blurred.
$submitted ng-submit Boolean True if user has submitted the form even if its invalid.

Angular Form Validation Using CSS Classes

While handling forms angularJS adds specific classes to the form based upon their state. To allow styling of form as well as controls, ngModel adds these CSS classes:

  • ng-valid
  • ng-invalid
  • ng-pristine
  • ng-dirty
  • ng-touched
  • ng-untouched
  • ng-pending

The following example uses the following CSS to display validity of each form control.

You have to add the required attribute with input field otherwise it will not validate correctly. You should also include novalidate attribute to disable the browser’s native form validation.

We have disabled the submit button if the form input is invalid. Following code shows how we used in our application.

The following script defines the controller used in our application.

app.js

You will see the following output on your browser. In the example both employee.name and employee.email are required, but are rendered with red background only after the input is out of focus.

Angular Form Validation Using $error property

AngularJS provides another property called $error , is an object hash, containing references to controls or forms with failing validators, where its keys are validation tokens (error names) and values are arrays of controls or forms that have a failing validator for given error name.
The following list shows the Built-in validation tokens:

  • email
  • max
  • maxlength
  • min
  • minlength
  • number
  • pattern
  • required
  • url
  • date
  • datetimelocal
  • time
  • week
  • month

The following angular form validation example shows form validation using $error property.
The following syntax is used to validate the input field using $error property – formName.inputFieldName.$error.validateToken

Angular Form Validation Example

app.js

You will see the following output on your browser.

That’s all for angular form validation example, we will see more interesting posts in the coming series.

By admin

Leave a Reply