custom angular js validation

Question

Lets say I have table with 10 rows and in each row 10 columns of checkboxes

before the user submits I want to add the following validation: in each row at least two checkbox are checked!

<form name="myForm">
    <div data-ng-controller="myController">
        <table border="1">
            <tr>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
                <td><input type="checkbox" /></td>
            </tr>
            ...
        </table>

        <button data-ng-click="save()" ng-disabled="$myForm.invalid">Save</button>
</form>


$scope.save = function() {
    if (myForm.$valid){
        alert("can submit the form...")
    }
};

How to do this? where to add the validation functionality?

Community · Accepted Answer · 2017-05-23 11:56:58Z

2

I recently answered a similar question with a custom directive that allows the user to define groups of controls (text-fields, selects, checkboxs, whatever) and require that at least one control in each group not empty.

It should be easy to modify so that at least two controls are not empty.
Then myForm.$valid will always be "up-to-date" (so you can use it to give visual feedback or allow the form to be submitted).

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jun 22, 2014 at 11:10

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

2 Comments

john Smith Over a year ago

This is exactly what I was looking for,, a bit long but I think is how it should be in Angular platform.. thanks!

gkalpak Over a year ago

Yeah, the implementation is a bit long (not much though), but the functionality added is not trivial. Besides, you only include it once in the project and then it can be integrated in any view with no extra code (neither in the controller nor in the view) :)

Alfonso Embid-Desmet · Accepted Answer · 2014-06-22 11:18:04Z

1

If your checkboxes are static in the HTML, You can bind the checkboxes to boolean models like:

<input type="checkbox" ng-model="checked[1]">
<a href="javascript:;" data-ng-click="validate()">Validate</a>

and then use something like this to validate

$scope.checked = {};
$scope.validate = function() {
  var count=0;
  angular.forEach($scope.checked, function(k,v){ if (k) count++; });
  if (count > 2)
      alert("validated");
};

To extend this to multiple rows is trivial.

You can see this working on here: http://plnkr.co/edit/thbJ81KWUDyF6WTcWL9u?p=preview

Of course you can define an array in the controller and use the ng-repeat directive in conjunction with this idea.

answered Jun 22, 2014 at 11:18

Alfonso Embid-Desmet

3,6723 gold badges35 silver badges47 bronze badges

Collectives™ on Stack Overflow

custom angular js validation

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related