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: {
  border-color: #FA787E;
} {
  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 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>

Therefore this the javascript code. I use the $http service (, 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);
            function (response) {
              if ( === '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!