Form validation in angularjs
Feb 28, 2017 by Pankaj Kumar
In this demo, we will discuss about the form validation in angular js. Since we all come across forms to send data to server and its needed to validate input from the user. So that desired value can be submitted from the form. Html also provide basic level of form-validation. Angular also provides is built in form validation. So let's start how form can be validated by angularjs.
Requirements of form fields
- Name is required
- Email is required with valid email address
- Password is required
- Password and confirm password should match
- Form submit is disabled if the form isn't valid
- Show a required or invalid email error
- city,zipcode,choose type & company is required
- Alert text if submitted correctly
These are the validation we have to implement in our form fields.
AngularJS includes the following validation directives.
| Directive | Description |
|---|---|
| ng-required | Sets required attribute on an input field. |
| ng-minlength | Sets minlength attribute on an input field. |
| ng-maxlength | Sets maxlength attribute on an input field. Setting the attribute to a negative or non-numeric value, allows view values of any length. |
| ng-pattern | Sets pattern validation error key if the ngModel value does not match the specified RegEx expression. |
State Properties Of Angularjs
Angular includes properties which return the state of form and input controls. The state of the form and control changes based on the user's interaction and validation errors. Below listed built-in properties can be accessed using form name or input control name. To check the form status use formName.propertyName, and to check the state of input control, use formName.inputFieldName.propertyName.
Lists the state properties.
| Property | Description |
|---|---|
| $error | $error object contains all the validation attributes applied to the specified element. |
| $pristine | Returns true if the user has not interacted with control yet else returns false. |
| $valid | Returns true if the model is valid |
| $invalid | Returns true if the model is invalid |
| $dirty | Returns true if user changed the value of model at least once |
| $touched | Returns true if the user has tabbed out from the control. |
| $untouched | Returns true if the user has not tabbed out from the control. |
Now let's have a look on demo code step by step. So have a look on the html form.
<form ng-submit="mainVm.addPerson(userForm.$valid)" name="userForm" novalidate>
<h1>Angular1 Form validation</h1>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Enter name" ng-model="mainVm.newPerson.name" required>
<div ng-messages="userForm.name.$error" class="has-error" ng-if="userForm.name.$dirty">
<p ng-message="required">Name is required</p>
</div>
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" name="email" class="form-control" placeholder="Email" ng-model="mainVm.newPerson.email" required>
<div ng-messages="userForm.email.$error" class="has-error" ng-if="userForm.email.$dirty">
<p ng-message="required">Email is required</p>
<p ng-message="email">Email is invalid</p>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control pass" name="password" ng-model="mainVm.newPerson.password" placeholder="Password" ng-minlength="6" required/>
<div ng-messages="userForm.password.$error" class="has-error" ng-if="userForm.password.$dirty">
<p ng-message="required">Password is required</p>
<p ng-message="minlength">Password should be at least 6 digit length</p>
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_password" ng-model="mainVm.newPerson.confirm_password" placeholder="Confirm Password" ng-minlength="6" required/>
<div ng-messages="userForm.confirm_password.$error" class="has-error" ng-if="userForm.confirm_password.$dirty">
<p ng-message="required">Fill confirm password</p>
<p ng-message="minlength">It should be at least 6 digit length</p>
</div>
<span style="color:red" ng-show="mainVm.newPerson.password != mainVm.newPerson.confirm_password">Your passwords must match.</span>
</div>
<div class="form-group">
<label>City</label>
<input type="text" name="city" class="form-control" placeholder="City" ng-model="mainVm.newPerson.address.city" required>
<div ng-messages="userForm.city.$error" class="has-error" ng-if="userForm.city.$dirty">
<p ng-message="required">City is required</p>
</div>
</div>
<div class="form-group">
<label>ZipCode</label>
<input type="text" name="zip" class="form-control" placeholder="ZipCode" ng-model="mainVm.newPerson.address.zip" required ng-pattern="/^[0-9]{6}$/">
<div ng-messages="userForm.zip.$error" class="has-error" ng-if="userForm.zip.$dirty">
<p ng-message="required">Zip is required</p>
<p ng-message="pattern">Zip must have 6 digits</p>
</div>
</div>
<div class="form-group">
<label>Choose type</label>
<select class="form-control" name="selecttype" ng-model="mainVm.newPerson.selecttype" required />
<option value="">choose</option>
<option>normal</option>
<option>standard</option>
</select>
<div ng-messages="userForm.selecttype.$error" class="has-error" ng-if="userForm.selecttype.$dirty">
<p ng-message="required">Zip is required</p>
</div>
</div>
<div class="form-group">
<label>Company</label>
<input type="text" name="company" class="form-control" placeholder="Company" ng-model="mainVm.newPerson.company.name" required minlength="5">
<div ng-messages="userForm.company.$error" class="has-error" ng-if="userForm.company.$dirty">
<p ng-message="required">Company is required</p>
<p ng-message="minlength">Company must be less than 5 letters></p>
</div>
</div>
<button type="submit" class="btn btn-success" ng-disabled="userForm.$invalid">Submit</button>
</form>
Let's understand the above example step by step:
- Apply novalidate attribute in <form> tag. The novalidate attribute will disable the browser's default validation.
- Now, set required on the input elements. Also, set name attribute to the name of model property,
- Create <div> element to specify an error message with every input field where the validation directive is applied.
- inside div of error message we need to set the <p> for showing each specific error(<p ng-message="required">Name is required</p>).
- Set ng-messaages="<formName>.<fieldName>.$error" class="has-error" ng-if="<formName>.<fieldName>.$dirty". Definitions of these angular directive have been listed above.
- In any filed we want to set minimum length of maximum length, We need to set ng-minlength="8" and ng-maxlength=10.
Now have a look on the angular part(script.js).
var app = angular.module('formvalidation', ['ngMessages']);
angular.module('formvalidation').controller('MainController', MainControllerfn);
function MainControllerfn() {
mainVm = this;
mainVm.addPerson = function(){
alert('form is submitted!!!');
}
mainVm.people = [{}]
}
In the above code, only app declration is there and basic controller is defined.
Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.
Thanks!!
