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

Question

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)?

Aruna · Accepted Answer · 2016-11-26 12:40:24Z

2

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;
};

edited Nov 26, 2016 at 12:40

answered Nov 6, 2016 at 12:07

Aruna

12k3 gold badges31 silver badges42 bronze badges

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

7 Comments

cplus Over a year ago

for the first question, if I use the same model name for both, when I check the chekboxes, it automatically puts [object Object] in the free text area. that is why it is not working.

Aruna Over a year ago

@Mpondomise, May I please know how you used the model in the textbox? It should be ng-model="myModel.mychosenjobs.freetext (or) ng-model="myModel.mychosenjobs['freetext'] as I mentioned above.

Aruna Over a year ago

If possible, create a working fiddle as you have and I will fix it there.

cplus Over a year ago

sorry, i realized now that the code throws an error in the console: TypeError: Cannot read property 'jobsubitemONE' of undefined at b.$scope.checkboxDisable which refers to the second line of the function. why is this happening?

Aruna Over a year ago

Then, you didn't initialise the model as it seems. In the controller, just add this line, "$scope.myModel = {}; // if not done already" and "$scope.myModel.mychosenjobs = {};"

|

Collectives™ on Stack Overflow

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

First question:

question two:

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

First question:

question two:

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related