Questions And Answers

More Tutorials

Angular Basic Form Validation

One of Angular's strength's is client-side form validation.Dealing with traditional form inputs and having to use interrogative jQuery-style processing can be time-consuming and finicky. Angular allows you to produce professional interactive forms relatively easily.

The ng-model directive provides two-way binding with input fields and usually the novalidate attribute is also placed on the form element to prevent the browser from doing native validation.

Thus, a simple form would look like:

<form name="form" novalidate>
 <label name="email"> Your email </label>
 <input type="email" name="email" ng-model="email" />

For Angular to validate inputs, use exactly the same syntax as a regular input element, except for the addition of the ng-model attribute to specify which variable to bind to on the scope. Email is shown in the prior example. To validate a number, the syntax would be:

<input type="number" name="postalcode" ng-model="zipcode" />

The final steps to basic form validation are connecting to a form submit function on the controller using ng-submit, rather than allowing the default form submit to occur. This is not mandatory but it is usually used, as the input variables are already available on the scope and so available to your submit function. It is also usually good practice to give the form a name. These changes would result in the following syntax:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
 <label name="email"> Your email </label>
 <input type="email" name="email" ng-model="email" />
 <button type="submit">Signup</button>

This above code is functional but there is other functionality that Angular provides.

The next step is to understand that Angular attaches class attributes using ng-pristine, ng-dirty, ng-valid and nginvalid for form processing. Using these classes in your css will allow you to style valid/invalid and pristine/dirty
input fields and so alter the presentation as the user is entering data into the form.


In this page (written and validated by ) you learned about AngularJS Basic Form Validation . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Custom Form Validation.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.