how to add pattern validation in angular

Question

I am having a model with a float propert

public float Amount { get; set; }

and a text box to display anf edit the value of amount.

only number accepted

my text box should allow characters and on while entering it should show error message

here i want to add a validation to restrict only number and decimal point. here my validation is not working when i enter characters in the text box.

When i checked i can see that upon entering characters on text box {{model.amount}} is turned to blank . I think this is the problem. Can someone suggest what to do in this scenario

<input type="text" name="price" class="col-md-2 input-text" data-ng-model="price | currency:'' " maxlength="4" /> </div> <script> var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.price = 11.2; }); </script> — jubi
– jubi, Commented Mar 22, 2017 at 12:18
I have modified the textbox to format the number entering to format it to two decimal point. Actual requirement is to restrict entering decimal point through keybor(which i have done using directive) and on dispalying the number it should format to 2 decimal /float number . I have used currency and number:2 on my data-ng-model . But it is making my field to read only — jubi
– jubi, Commented Mar 22, 2017 at 12:20

Manoj Patidar · Accepted Answer · 2017-02-28 10:21:12Z

1

You Can add ng-patter or add html5 input type number with step attr.

HTML5

<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" *step="0.01"* />

ng-pattern

<form name="myForm">
  <input type="text" name="test1"  data-ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" data-ng-model="model.amount" /> 
  <span data-ng-show="myForm.test1.$error.pattern">invalid</span> 
  <span>{{model.amount}}</span><br/>
</form>

Ng-pattern with min and max

<form name="myForm">
    <input type="text" name="test1"  data-ng-pattern="/^(100(?:\.00)?|0(?:\.\d\d)?|\d?\d(?:\.\d\d)?)$/" data-ng-model="model.amount" /> 
    <span data-ng-show="myForm.test1.$error.pattern">invalid</span> 
    <span>{{model.amount}}</span><br/>
</form>

Please check working Ex. here https://plnkr.co/edit/WSqMHsLSCkRk7VVsNfHQ?p=preview

edited Feb 28, 2017 at 10:21

answered Feb 28, 2017 at 7:13

Manoj Patidar

1,1712 gold badges11 silver badges29 bronze badges

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

17 Comments

jubi Over a year ago

it is not firing the validation message.

Manoj Patidar Over a year ago

add this tag inside the form tag and then check it again. I also update Ans.

jubi Over a year ago

<input type="text" name="test1" class="col-md-4" data-ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" data-ng-model="model.amount" /> <span data-ng-show="test1.$error.pattern">invalid</span> <span>{{model.amount}}</span><br/> this doenst not display anything if i enter characters

jubi Over a year ago

type = number restricts the textbox from entering the characters . it allows only numbers. My requirement is to allow textbox to enter characters and display validation message

Manoj Patidar Over a year ago

I've have added working plnkr for your given code please find it

|

Amir Suhail · Accepted Answer · 2017-02-28 07:17:14Z

0

You can use ng-pattern to do this. It will compare the ng-model value with the pattern each time the value changes.

See the docs here

answered Feb 28, 2017 at 7:17

Amir Suhail

1,3043 gold badges13 silver badges32 bronze badges

Comments

Akshay Tilekar · Accepted Answer · 2017-02-28 08:47:16Z

Try referring this:

var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) { 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>Enter Decimal:<br>
<input type="number" name="decimal" ng-model="decimal" required ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/">
<span style="color:red" ng-show="myForm.decimal.$dirty && myForm.decimal.$invalid">
<span ng-show="myForm.decimal.$error.required">please enter decimal value.</span>
<span ng-show="myForm.decimal.$invalid">only two decimal places are allwed.</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.decimal.$dirty && myForm.decimal.$invalid">
</p>

</form>

Collectives™ on Stack Overflow

how to add pattern validation in angular

3 Answers 3

17 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

17 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related