CODEWITHSUNDEEP
htmlangularjsvalidationangularjs-directiveionic-framework
CraZyDroiD
CraZyDroiD

Reputation: 7105

Only allow certain number of characters to type in angularjs/ionic

I have this text field and i need to stop the user from typing more than the allowed character. Lets say i want the user to type only 10 characters and if he types more the text field won't take it.It has to stop getting input after the character limit is reached..

I know there is ng-maxlength but it won't stop the user from typing more than the allowed characters though i can give a error message. Is there a way to do this.

my text field

   <div class="form-group" ng-class="{ 'has-error' : submitted && (thirdPartyForm.beneAcc.$pristine || thirdPartyForm.beneAcc.$invalid )}">
                <label  class="labelColor"><h5><b>Beneficiary Account/Card Number*</b></h5></label>
                 <input  ng-keyup="validateCreditCard();" onkeypress="return ((event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode == 8 || event.charCode == 45 || event.charCode == 32 || (event.charCode >= 48 && event.charCode <= 57))" type="{{inputType}}" ng-click="inputClick()"    id="beneAcc" name="beneAcc" ng-model="data.beneAcc" class="form-control"  ng-blur="validateDesitinationAccount(data.origin, data.beneAcc);" required>
                <span class="help-inline" ng-show="submitted && (thirdPartyForm.beneAcc.$pristine || thirdPartyForm.beneAcc.$invalid )">Beneficiary Account No cannot be left blank.</span>
                <span class="help-inline" ng-show="validateAccFlag" style="color:red" >{{validateMsgStr}}</span>
                <span class="help-inline" style="color:red;"  ng-if="LkrValidation">You cannot transfer Sri Lankan Rupees to foreign currency accounts.</span>
                <span class="help-inline" style="color:red;"  ng-show ="accountNoFlag">{{accountNoValidateMsg}}</span>
                </div>

Upvotes: 3

Views: 7866

Answers (3)

kunal shaktawat
kunal shaktawat

Reputation: 1520

use maxlength

eg: maxlength="10"

and also ng-trim="false" for count white space also.

Upvotes: 0

Sohan Soni
Sohan Soni

Reputation: 1238

if you want to restrict the input to certain length, then use maxlength instead of ng-maxlength.

<input ng-model="num1" type="text" maxlength="3"></input>

refer http://jsfiddle.net/xmkLmLms/

Upvotes: 7

jtc
jtc

Reputation: 66

This is from their docs.

<input type="text"
   ng-model=""
   [name=""]
   [required=""]
   [ng-required=""]
   [ng-minlength=""]
   [ng-maxlength=""]
   [pattern=""]
   [ng-pattern=""]
   [ng-change=""]
   [ng-trim=""]>

You would want to do this:

<input type="text" maxlength="10"/>

Upvotes: 2

Related Questions