Can not activate Enter key using Angular.js

Question

I have one issue regarding activating enter key using Angular.js.I am explaining my code below.

<form name="billdata" id="billdata"  enctype="multipart/form-data"  novalidate ng-submit="addProfileData(billdata);" >
<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">College Title :</span>
<input type="text" name="colgmname" id="procolgtitle" class="form-control" placeholder="Add College Title" ng-model="colgname" ng-keypress="clearField('procolgtitle');"  maxlength="50">
</div> 

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Subtitle :</span>
<input type="text" name="subtitle" id="procolgsubtitle" class="form-control" placeholder="Add College Subtitle" ng-model="shortname" ng-keypress="clearField('procolgsubtitle');"  maxlength="30">
</div>

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Mobile No (10 digits) :</span>
<div ng-class="{ 'myError': billdata.mobno.$touched && billdata.mobno.$invalid }">
<input type="text" name="mobno" id="procolgcontactno" class="form-control" placeholder="Add Mobile No" ng-model="contno"  ng-pattern="/^[0-9]{10,10}$/" ng-keypress="clearField('procolgcontactno');" >
</div>
</div>
<div class="help-block" ng-messages="billdata.mobno.$error" ng-if="billdata.mobno.$touched">
<p ng-message="pattern" style="color:#F00;">Please add a valid 10 digit mobile no.</p>
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Email Address :</span>
<div ng-class="{ 'myError': billdata.email.$touched && billdata.email.$invalid }">
<input type="email" name="email" id="procolgmail" class="form-control" placeholder="Add Email Address" ng-model="colgemail" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" ng-keypress="clearField('procolgmail');"   maxlength="50">
</div>
</div>
<div class="help-block" ng-messages="billdata.email.$error" ng-if="billdata.email.$touched">
<p ng-message="email" style="color:#F00;">This needs to be a valid email</p>
<p ng-message="pattern" style="color:#F00;">This field needs valid email format(e.g-abc@gmail.com).</p>
</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">College Code :</span>
<input type="text" name="colgcode" id="procolgcode" class="form-control" placeholder="Add College Code" ng-model="colgcode" ng-keypress="clearField('procolgcode');"  maxlength="30" >
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Address :</span>
<textarea id="procolgaddress" name="address" class="form-control" placeholder="Add College Address" rows="5" ng-model="address" style="height:122px" ng-keypress="clearField('procolgaddress');"></textarea>
</div>
</div>

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

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

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

</form>

Working Form:

<form name="billdata" id="billdata"  enctype="multipart/form-data" novalidate ng-submit="addSectionData();">
<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">College Name :</span>
<select class="form-control"  id="colg_name" ng-model="colg_name" ng-options="colg.name for colg in listOfCollege track by colg.value " ng-change="removeBorder('colg_name',colg_name);" ng-readonly="colgread" ng-disabled="colgdis">
</select>
</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">Section Name</span>
<input type="text" name="colgmname" id="resourcesection" class="form-control" placeholder="Add section" ng-model="section" ng-keypress="clearField('resourcesection');" >
</div>
 </div>
<div class="clearfix"></div>    
<div style="text-align:center; padding-top:10px;">
<input type="button" class="btn btn-success" ng-click="addSectionData();"  id="addProfileData" ng-value="buttonName"/>
<input type="button" class="btn btn-red" ng-click="cancelSectionData();"  id="addProfileData" ng-value="cancelbuttonName" ng-show="showCancel"/>
</div>

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

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

In this form when i am pressing enter key nothing is happening.Here I need both button click and Enter key to submit the form.Please help me to resolve this issue.

hello can you use ng-keypress event. Also check check for the enter key ASCII value as 32. Then you can be all set. — Shardul Pendse, Nov 30 '15 at 04:54
I have `ng-keypress` event in all field for some other operation.Can i call the submit function there ? — , Nov 30 '15 at 04:57
You can use it. you need to check all the validation in program. Also can you please go through the ng-submit of form. — Shardul Pendse, Nov 30 '15 at 05:00
I have added .Please check my post.Its working in some form here i could not know what is the problem. — , Nov 30 '15 at 05:01
Call same function on ng keypress pass $event as a parameter and check key code event.which == 32. If it is 32 then only call your function addProfileData. — Shardul Pendse, Nov 30 '15 at 05:03

score 0 · Answer 1 · answered Nov 30 '15 at 05:05

0

You have button. i think it should be submit button

Replace

<input type="button" class="btn btn-success" ng-click="addProfileData(billdata);"  id="addProfileData" ng-value="buttonName"/>

with

<input type="submit" class="btn btn-success" id="addProfileData" ng-value="buttonName"/>

Or else if you can use blow mentioned directive.

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 you can call it like :

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

answered Nov 30 '15 at 05:05

krish

537
2
14

@ Krish : You are right.But in some form its working.Here i dont know what is the problem. – Nov 30 '15 at 05:19
@subhra can you place a working code in plunkr and provide us link ? it will help us to identify what's wrong here – krish Nov 30 '15 at 05:25
I did here same thing i have done there.Still i am posting the working form. – Nov 30 '15 at 05:29
Please check my post again. – Nov 30 '15 at 05:34

Can not activate Enter key using Angular.js

1 Answers1