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!