How can I configure not allowing submission of form without filling in the values?

Question

I am new to AngularJS and I have developed a form, wherein under a section, a user presses the '+' button to add a row, and then fill in the values. The code is below.

<uib-accordion>
    <uib-accordion-group heading="Parameters" is-open="true">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>Key Name</th>
                <th>Value</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="cftParams in ctrl.app.cftParams track by $index">
                <td>
                    <input type="text" class="form-control" id="inputName" name="inputName"
                           ng-model="cftParams.key" placeholder="Enter name of parameter" ng-minlength='3'
                           ng-maxlength='100' required>
                    <span ng-show="!cftParams.key.length">Please enter a key.</span>
                </td>
                <td>
                    <input type="text" class="form-control" id="inputValue" name="inputValue"
                           ng-model="cftParams.value" placeholder="Enter value" ng-minlength='3'
                           ng-maxlength='100' required>
                    <span ng-show="!cftParams.value.length">Please enter a value.</span>
                </td>
                <td>
                    <button class="cbtn cbtn-plus" ng-click="ctrl.app.cftParams.splice($index, 1)">-
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
        <button class="cbtn cbtn-plus" ng-click="ctrl.AddParameter()">+</button>
    </uib-accordion-group>
</uib-accordion>

Now, I want, if the user presses the '+' button, he/she will have to enter some values for 'key' and 'value'. That is he cannot submit the form without entering the values for key and value (if he has pressed the + button). If he doesn't wish to enter those values, he should delete the row by pressing the '-' button. How can I configure this? I tried adding <\span> but that does something else.

xkeshav · Accepted Answer · 2017-04-29 17:42:42Z

1

I assume you have <form> in the page which ends after the <button> then you can disable the form button by this

<button type="submit" ng-disabled="formname.$invalid" class="cbtn cbtn-plus" ng-click="ctrl.AddParameter()">+</button>

answered Apr 29, 2017 at 17:42

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

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

Collectives™ on Stack Overflow

How can I configure not allowing submission of form without filling in the values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related