Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 1 | /** |
| 2 | * © OpenCORD |
| 3 | * |
| 4 | * Visit http://guide.xosproject.org/devguide/addview/ for more information |
| 5 | * |
| 6 | * Created by teone on 4/15/16. |
| 7 | */ |
| 8 | |
| 9 | (function () { |
| 10 | 'use strict'; |
| 11 | |
| 12 | angular.module('xos.uiComponents') |
| 13 | |
| 14 | /** |
| 15 | * @ngdoc directive |
| 16 | * @name xos.uiComponents.directive:xosValidation |
| 17 | * @restrict E |
| 18 | * @description The xos-validation directive |
| 19 | * @param {Object} errors The error object |
| 20 | * @element ANY |
| 21 | * @scope |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 22 | * @example |
| 23 | <example module="sampleValidation"> |
| 24 | <file name="index.html"> |
| 25 | <div ng-controller="SampleCtrl as vm"> |
| 26 | <div class="row"> |
| 27 | <div class="col-xs-12"> |
| 28 | <label>Set an error type:</label> |
| 29 | </div> |
| 30 | <div class="col-xs-2"> |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 31 | <a class="btn" |
| 32 | ng-click="vm.errors.required = !vm.errors.required" |
| 33 | ng-class="{'btn-default': !vm.errors.required, 'btn-success': vm.errors.required}"> |
| 34 | Required |
| 35 | </a> |
| 36 | </div> |
| 37 | <div class="col-xs-2"> |
| 38 | <a class="btn" |
| 39 | ng-click="vm.errors.email = !vm.errors.email" |
| 40 | ng-class="{'btn-default': !vm.errors.email, 'btn-success': vm.errors.email}"> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 41 | Email |
| 42 | </a> |
| 43 | </div> |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 44 | <div class="col-xs-2"> |
| 45 | <a class="btn" |
| 46 | ng-click="vm.errors.minlength = !vm.errors.minlength" |
| 47 | ng-class="{'btn-default': !vm.errors.minlength, 'btn-success': vm.errors.minlength}"> |
| 48 | Min Length |
| 49 | </a> |
| 50 | </div> |
| 51 | <div class="col-xs-2"> |
| 52 | <a class="btn" |
| 53 | ng-click="vm.errors.maxlength = !vm.errors.maxlength" |
| 54 | ng-class="{'btn-default': !vm.errors.maxlength, 'btn-success': vm.errors.maxlength}"> |
| 55 | Max Length |
| 56 | </a> |
| 57 | </div> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 58 | </div> |
| 59 | <xos-validation errors="vm.errors"></xos-validation> |
| 60 | </div> |
| 61 | </file> |
| 62 | <file name="script.js"> |
| 63 | angular.module('sampleValidation', ['xos.uiComponents']) |
| 64 | .controller('SampleCtrl', function(){ |
| 65 | this.errors = { |
| 66 | email: false |
| 67 | } |
| 68 | }); |
| 69 | </file> |
| 70 | </example> |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 71 | */ |
| 72 | |
| 73 | .directive('xosValidation', function(){ |
| 74 | return { |
| 75 | restrict: 'E', |
| 76 | scope: { |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 77 | field: '=', |
| 78 | form: '=' |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 79 | }, |
| 80 | template: ` |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 81 | <div ng-cloak> |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 82 | <xos-alert config="vm.config" show="vm.field.$error.required !== undefined && vm.field.$error.required !== false && (vm.field.$touched || vm.form.$submitted)"> |
Matteo Scandolo | b3d686f | 2016-04-22 14:14:03 -0700 | [diff] [blame] | 83 | Field required |
| 84 | </xos-alert> |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 85 | <xos-alert config="vm.config" show="vm.field.$error.email !== undefined && vm.field.$error.email !== false && (vm.field.$touched || vm.form.$submitted)"> |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 86 | This is not a valid email |
| 87 | </xos-alert> |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 88 | <xos-alert config="vm.config" show="vm.field.$error.minlength !== undefined && vm.field.$error.minlength !== false && (vm.field.$touched || vm.form.$submitted)"> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 89 | Too short |
| 90 | </xos-alert> |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 91 | <xos-alert config="vm.config" show="vm.field.$error.maxlength !== undefined && vm.field.$error.maxlength !== false && (vm.field.$touched || vm.form.$submitted)"> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 92 | Too long |
| 93 | </xos-alert> |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 94 | <xos-alert config="vm.config" show="vm.field.$error.custom !== undefined && vm.field.$error.custom !== false && (vm.field.$touched || vm.form.$submitted)"> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 95 | Field invalid |
| 96 | </xos-alert> |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 97 | </div> |
| 98 | `, |
| 99 | transclude: true, |
| 100 | bindToController: true, |
| 101 | controllerAs: 'vm', |
| 102 | controller: function(){ |
| 103 | this.config = { |
| 104 | type: 'danger' |
| 105 | } |
| 106 | } |
| 107 | } |
| 108 | }) |
| 109 | })(); |