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.

why don't you put the whole table inside the form? form does not change your layout — Yaser
– Yaser, Commented Jan 5, 2017 at 3:59

Stephen J Barker · Accepted Answer · 2017-01-05 06:12:40Z

6

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.

I added the ng-form directive to the table.
I added required to the first input element
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.

edited Jan 5, 2017 at 6:12

answered Jan 5, 2017 at 5:04

Stephen J Barker

1,01910 silver badges16 bronze badges

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

Comments

Ramesh Rajendran · Accepted Answer · 2017-01-05 05:11:37Z

1

If you use form, then the form is handle validation default by formname.$isvalid,fromname.$dirty,etc

If you don't want to use form tag, then You need to do it by manual condition using ng-show to show/hide the error message with two way binding.

like

<input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /> 

<span style="color:red" ng-show="staff.inductionAmount === undefined || staff.inductionAmount === ''"> idection name is required</span>

another way is same as what you did in javascript with on-focus, here the same way to do with using ng-fucus and the ng-show/ng-hide ways.

edited Jan 5, 2017 at 5:11

answered Jan 5, 2017 at 5:00

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Collectives™ on Stack Overflow

AngularJS validating input without a form, inside a table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related