AngularJS CRUD Using ASP.NET MVC5 – Data Validations during CREATE and UPDATE Operation

In Previous article we learn how to CREATE, UPDATE and DELETE Employee data using AngularJS. In this article, we will learn how AngularJS and Bootstrap help us to effectively do form validation.

You can download code for previous article from GitHub and start adding code for form data validation.

So Let us start coding ??

We will use custom directive created by “Paul Yoder” to do Form Validation. It is effective and has all the functionality we are looking for.

You can use any other directive available for form validation as per your need.

Step-1: Download showErrors.js from GitHub

Source Path: https://raw.githubusercontent.com/paulyoder/angular-bootstrap-show-errors/master/src/showErrors.min.js

Add this JS file in our project “Scripts” folder.

Step-2: Add Script Reference on Page

We need to add reference of “showErrors.min.js” JavaScript file on “Views –> Home –> Index.cshtml” page’s script section.

@section scripts{
<script src="~/AngularJSApp/Employee/Module.js"></script>
<script src="~/Scripts/showErrors.min.js"></script>
<script src="~/AngularJSApp/Employee/Service.js"></script>
<script src="~/AngularJSApp/Employee/Controller.js"></script>
}

Order of JS file is important here. Make sure you add it after Module.JS and Before Controller.JS file where this directive will be used for form validation purpose.

Step-3: Include the “ui.bootstrap.showErrors” module in your Angular app

Open “AngularJSApp\Employee\Module.js” file and add this module:

myapp = angular.module('my-employees', ['ui.bootstrap.showErrors']);

Step-4: Add the “show-errors” attribute on the div element that contains the “form-group” class

Open “Index.cshtml” page and add angular validation for our directives as per below for “AddNewForm” and “UpdateEmployeeForm“. we only need to change form-group divs where our input controls are placed.

If you only want to show valid values on specific inputs, then you can pass in the { showSuccess: true } option.

<div class="form-group" show-errors="{ showSuccess: true }">
  <label class="control-label"> Employee Name</label>
  <input class="form-control" name="EmpName" ng-model="EmpName" type="text"
placeholder="Employee Name" ng-required="true" /></div>

Similarly, other form-control will be updated for “AddNewForm” form:

<form class="form-horizontal" name="AddNewForm">
<div class="form-group">
   <input class="form-control" readonly="readonly" name="EmpNo"
ng-model="EmpNo" type="hidden" placeholder="Employee Number" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
    <label class="control-label"> Employee Name</label>
    <input class="form-control" name="EmpName" ng-model="EmpName"
type="text" placeholder="Employee Name" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
  <label class="control-label"> Email</label>
  <input class="form-control" name="Email" ng-model="Email" type="email"
placeholder="Email" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="control-label"> Department Name</label>
   <input class="form-control" name="DeptName" ng-model="DeptName"
type="text" placeholder="Dept Name" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="control-label"> Designation</label>
   <input class="form-control" name="Designation" ng-model="Designation"
type="text" placeholder="Designation" ng-required="true" /></div>
</form>

Submit button should not contain data-dismiss=”modal” attributes. Remove it to make modal popup open even after Submit click in case any data is invalid.

Similarly, other form-control will be updated for “UpdateEmployeeForm” form:

<form class="form-horizontal" name="UpdateEmployeeForm">
<div class="form-group">
   <input class="form-control" readonly="readonly" name="EmpNo"
ng-model="UpdateEmpNo" type="hidden" placeholder="Employee Number" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="text-info"> Employee Name</label>
  <input class="form-control" name="EmpName" ng-model="UpdateEmpName"
type="text" placeholder="Employee Name" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
     <label class="text-info"> Email</label>
     <input class="form-control" name="Email" ng-model="UpdateEmail"
type="email" placeholder="Email" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="text-info"> Department Name</label>
   <input class="form-control" name="DeptName" ng-model="UpdateDeptName"
type="text" placeholder="Dept Name" ng-required="true"/></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="text-info"> Designation</label>
   <input class="form-control" name="Designation"
ng-model="UpdateDesignation" type="text" placeholder="Designation"
ng-required="true" /></div>
</form>

Step-5: Force Validity Check on form elements

By default this directive doesn’t check the validity until the user tabs off the input element. However, there are times you want to show invalid form elements even if the user has not tabbed off. To force the validity check, broadcast the show-errors-check-validity event.

Open “AngularJSApp\Employee\Controller.js” file.

In $scope.save() method, we need to broadcast this event and if form is valid then only proceed for saving data else show error message and restrict user to save invalid data.


$scope.save = function () {

  $scope.$broadcast('show-errors-check-validity');
  if ($scope.AddNewForm.$invalid)
  {
   return;
  }

  ....
  ....
}

Similarly, for $scope.update() method:


$scope.update = function () {

  $scope.$broadcast('show-errors-check-validity');

  if ($scope.UpdateEmployeeForm.$invalid)
  {
     return;
  }
 ....
 ....
}

Step-6: Reset form elements

You can broadcast the ‘show-errors-reset‘ event to remove any errors on the form elements.

we have two reset methods ($scope.resetUpdate() method and $scope.resetSave()) where will add this event.


$scope.$broadcast('show-errors-reset');

Note: There are also other useful validation attributes are available with this directive (showErrors.js), you can go to GitHub reference page and explore/use them as per your requirements.

Step-7: Run the application.

Click on Add Employee Button. Provide input values in each fields and check required field validation and email validation is working or not by keeping them empty and giving incorrect values in text-box.

add-form-validation

You can see that it will give smooth effective data validation where color of textbox fields are changing to Green or Red as per validation pass or fail.

Kool 🙂 Isn’t it?

Similarly, try Update Employee

update-form-validation

I hope this will help you in your project for doing effective data validation by minimum efforts.

For more details on AngularJS form Validation, please refer this article: https://scotch.io/tutorials/angularjs-form-validation

Code for this article is available on GitHub: https://github.com/sandy060583/AngularJSUsingMVC5-Part3

Custom Directive Used: https://github.com/paulyoder/angular-bootstrap-show-errors

That’s all for this article. In next article we will integrate “toaster” notifications in our code. Till than stay tuned 🙂

Please feel free to provide your feedback and comments.

Advertisements