submit form using Enter key using angular.js

Question

I need one help.I need to submit the form when user will press the enter key using Angular.js. I am explaining my code below.

    <form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
    <div id="SHOWDATA">
        <div id="transactionsPortlet" class="panel-collapse collapse in">
            <div class="portlet-body">
                <div class="totalaligndiv">
                    <div class="col-md-6">
                        <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Subject Type:</span>
                            <input type="text" name="shortname" id="resourcesub" class="form-control" placeholder="Add Your Subject Type " ng-model="subject" ng-keypress="clearField('resourcesub');">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth text-right" style="width:180px">No of Classes:</span>
                            <select class="form-control" id="resourceperiod" ng-model="period" ng-change="removeBorder('resourceperiod',subject);">
                                <option value="">Select Class</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div style="text-align:center; padding-top:10px;">
                        <input type="button" class="btn btn-success" ng-click="addClassData();" id="addProfileData" ng-value="buttonName" />
                        <input type="button" class="btn btn-red" ng-click="cancelClassData();" id="cancelProfileData" ng-value="cancelbuttonName" ng-show="showCancel" />

                    </div>

                    <div class="clearfix"></div>

                </div>
            </div>
        </div>
    </div>
</form>

Here i need if user is pressing enter key with out providing any data,the validating will display.If user is pressing enter key by providing all data the form will submit.Now i can do the operations by clicking the button but here i need both.Please help me.

http://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs — Simone Zandara, Nov 26 '15 at 07:15

score 2 · Accepted Answer · answered Nov 26 '15 at 07:16

You can put ng-submit like :

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-submit="addClassData();">

or if you want to keep it button instead of submit buttton than below directive may help you.

angular.module('NgEnter', [])
    .directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keypress", function(e) {
                if(e.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'e': e});
                    });
                    e.preventDefault();
                }
            });
        };
    });

and than call this directive to

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-enter="addClassData();">

submit form using Enter key using angular.js

1 Answers1