Ang模式中的ng模式

Question

Users enter username here and username is just number

<fieldset class="col-sm-12 col-xs-12 text-center">
            <label for="username">Username</label>
            <input type="text" id="username" ng-pattern="/^[0-9]*$/"
                   class="text-warning"
                   ng-class="{'text-left': form.userName.$valid}"
                   autocomplete="off"                  
                   ng-model="self.user.userName"
                   name="userName"
                   ng-required="true"
                   ng-blur="self.user.usernamePlaceholder = false"
                   ng-focus="self.user.usernamePlaceholder = true"
                   maxlength="20"
                   onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');this.blur(); this.focus() }" />
        </fieldset>

But ng-pattern dosent work

I can type anything

Answer 1

When we use ng-pattern in fact we set input validation for that input.

for example:

<input type="text" ng-pattern="/^[0-9]*$/" ng-model="test" />
{{test}}

This input already validate by ng-pattern that mean when i want to type test123 return empty to me and when type 123 will return 123 , so your codes is fine.

But what you want is not pattern it's directive , i write custom directive ngInteger :

 var app = angular.module("app", []) app.directive('ngInteger', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { // this next if is necessary for when using ng-required on your input. // In such cases, when a letter is typed first, this parser will be called // again, and the 2nd time, the value will be undefined if (inputValue == undefined) return '' var transformedInput = inputValue.replace(/[^0-9]/g, ''); if (transformedInput!=inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return transformedInput; }); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <form name="form"> <h3>ng-pattern</h3> <input type="text" name="pattern" ng-pattern="/^[0-9]*$/" ng-model="test1" /> {{test1}} <p>test 1 validation: {{form.pattern.$valid}}</p> <h3>ng-integer</h3> <input type="text" name="integer" ng-integer ng-model="test2" /> {{test2}} <p>test 2 validation: {{form.integer.$valid}}</p> </form> </div> 

Answer 2

Not necessary to use ng-pattern ,if you are using directive. It actually does the same thing on keypress itself.

valid-number here is directive mentioned below. Mention the `maxlength` if needed.

In HTML:

<input type="text" valid-number maxlength="12" ng-model="test" />

Use this directive in input tag

var myApp = angular.module("myApp", []);
myApp.directive('validNumber', function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            if(!ngModelCtrl) {
                return; 
            }

            ngModelCtrl.$parsers.push(function(val) {
                if (angular.isUndefined(val)) {
                    var val = '';
                }
                var clean = val.replace( /[^0-9]+/g, '');
                if (val !== clean) {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }
                return clean;
            });

            element.bind('keypress', function(event) {
                if(event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
});

Hope this helps..