From 36d9f070132f5a0e063b783d6ad26042298fa0bb Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Sun, 12 Aug 2012 21:17:54 +0200 Subject: [PATCH] Adding doc and examples for uiValidate --- index.html | 68 ++++++++++++++++++++++++++++++++++++++++++++++-------- js/app.js | 8 +++++++ 2 files changed, 66 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index b465571..12b00d9 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@
  • Keypress
  • Mask
  • If
    • +
  • Validate
  • Reset
  • Animate
  • Modal
    • @@ -156,7 +157,7 @@

    How?

    <script> myModule.value('ui.config', { // The ui-jq directive namespace - jq: { + jq: { // The qtip namespace qtip: { // qTip options. This object will be used as the defaults @@ -217,7 +218,7 @@

    How?

    - +

    Google Maps

    @@ -234,13 +235,13 @@

    Click to add a marker!

    - +
    - +

    Marker

    Lat: , Lng: @@ -248,7 +249,7 @@

    Marker

    @@ -277,7 +278,7 @@

    How?

    </div> <div ui-map="myMap" class="map" - ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" + ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" ui-options="mapOptions"> </div> @@ -288,7 +289,7 @@

    How?

    center: new google.maps.LatLng(35.784, -78.670), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP -}; +}; $scope.addMarker = function($event) { $scope.myMarkers.push(new google.maps.Marker({ @@ -333,13 +334,13 @@

    What?

    Calendar picker with ng-model integration

    -

    +

    Selected Date: {{ date }}

    Formatted Date: {{ date | date: 'mediumDate'}}

    Selected Month: {{ date.getMonth() }}

    -
    +

    Why?

    @@ -400,7 +401,7 @@

    Why?

    How?

     <input ng-model="maskDemo" ui-mask="'99-99-9999'">
-	
+
    @@ -456,6 +457,53 @@

    How?

    +
    +
    +

    Validate

    +
    +
    +
    +

    What?

    +

    The ui-validate directive makes it very easy to use any function as a validation function for input elements using ngModel.

    +
    +
    + + + + This e-mail is black-listed! +
    is form valid: {{form.$valid}} +
    email errors: {{form.email.$error | json}} +
    +
    +

    Why?

    +

    AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).

    +
    +
    +

    How?

    +

    Just add the 'ui-validate' directive to your input field.

    +

    2 types of syntax are supported: +

      +
    • ui-validate="validateFoo"
      • +
    • ui-validate="{foo : validateFoo, bar : validateBar}"
      • +
    +
    +<input ng-model="email" ui-validate='{blacklist : notBlackListed}'>
+<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
+
    + and in a controller: +
    +function ValidateCtrl($scope) {
+  $scope.blackList = ['bad@domain.com','verybad@domain.com'];
+  $scope.notBlackListed = function(value) {
+    return $scope.blackList.indexOf(value) === -1;
+  };
+}
+
    +

    +
    +
    +
    +

    Reset

    diff --git a/js/app.js b/js/app.js index 02e285a..8cbecae 100644 --- a/js/app.js +++ b/js/app.js @@ -66,6 +66,14 @@ function KeypressCtrl($scope) { }; } +function ValidateCtrl($scope) { + + $scope.blackList = ['bad@domain.com','verybad@domain.com']; + $scope.notBlackListed = function(value) { + return $scope.blackList.indexOf(value) === -1; + }; +} + function ScrollfixCtrl($scope) { $scope.scrollfix = -50; }