How I can transform a jQuery function in one AngularJS directive?

Question

I have to validate a form with a directive, for to AngularJS can to be able to enable or disable the submit form button.

I have a function in jQuery, but I need that AngularJS watches this behavior.

This function compares inputs to prevent duplicate information in each one.

<form id="myform">
<table>
    <tr>
        <td><input name="currency1" class="required" unique="currency"/></td>
    </tr>
    <tr>
        <td><input name="currency2" class="required" unique="currency"/></td>
    </tr>
    <tr>
        <td><input name="currency3" class="required" unique="currency"/></td>
    </tr>
    <tr>
        <td><input name="currency4" class="required" unique="currency"/></td>
    </tr>
</table>

This is the function

jQuery.validator.addMethod("unique", function(value, element, params) {
     var prefix = params;
     var selector = jQuery.validator.format("[name!='{0}'][name^='{1}'][unique='{1}']", element.name, prefix);
     var matches = new Array();
     $(selector).each(function(index, item) {
         if (value == $(item).val()) {
             matches.push(item);
         }
     });

     return matches.length == 0;
          }, 
       "Valor Repetido"
     );


     jQuery.validator.classRuleSettings.unique = {
          unique: true
     };

     $("#myform").validate();

     $("#validate").onBlur(function() {
          $("#myform").valid();
     });

and CSS

label.error { color: red }

Can anyone help me?

could you please tell me what are you validating using jquery. I thought inputs of user Am I right or wrong ..? — SakthiSureshAnand
– SakthiSureshAnand, Commented Nov 25, 2015 at 19:53
this form validates a lot of products that are part of a package and these products cannot repeat themselves in the same package — Gustavo Contreras
– Gustavo Contreras, Commented Nov 29, 2015 at 4:01

Harris · Accepted Answer · 2015-12-02 20:55:02Z

1

You can have an object array to hold all of the values, and deep watch that.
In controller:

$scope.currencies =
    [{'value':'val1'},{'value':'val2'},{'value':'val1'} ];

$scope.$watch('currencies', function(){
    $scope.duplicates = false;
    var found = [];
    $scope.currencies.forEach(function(currency){
        if(!(found.indexOf(currency.value)+1))
            found.push(currency.value);
        else $scope.duplicates = true;
    });
},true); //The 'true' last parameter is the signal to deep watch.

Each input in your table is bound with ng-model to an object in $scope.currencies so that the deep watch will see any changes immediately. You can generate the list of inputs using the ng-repeat directive:

<tr ng-repeat="currency in currencies">
    <td><input type="text" ng-model="currency.value"></input></td>
</tr>

Then for the submit button, have <input type="submit" ng-disabled="duplicates"></input>

If you wanted to, you could then add buttons to add or remove elements from $scope.currencies, and it would immediately be reflected in the view.

Plunker sample

edited Dec 2, 2015 at 20:55

answered Nov 25, 2015 at 20:07

Harris

1,78516 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Gustavo Contreras Over a year ago

so, how I can to put every input into $scope.currencies? by name="currency1" by id= or by class="" I don't understand it...

Harris Over a year ago

You'll be using the ng-model attribute to bind your inputs to your JS variables. When one updates, the other will automatically. I've updated the answer a bit to make it more obvious.

Gustavo Contreras Over a year ago

I did run this code, but no matter what I put in each input, the submit button always stands disabled

Harris Over a year ago

I've made a correction in my example, and have included a working Plunker example.

Gustavo Contreras Over a year ago

thank you so much can you help me to find more examples about custom directives just to practice more? thank you again

|

Collectives™ on Stack Overflow

How I can transform a jQuery function in one AngularJS directive?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related