AngularJS validating input without a form, inside a table

Question

My question may seem bizarre, but I've built an angular SPA which allows a user to input information directly into a table using inputs. I did it this way as the data never needs to be submitted anywhere and is used by a service to calculate some values to be displayed at the end. My issue now though is I would like to validate the input to make sure they aren't empty.

I've done some research and all the tutorials I found relied on the input being part of a form, which I'm trying to avoid as the layout in the table looks fine and suits the purpose.

        <table class="text-center">
                <tr>
                    <th class="header">Course Type</th>
                    <th>Amount of Times</th>
                    <th>Frequency (PA)</th>
                    <th>% Staff who need it</th>
                </tr>
                <tr>
                    <td class="header"><label for="induction">Induction:</label></td>
                    <td><input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /></td>
                    <td><input class="form-control" type="number" id="inductionFrequency" ng-model="staff.inductionFrequency" /></td>   
                    <td><p>100</p></td>             
                </tr>
                <tr>
                    <td class="header"><label for="newsLetter">News letter:</label></td>
                    <td><input class="form-control" type="number" id="newsLetterAmount" ng-model="staff.newsLetterAmount" /></td>
                    <td><input class="form-control" type="number" id="newsLetterFrequency" ng-model="staff.newsLetterFrequency" /></td>
                    <td><input class="form-control" type="number" id="newsLetterPercent" ng-model="staff.newsLetterPercent" /></td>
                </tr>
       </table>

    <div class="row margin-top">
        <div class="col-sm-4 col-sm-offset-4">
            <button class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button>
        </div>
    </div>  

The information is stored in an object, which is later used to run some calculations for the user, what would be to recommended way to add some basic validation using angular 1.2 to not allow the user to continue if the values are empty? Sorry this is my first angular app. I've done JavaScript validation in the past using on blur etc, but it seems if I can use Angular it would be much simpler.

Answer 1

In AngularJS the form directive is automatically bound to the found form element. You don't have to use the form element. You can simply use ng-form.

<table ng-form="exampleForm">
  ...
</table>

This creates a FormController on the element and adds the "form" to the local scope and would be accessible there (e.g. $scope.exampleForm).

I wrote an example plunker here and did a couple things.

1. I added the ng-form directive to the table.
2. I added required to the first input element
3. I add the ng-disabled directive to the button and bound it to the $invalid property of the form.

You will see once the first input has a value, the button becomes enabled.

On another note, I would highly suggest upgrading from 1.2.x. There are many updates to security, stability, and performance that you are possibly missing out on.