Show ? in textbox when textbox have ng-pattern for numeric validation

Question

I need to show '?' when the value not able to read from scanner which returns me value by including '?'

Let say document has sr no as '123' but let say for some reason scanner not able to read it then it returns me as "12?" or "???" or "?23" or "1?3"

If any digit which is not readable that need to corrected by user manually for that i need to show them in to the textbox.

In our application we are using angularjs validations, which are not allowing me to show above values inside textbox as it contains '?' which is not numeric value.

Also I should enforce the numeric validation so that user can correct the above and submit to the server.

So how we achieve this functionality ?

<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="text" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<input ng-show="toggle" type="submit" value="submit"/>
<input ng-show="!toggle" type="button" ng-click="AfterProcessing()"  value="After Processing"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="Reset" ng-click="reset()"/>
    <br/>
<span>Activity : {{message}}</span>
</form>
</div>

JS code

function formCtrl($scope){
    $scope.price= "123";
$scope.toggle = false;
$scope.message="No Activity";
$scope.onSubmit = function(){
    $scope.toggle=false;
    $scope.message="onSubmit clicked...";
}
$scope.AfterProcessing = function(){
    $scope.toggle=true;
    $scope.price ="1?3";
    $scope.message="AfterProcessing clicked...";
}
$scope.reset=function()
{
    $scope.toggle=false;
    $scope.price ="123";
    $scope.message="Reset clicked...";
    }
 }

I have created sample as below.

Plz check on JsFiddle sample

-Thanks

score 0 · Answer 1 · answered Jun 10 '14 at 14:18

You need to create a CSS Class that will be applied to text box. Using :before and :after pseudo css construct, you can add ? character and get desired result.

So, 1. Define a CSS Class with :before and/or :after as per your requirement 2. On the HTML, use ng-class="{'your-class': $error, 'regular-class': '$pristine'}"

Let me know if you need a code sample and a plunker. (I am at the end of the day. May be will provide some code tomorrow. )

If you can create a plnkr based on above and submit link here, more people would be able to help you. thanks.

Show ? in textbox when textbox have ng-pattern for numeric validation

1 Answers1