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" |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 32 | ng-click="vm.field.$error.required = !vm.field.$error.required" |
| 33 | ng-class="{'btn-default': !vm.field.$error.required, 'btn-success': vm.field.$error.required}"> |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 34 | Required |
| 35 | </a> |
| 36 | </div> |
| 37 | <div class="col-xs-2"> |
| 38 | <a class="btn" |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 39 | ng-click="vm.field.$error.email = !vm.field.$error.email" |
| 40 | ng-class="{'btn-default': !vm.field.$error.email, 'btn-success': vm.field.$error.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" |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 46 | ng-click="vm.field.$error.minlength = !vm.field.$error.minlength" |
| 47 | ng-class="{'btn-default': !vm.field.$error.minlength, 'btn-success': vm.field.$error.minlength}"> |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 48 | Min Length |
| 49 | </a> |
| 50 | </div> |
| 51 | <div class="col-xs-2"> |
| 52 | <a class="btn" |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 53 | ng-click="vm.field.$error.maxlength = !vm.field.$error.maxlength" |
| 54 | ng-class="{'btn-default': !vm.field.$error.maxlength, 'btn-success': vm.field.$error.maxlength}"> |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 55 | Max Length |
| 56 | </a> |
| 57 | </div> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 58 | </div> |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 59 | <xos-validation field ="vm.field" form = "vm.form"></xos-validation> |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 60 | </div> |
| 61 | </file> |
| 62 | <file name="script.js"> |
| 63 | angular.module('sampleValidation', ['xos.uiComponents']) |
| 64 | .controller('SampleCtrl', function(){ |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 65 | this.field = { |
| 66 | $error: {} |
| 67 | }; |
| 68 | this.form= { |
| 69 | $submitted:true |
Matteo Scandolo | ebf4fad | 2016-04-22 12:05:37 -0700 | [diff] [blame] | 70 | } |
| 71 | }); |
| 72 | </file> |
| 73 | </example> |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 74 | */ |
| 75 | |
| 76 | .directive('xosValidation', function(){ |
| 77 | return { |
| 78 | restrict: 'E', |
| 79 | scope: { |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 80 | field: '=', |
| 81 | form: '=' |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 82 | }, |
| 83 | template: ` |
Matteo Scandolo | 88e1846 | 2016-04-25 14:24:18 -0700 | [diff] [blame] | 84 | <div ng-cloak> |
Matteo Scandolo | 5dfcb08 | 2016-05-31 15:15:00 -0700 | [diff] [blame] | 85 | <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] | 86 | Field required |
| 87 | </xos-alert> |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 88 | <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] | 89 | This is not a valid email |
| 90 | </xos-alert> |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 91 | <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] | 92 | Too short |
| 93 | </xos-alert> |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 94 | <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] | 95 | Too long |
| 96 | </xos-alert> |
arpiagariu | cb55323 | 2016-06-02 10:17:07 -0700 | [diff] [blame] | 97 | <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] | 98 | Field invalid |
| 99 | </xos-alert> |
Matteo Scandolo | 4ba4cf1 | 2016-04-20 16:36:17 -0700 | [diff] [blame] | 100 | </div> |
| 101 | `, |
| 102 | transclude: true, |
| 103 | bindToController: true, |
| 104 | controllerAs: 'vm', |
| 105 | controller: function(){ |
| 106 | this.config = { |
| 107 | type: 'danger' |
| 108 | } |
| 109 | } |
| 110 | } |
| 111 | }) |
| 112 | })(); |