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!
