Matteo Scandolo | 686547a | 2017-08-08 13:05:25 -0700 | [diff] [blame] | 1 | |
| 2 | /* |
| 3 | * Copyright 2017-present Open Networking Foundation |
| 4 | |
| 5 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 | * you may not use this file except in compliance with the License. |
| 7 | * You may obtain a copy of the License at |
| 8 | |
| 9 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | |
| 11 | * Unless required by applicable law or agreed to in writing, software |
| 12 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 | * See the License for the specific language governing permissions and |
| 15 | * limitations under the License. |
| 16 | */ |
| 17 | |
| 18 | |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 19 | /** |
| 20 | * © OpenCORD |
| 21 | * |
| 22 | * Visit http://guide.xosproject.org/devguide/addview/ for more information |
| 23 | * |
| 24 | * Created by teone on 4/15/16. |
| 25 | */ |
| 26 | |
| 27 | (function () { |
| 28 | 'use strict'; |
| 29 | |
| 30 | angular.module('xos.uiComponents') |
| 31 | |
| 32 | /** |
| 33 | * @ngdoc directive |
| 34 | * @name xos.uiComponents.directive:xosValidation |
| 35 | * @restrict E |
| 36 | * @description The xos-validation directive |
| 37 | * @param {Object} errors The error object |
| 38 | * @element ANY |
| 39 | * @scope |
| 40 | * @example |
| 41 | <example module="sampleValidation"> |
| 42 | <file name="index.html"> |
| 43 | <div ng-controller="SampleCtrl as vm"> |
| 44 | <div class="row"> |
| 45 | <div class="col-xs-12"> |
| 46 | <label>Set an error type:</label> |
| 47 | </div> |
| 48 | <div class="col-xs-2"> |
| 49 | <a class="btn" |
| 50 | ng-click="vm.field.$error.required = !vm.field.$error.required" |
| 51 | ng-class="{'btn-default': !vm.field.$error.required, 'btn-success': vm.field.$error.required}"> |
| 52 | Required |
| 53 | </a> |
| 54 | </div> |
| 55 | <div class="col-xs-2"> |
| 56 | <a class="btn" |
| 57 | ng-click="vm.field.$error.email = !vm.field.$error.email" |
| 58 | ng-class="{'btn-default': !vm.field.$error.email, 'btn-success': vm.field.$error.email}"> |
| 59 | Email |
| 60 | </a> |
| 61 | </div> |
| 62 | <div class="col-xs-2"> |
| 63 | <a class="btn" |
| 64 | ng-click="vm.field.$error.minlength = !vm.field.$error.minlength" |
| 65 | ng-class="{'btn-default': !vm.field.$error.minlength, 'btn-success': vm.field.$error.minlength}"> |
| 66 | Min Length |
| 67 | </a> |
| 68 | </div> |
| 69 | <div class="col-xs-2"> |
| 70 | <a class="btn" |
| 71 | ng-click="vm.field.$error.maxlength = !vm.field.$error.maxlength" |
| 72 | ng-class="{'btn-default': !vm.field.$error.maxlength, 'btn-success': vm.field.$error.maxlength}"> |
| 73 | Max Length |
| 74 | </a> |
| 75 | </div> |
| 76 | </div> |
| 77 | <xos-validation field ="vm.field" form = "vm.form"></xos-validation> |
| 78 | </div> |
| 79 | </file> |
| 80 | <file name="script.js"> |
| 81 | angular.module('sampleValidation', ['xos.uiComponents']) |
| 82 | .controller('SampleCtrl', function(){ |
| 83 | this.field = { |
| 84 | $error: {} |
| 85 | }; |
| 86 | this.form= { |
| 87 | $submitted:true |
| 88 | } |
| 89 | }); |
| 90 | </file> |
| 91 | </example> |
| 92 | */ |
| 93 | |
Arpit Agarwal | 34b6383 | 2016-08-08 11:59:45 -0700 | [diff] [blame] | 94 | .component('xosValidation', { |
| 95 | restrict: 'E', |
| 96 | bindings: { |
| 97 | field: '=', |
| 98 | form: '=' |
| 99 | }, |
| 100 | template: ` |
| 101 | <div ng-cloak> |
| 102 | <xos-alert config="vm.config" show="vm.field.$error.required !== undefined && vm.field.$error.required !== false && (vm.field.$touched || vm.form.$submitted)"> |
| 103 | Field required |
| 104 | </xos-alert> |
| 105 | <xos-alert config="vm.config" show="vm.field.$error.email !== undefined && vm.field.$error.email !== false && (vm.field.$touched || vm.form.$submitted)"> |
| 106 | This is not a valid email |
| 107 | </xos-alert> |
| 108 | <xos-alert config="vm.config" show="vm.field.$error.minlength !== undefined && vm.field.$error.minlength !== false && (vm.field.$touched || vm.form.$submitted)"> |
| 109 | Too short |
| 110 | </xos-alert> |
| 111 | <xos-alert config="vm.config" show="vm.field.$error.maxlength !== undefined && vm.field.$error.maxlength !== false && (vm.field.$touched || vm.form.$submitted)"> |
| 112 | Too long |
| 113 | </xos-alert> |
| 114 | <xos-alert config="vm.config" show="vm.field.$error.custom !== undefined && vm.field.$error.custom !== false && (vm.field.$touched || vm.form.$submitted)"> |
| 115 | Field invalid |
| 116 | </xos-alert> |
| 117 | </div> |
| 118 | `, |
| 119 | transclude: true, |
| 120 | bindToController: true, |
| 121 | controllerAs: 'vm', |
| 122 | controller: function(){ |
| 123 | this.config = { |
| 124 | type: 'danger' |
Matteo Scandolo | a5d03d5 | 2016-07-21 11:35:46 -0700 | [diff] [blame] | 125 | } |
| 126 | } |
| 127 | }) |
| 128 | })(); |