diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 5ff7d00..9b3c1b7 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -56,13 +56,15 @@
   gulp.task('makeDocs', ['cleanDocs'], function(){
     var ngOptions = {
       scripts: [
-        'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js',
-        'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-cookies.min.js',
+        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-resource.js',
         'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js',
-        `${options.ngXosVendor}ngXosHelpers.js`
+        `./${options.ngXosVendor}ngXosHelpers.js`
       ],
       styles: [
-        'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
+        'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css',
       ],
       html5Mode: false,
       title: 'XOS Helpers documentation',
diff --git a/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js b/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
index 5f87de5..9fdc17b 100644
--- a/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
+++ b/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
@@ -12,6 +12,7 @@
       .factory('SetCSRFToken', setCSRFToken);
 
   function setCSRFToken($cookies) {
+    console.log($cookies);
     return {
       request: function(request){
         if(request.method !== 'GET'){
diff --git a/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js b/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
index 1eb2796..b2c7a94 100644
--- a/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
+++ b/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
@@ -8,7 +8,7 @@
   **/
 
   angular
-      .module('xos.helpers')
+      .module('xos.uiComponents')
       .factory('LabelFormatter', labelFormatter);
 
   function labelFormatter() {
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
index 35fe286..3a80fc1 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
@@ -38,14 +38,21 @@
   <example module="sampleForm">
     <file name="index.html">
       <div ng-controller="SampleCtrl as vm">
-        <xos-form ng-model="model" config="config"></xos-form>
+        <xos-form ng-model="vm.model" config="vm.config"></xos-form>
       </div>
     </file>
     <file name="script.js">
       angular.module('sampleForm', ['xos.uiComponents'])
+      .factory('_', function($window){
+        return $window._;
+      })
       .controller('SampleCtrl', function(){
         this.model = {
-          
+          first_name: 'Jhon',
+          last_name: 'Doe',
+          email: 'jhon.doe@sample.com',
+          active: true,
+          birthDate: '2015-02-17T22:06:38.059000Z'
         }
         this.config = {
           exclude: ['password', 'last_login'],
@@ -170,6 +177,9 @@
     };
 
     this.buildFormStructure = (modelField, customField, model) => {
+
+      customField = customField || {};
+
       return _.reduce(Object.keys(modelField), (form, f) => {
         form[f] = {
           label: (customField[f] && customField[f].label) ? `${customField[f].label}:` : LabelFormatter.format(f),
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
index 6b80a32..9e95805 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
@@ -29,7 +29,7 @@
       },
       template: `
         <div>
-          <pre>{{vm.errors.email | json}}</pre>
+          <!-- <pre>{{vm.errors.email | json}}</pre> -->
           <xos-alert config="vm.config" show="vm.errors.email !== undefined">
             This is not a valid email
           </xos-alert>
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index 395ea95..a368519 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -233,6 +233,51 @@
  *
  * Visit http://guide.xosproject.org/devguide/addview/ for more information
  *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents')
+
+  /**
+    * @ngdoc directive
+    * @name xos.uiComponents.directive:xosValidation
+    * @restrict E
+    * @description The xos-validation directive
+    * @param {Object} errors The error object
+    * @element ANY
+    * @scope
+    */
+
+  .directive('xosValidation', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        errors: '='
+      },
+      template: '\n        <div>\n          <!-- <pre>{{vm.errors.email | json}}</pre> -->\n          <xos-alert config="vm.config" show="vm.errors.email !== undefined">\n            This is not a valid email\n          </xos-alert>\n        </div>\n      ',
+      transclude: true,
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: function controller() {
+        this.config = {
+          type: 'danger'
+        };
+      }
+    };
+  });
+})();
+//# sourceMappingURL=../../maps/ui_components/dumbComponents/validation.component.js.map
+
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
  * Created by teone on 3/24/16.
  */
 
@@ -586,17 +631,38 @@
     * @element ANY
     * @scope
     * @example
-  <example module="sampleAlert1">
+  <example module="sampleForm">
     <file name="index.html">
-      <div ng-controller="SampleCtrl1 as vm">
-        
+      <div ng-controller="SampleCtrl as vm">
+        <xos-form ng-model="vm.model" config="vm.config"></xos-form>
       </div>
     </file>
     <file name="script.js">
-      angular.module('sampleAlert1', ['xos.uiComponents'])
-      .controller('SampleCtrl1', function(){
-        this.config1 = {
-          exclude: ['password', 'last_login']
+      angular.module('sampleForm', ['xos.uiComponents'])
+      .factory('_', function($window){
+        return $window._;
+      })
+      .controller('SampleCtrl', function(){
+        this.model = {
+          first_name: 'Jhon',
+          last_name: 'Doe',
+          email: 'jhon.doe@sample.com',
+          active: true,
+          birthDate: '2015-02-17T22:06:38.059000Z'
+        }
+        this.config = {
+          exclude: ['password', 'last_login'],
+          formName: 'sampleForm',
+          actions: [
+            {
+              label: 'Save',
+              icon: 'ok', // refers to bootstraps glyphicon
+              cb: (user) => { // receive the model
+                console.log(user);
+              },
+              class: 'success'
+            }
+          ]
         };
       });
     </file>
@@ -610,10 +676,10 @@
         config: '=',
         ngModel: '='
       },
-      template: '\n        <ng-form name="vm.config.formName || \'form\'">\n          <div class="form-group" ng-repeat="field in vm.formField">\n            <label>{{vm.formatLabel(field.label)}}</label>\n            <input type="text" name="" class="form-control" ng-model="vm.ngModel[field]"/>\n          </div>\n          <div class="form-group" ng-if="vm.config.actions">\n            <button href=""\n              ng-repeat="action in vm.config.actions"\n              ng-click="action.cb(vm.ngModel)"\n              class="btn btn-{{action.class}}"\n              title="{{action.label}}">\n              <i class="glyphicon glyphicon-{{action.icon}}"></i>\n              {{action.label}}\n            </button>\n          </div>\n        </ng-form>\n      ',
+      template: '\n        <ng-form name="vm.{{vm.config.formName || \'form\'}}">\n          <div class="form-group" ng-repeat="(name, field) in vm.formField">\n            <label>{{field.label}}</label>\n            <input ng-if="field.type !== \'boolean\'" type="{{field.type}}" name="{{name}}" class="form-control" ng-model="vm.ngModel[name]"/>\n            <span class="boolean-field" ng-if="field.type === \'boolean\'">\n              <button\n                class="btn btn-success"\n                ng-show="vm.ngModel[name]"\n                ng-click="vm.ngModel[name] = false">\n                <i class="glyphicon glyphicon-ok"></i>\n              </button>\n              <button\n                class="btn btn-danger"\n                ng-show="!vm.ngModel[name]"\n                ng-click="vm.ngModel[name] = true">\n                <i class="glyphicon glyphicon-remove"></i>\n              </button>\n            </span>\n            <xos-validation errors="vm[vm.config.formName || \'form\'][name].$error"></xos-validation>\n          </div>\n          <div class="form-group" ng-if="vm.config.actions">\n            <button role="button" href=""\n              ng-repeat="action in vm.config.actions"\n              ng-click="action.cb(vm.ngModel)"\n              class="btn btn-{{action.class}}"\n              title="{{action.label}}">\n              <i class="glyphicon glyphicon-{{action.icon}}"></i>\n              {{action.label}}\n            </button>\n          </div>\n        </ng-form>\n      ',
       bindToController: true,
       controllerAs: 'vm',
-      controller: ["$scope", "$log", "_", "LabelFormatter", "XosFormHelpers", function controller($scope, $log, _, LabelFormatter, XosFormHelpers) {
+      controller: ["$scope", "$log", "_", "XosFormHelpers", function controller($scope, $log, _, XosFormHelpers) {
         var _this = this;
 
         if (!this.config) {
@@ -624,8 +690,6 @@
           throw new Error('[xosForm] Please provide an action list in the configuration');
         }
 
-        this.formatLabel = LabelFormatter.format;
-
         this.excludedField = ['id', 'validators', 'created', 'updated', 'deleted', 'backend_status'];
         if (this.config && this.config.exclude) {
           this.excludedField = this.excludedField.concat(this.config.exclude);
@@ -638,17 +702,22 @@
           if (!model) {
             return;
           }
-          _this.formField = XosFormHelpers.buildFormStructure(_.difference(Object.keys(model), _this.excludedField));
+          _this.formField = XosFormHelpers.buildFormStructure(XosFormHelpers.parseModelField(_.difference(Object.keys(model), _this.excludedField)), _this.config.fields, model);
         });
       }]
     };
   }).service('XosFormHelpers', ["_", "LabelFormatter", function (_, LabelFormatter) {
     var _this2 = this;
 
+    this._isEmail = function (text) {
+      var re = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+      return re.test(text);
+    };
+
     this._getFieldFormat = function (value) {
 
       // check if is date
-      if (_.isDate(value)) {
+      if (_.isDate(value) || !Number.isNaN(Date.parse(value)) && Date.parse(value) > 0) {
         return 'date';
       }
 
@@ -663,16 +732,33 @@
         return 'number';
       }
 
+      // check if a string is an email
+      if (_this2._isEmail(value)) {
+        return 'email';
+      }
+
       return typeof value === 'undefined' ? 'undefined' : _typeof(value);
     };
 
     this.buildFormStructure = function (modelField, customField, model) {
+
+      customField = customField || {};
+
       return _.reduce(Object.keys(modelField), function (form, f) {
         form[f] = {
           label: customField[f] && customField[f].label ? customField[f].label + ':' : LabelFormatter.format(f),
           type: customField[f] && customField[f].type ? customField[f].type : _this2._getFieldFormat(model[f]),
           validators: {}
         };
+
+        if (form[f].type === 'date') {
+          model[f] = new Date(model[f]);
+        }
+
+        if (form[f].type === 'number') {
+          model[f] = parseInt(model[f], 10);
+        }
+
         return form;
       }, {});
     };
@@ -904,7 +990,7 @@
   * @description This factory define a set of helper function to format label started from an object property
   **/
 
-  angular.module('xos.helpers').factory('LabelFormatter', labelFormatter);
+  angular.module('xos.uiComponents').factory('LabelFormatter', labelFormatter);
 
   function labelFormatter() {
 
@@ -956,6 +1042,7 @@
   angular.module('xos.helpers').factory('SetCSRFToken', setCSRFToken);
 
   function setCSRFToken($cookies) {
+    console.log($cookies);
     return {
       request: function request(_request) {
         if (_request.method !== 'GET') {