martedì 25 novembre 2014

Input (HTML) validation calling a WEB API method (Part II)

AngularJS v. 1.2.14, WEB API (.NET Framework 4.51)

Based on my last post (http://diegoparolin-codeplus.blogspot.it/2014/10/input-html-validation-calling-web-api.html) I have added a custom Directive to my code, like this.

I first changed the javascript code, where I have created a custom Directive with inside the service that calls the WEB API. (factory).

(function() {
  var app = angular.module('verifyUser-registerUser', []);

  app.factory('checkFiscalCodeService', function ($q, $http) {
      var checkCode = function (value) {
        var deferred = $q.defer();

        $http({
          url: './Api/AccountAPI/CheckFiscalCode',
          method: 'GET',
          params: {
            fiscalCode: value
          }
        })
          .success(function (data) {
            deferred.resolve(data);
          })
          .error(function (reason) {
            deferred.reject(reason);
          });

        return deferred.promise;
      };
      return {
        CheckCode: function(value) {
          return checkCode(value);
        }
      };
    });

  app.directive('checkFiscalCode', ['checkFiscalCodeService', function (checkFiscalCodeService) {
      return {
        // restrict to an attribute type.
        restrict: 'A',

        // element must have ng-model attribute.
        require: 'ngModel',

        // scope = the parent scope
        // elem = the element the directive is on
        // attr = a dictionary of attributes on the element
        // ctrl = the controller for ngModel.
        link: function(scope, elem, attr, ctrl) {

          // add a parser that will process each time the value is
          // parsed into the model when the user updates it.
          ctrl.$parsers.unshift(function(value) {
            var valid = false;
            if (value != null && value.length === 16) {
              checkFiscalCodeService.CheckCode(value).then(function(response) {
                if (response === 'true') {
                  ctrl.$setValidity('validator', true);
                  valid = true;
                } else {
                  ctrl.$setValidity('validator', false);
                }
              }, function(errorResponse) {
                ctrl.$setValidity('validator', false);
              });
            } else {
              ctrl.$setValidity('validator', false);
            }
           
            return valid;
          });

          // add a formatter that will process each time the value
          // is updated on the DOM element.
          ctrl.$formatters.unshift(function (value) {
            if (value != null && value.length === 16) {
              checkFiscalCodeService.CheckCode(value).then(function(response) {
                if (response === 'true') {
                  ctrl.$setValidity('validator', true);
                }
              }, function(errorResponse) {
                ctrl.$setValidity('validator', false);
              });
            }

            // return the value or nothing will be written to the DOM.
            return value;
          });
        }
      };
    }]);

  app.controller('RegisterUserController', [
    '$scope', '$http', function($scope, $http) {

    // Do something …

    }
  ]);   
})();

Therefore I have modified my html page in this way:

<div ng-controller="RegisterUserController as registerUser">
    <div class="form-container">
        <form name="form" class="form-horizontal" ng-submit="form.$valid && registerNewUser()" novalidate>
            <div class="row">
                <div class="col-md-7 col-md-offset-2">
<div class="form-group">
                        <label for="inputFiscalCode" class="col-md-4 control-label">Fiscal code</label>
                        <div class="col-md-8">
                            <input name="inputFiscalCode" type="text" class="form-control" id=" inputFiscalCode " ng-model="fiscalCode"
                                   required placeholder="Fiscal code" check-fiscal-code
                                   ng-class="{true: 'ng-invalid ng-dirty'}[submitted]">
                            <span ng-show='form.inputFiscalCode.$error.validator && form. inputFiscalCode.$dirty'>Fiscal code is not valid!</span>
                        </div>
                    </div>
<div class="form-group">
                        <div class="col-md-offset-6 col-md-4">
                            <button type="submit" class="btn btn-primary" ng-click="submitted=true">Register</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

This is the same result:


Bye bye!


venerdì 17 ottobre 2014

Input (HTML) validation calling a WEB API method

AngularJS v. 1.2.14, WEB API (.NET Framework 4.51)

This is my first post on AngularJS, in my opinion a very beautiful and powerful framework for developing web application.
My first little problem is to validate the user fiscal code by calling a WEB API method and return a feedback to the user. Naturally I suppose that development environment is correctly configured.

Therefore, in my ASP.NET web application, in the Site.css I define this style:

.ng-invalid.ng-dirty {
  border-color: #FA787E;
}

.ng-valid.ng-dirty {
  border-color: #78FA89;
}


Then in my html page, I add the fiscal code input:

<div ng-controller="RegisterUserController as registerUser">
    <div class="form-container">
        <form name="form" class="form-horizontal" ng-submit="form.$valid && registerNewUser()" novalidate>
            <div class="row">
                <div class="col-md-7 col-md-offset-2">
<div class="form-group">
                        <label for="inputCodiceFiscale" class="col-md-4 control-label">Fiscal code</label>
                        <div class="col-md-8">
                            <input name="inputFiscalCode" type="text" class="form-control" id="inputCodiceFiscale" ng-model="codiceFiscale"
                                   required placeholder="Codice fiscale" ui-validate="'checkFiscalCode($value)'"
                                   ng-class="{true: 'ng-invalid ng-dirty'}[submitted && form. inputFiscalCode.$invalid]">
                            <span ng-show='form.inputFiscalCode.$invalid'>Fiscal code is not valid!</span>
                        </div>
                    </div>
<div class="form-group">
                        <div class="col-md-offset-6 col-md-4">
                            <button type="submit" class="btn btn-primary" ng-click="submitted=true">Register</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


Therefore this the javascript code. I use the $http service (http://www.angularjshub.com/examples/servercalls/httpservice/), that is an asynchronous service and for this reason I create a service factory with a promise:

(function() {
  var app = angular.module('verifyUser-registerUser', []);
app.controller('RegisterUserController', [
    '$scope', '$http', 'checkFiscalCodeService', function($scope, $http, checkFiscalCodeService) {


      $scope.checkFiscalCode = function(value) {
        if (value != null && value.length === 16) {
          var promise = checkFiscalCodeService.checkCode(value);
          promise.then(
            function (response) {
              if (response.data === 'true') {
                $scope.form.inputFiscalCode.$setValidity('validator', true);
              }             
            },
            function (errorResponse) {
              $scope.form.inputFiscalCode.$setValidity('validator', false);
            });
        }
      }
    }
  ]);

  app.factory('checkFiscalCodeService', function($http) {
    return {
      checkCode: function(value) {
        return $http.get('./api/{Controller}/CheckFiscalCode', {
          params: {
            fiscalCode: value
          }
        });
      }
    }
  });
 
})();


This is the result:



See you to the next time!