Mpondomise Mpondomise - 7 days ago 5
Javascript Question

AngularJS to limit number of CheckBoxes to be checked and TextBox to input

I have a form in which the user can only have three choices.

The form has 10 checkbox items and one free text input. So the user has eleven options from which the user can choose only three: either three checkboxes, or two checkbox and put some text in the text area.

The idea is to disable the other checkboxes and the text area if maximum of three is attained, or if the user chooses to put something in the text area and choose two checkboxes, then disable other eight checkboxes.


here is the html template:

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
<label class="control-label" translate="jobdata.joblist.title">
Types of job
</label>
:<br/>
<div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
<div > {{topic.item}}</div>
<ul >
<li ng-repeat="subitem in topic.subitems">
<input type="checkbox" name="jobtype"
ng-model="myModel.mychosenjobs[subitem.key]">
{{subitem.values | translate}}

</li>

</ul>
</div>
<div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
<p>or type it in yourself:</p>

<textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)"
ng-model="myModel.mychosenfreetext" ng-minlength="5" ng-maxlength="100"></textarea>
<span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
<span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
</div>
</div>




In the code, I have two
ng-models
which is not ideal, because I want to capture the responses in one model and save it in my save it in my database in one place.


First question:



how to combine the ng-models above to capture the response both from checkboxes and free text and put it in one model?

question two:



how to disable the other checkboxes and the freetext if three choices are made (one of the choices could be also text area)?

Answer

Answer to your first question:

Use the same model with a key freetext in myModel.mychosenjobs

Answer to your second question: Add a method shouldDisable with $scope to handle this which bound to the ng-disabled directive as below.

HTML

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
    <label class="control-label" translate="jobdata.joblist.title">
        Types of job
    </label>
    :<br/>
    <div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
        <div > {{topic.item}}</div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype" ng-disabled="shouldDisable(subitem.key)" ng-model="myModel.mychosenjobs[subitem.key]">
                        {{subitem.values | translate}}

            </li>

        </ul>
    </div>
    <div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
        <p>or type it in yourself:</p>

        <textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)" ng-disabled="shouldDisable('freetext')" ng-model="myModel.mychosenjobs.freetext" ng-minlength="5" ng-maxlength="100"></textarea>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
    </div>
</div>

JS

$scope.shouldDisable = function(key) {
   if(!$scope.myModel.mychosenjobs[key]) {
      var count = 0;
      Object.keys($scope.myModel.mychosenjobs).forEach(function(key) {
         if($scope.myModel.mychosenjobs[key]) {
            ++count;
         }
      });

      if(count >= 3) {
         return true;
      }
   }

   return false;
};
Comments