dimanche 6 novembre 2016

angularjs directive to limit number checkboxes and free text 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 > </div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype"
                       ng-model="myModel.mychosenjobs[subitem.key]">
                        

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




Aucun commentaire:

Enregistrer un commentaire