how to allow only alphabets in input box with angular js

Question

I have a input box with angular js validation.. The code is

    <div class="col-sm-12">
        <input type="text" name="drug_name" class="form-control" placeholder="Drug name" ng-pattern="/[aA-zZ\s]$/" ng-model="vmp.medication.drug_name" maxlength="150" typeahead="drugn as drugn.drugName for drugn in vmp.drugList | filter:$viewValue" autocomplete="off"  required>
<span class="pull-right font-10">(Max 150 chars.)</span>
  <span ng-messages="form.drug_name.$dirty && form.drug_name.$error">
   <span ng-message="required" class="error-inner">Drug name is required.</span>
   <span ng-message="pattern" class="error-icn">Only Alphabets are allowed</span> </span>
     </div>

The above code is validating the textbox and throwing error if I enter numbers. But What I need is , It should restrict entering numbers. The user should not be able to enter numbers in the textbox at all.. Can anyone helpme to do this..

Possible duplicate of [Limited to write only a-z in angular](http://stackoverflow.com/questions/27986543/limited-to-write-only-a-z-in-angular) — hsz, Mar 11 '16 at 10:59
Possible duplicate of [Validation on text on alphabets enter](http://stackoverflow.com/questions/26257412/validation-on-text-on-alphabets-enter) — Sandeep Sukhija, Mar 11 '16 at 11:05

score 3 · Answer 1 · answered Mar 11 '16 at 11:07

3

Here is what you are looking for ng-pattern-restrict. In your case should looks like:

<input type="text" pattern="[a-zA-Z]+" ng-pattern-restrict />

answered Mar 11 '16 at 11:07

alexey

1,381
9
19

score 0 · Answer 2 · edited Mar 12 '16 at 06:10

app.directive('name', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^A-Za-z ]/g, '');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

This won't allow digit input.

how to allow only alphabets in input box with angular js

2 Answers2