How to create a js function directive

Question

How to create a js function directive

Navigation

#1 by (2 votes)

1

I have a function to validate date:

   function validateDate(id) {
     var RegExPattern = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])    [\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;

     if (!((id.value.match(RegExPattern)) && (id.value!=''))) {
      return false;

       }
      else
     return true;
   }

How would I create a directive for this function to use directly in the input?

angularjs

asked by anonymous 15.10.2015 / 23:44

1 answer

How to download a bitbucket project by git Create MySQL user and database via PHP

score 2 · Accepted Answer

By the name of your function, it is a validation function.

You should configure validators in the ngModelController of directive . The ngModelController is the 4th parameter of the link property of a directive .

For example:

angular.module("Modulo").directive("diretriz", function () {
    "use strict";
    return {
        restrict: "E",
        require: "ngModel",
        link: function ($s, $e, $a, $c) {
            $c.$validators.data = function (mv, vv) {
                // mv é o valor na sua variável.
                // vv é o valor na view.
                if ( vv === "" ) {
                    return true;
                }
                vv = vv.split("/");
                if ( vv.length !== 3 ) {
                    return false;
                }
                vv.reverse();
                vv = vv.join("-");
                return !isNaN(Date.parse(vv)));
            };
        }
    };
});

Note that in the property link , the function associated with it accepts 4 parameters:

$s is the scope;
$e is the element embedded in jQuery or jQuerylite;
$a are the attributes of the element;
$c is ngModelController .

The $validators attribute of ngModelController has the "validators" of its guideline. They return true or false . All validators run during the validation process, and the element (s) associated with the guideline are considered valid if and only if all validators return true .

An interesting feature of validators in Angular is that when an element has the required attribute, it is only checked if its value is different from false (including values that can be coerced to false , as the number 0 ).

As a consequence, your validator can return true when the field is empty (even if it is an invalid value), and you can force the field to be filled using the required attribute %. This way, you can differentiate when the element is invalid because it contains a value that does not meet its rules, or when the element is empty, and even decorate the element through CSS when one case or another without any additional code (note the classes added by Angular to the element when it is invalid, empty or valid).

ngModelController has several other interesting fields besides $validator , such as $parsers and $formatters . It is well worth checking out the documentation.

Editing

I did not use your RegEx because it is too complex, especially when the browser has native features for interpreting dates. So the validator I wrote converts the date in dd/mm/yyyy format to yyyy-mm-dd (ISO 8601) format, natively accepted by the browser in the Date.parse method.

Although I did not use RegEx, I tried to preserve the same semantics as your method. So the two should be equivalent (with the advantage that my Czech if the year is leap year).