Force pattern on input Angular

Question

So I am new to Angular.

What I want to do is to force an input field (text) to be as the following:

*Uppercase only, or change the letters to uppercase automatically
*Max 30 characters
*No special characters

If someone tries to insert a special character it won't be displayed at all. So it's not only validation. It's accepting those rules on the input.

And I want all of this to be done on that field on a specific condition: let's say when the placeholder is equal to "Nickname" which is in my model formField.CustomFieldName

Thank you in advance

Charlie Ng · Accepted Answer · 2017-04-17 18:26:46Z

2

There are at least two ways you can do. Use ng-keypress to either check each character you enter or check regular expression on the input. I am not going to give the entire solution but you can go from here.

<div ng-app="myApp">
<div ng-controller="myController">
  <input type="text" ng-model="yourInput" ng-keypress="yourKeypressFunction($event)">
</div>
</div>

In your js:

var myApp = angular.module('myApp',[]);

myApp.controller('myController', ['$scope', function($scope) {
    $scope.yourInput = "";
  $scope.yourKeypressFunction = function(event) {
    console.log(event); // check for event.which, if it is not the char you want, return;
    console.log($scope.yourInput); // check for regular expression
  }
}]);

https://docs.angularjs.org/api/ng/directive/ngKeypress

answered Apr 17, 2017 at 18:26

Charlie Ng

6405 silver badges11 bronze badges

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

5 Comments

Charlie Ng Over a year ago

the rest is just javascript. I can update my answer

Hassen Ch. Over a year ago

I would appreciate that. Also, this is inside and ng-repeat. How do I activate this only the specific case that I have mentioned?

Charlie Ng Over a year ago

sounds like you could. I am not sure what you want exactly. By in ng-repeat there is track by $index you can use. You can specify which $index you wanna apply the condition by using ng-if="$index === 0" on input and ng-if="$index !== 0" on another input.

Hassen Ch. Over a year ago

well it's dynamic so I have no idea on what index the field will be. It's fairly simple: I have an ng-repeat, and I want to apply that input logic when the model has the value "nickname". So I have to use the same input in the ng repeat and following the model value, I apply the logic or don't apply it.

Charlie Ng Over a year ago

instead of ng-if="$index === 0" you can do ng-if="model === 'nickname'" and ng-if="model !== 'nickname'"

alapati · Accepted Answer · 2017-04-17 18:02:47Z

0

Try onchange event and write a method in the component that you are looking to do, or if you are using observables then try to use the observable methods to transform your input to your requirement.

Check this link http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

This has good explanation how to deal with forms and input fields

answered Apr 17, 2017 at 18:02

alapati

11

1 Comment

Hassen Ch. Over a year ago

I'm sorry but that does not help. Like I said I'm new to angular and I don't quite understand what that is supposed to say. I have landed in an on-going project using angular

adam · Accepted Answer · 2017-04-17 18:08:32Z

0

you can do it like this using jQuery for restriction of characters

$("#youTextFieldId").keypress(function(e)
{
var code = e.which || e.keyCode;
// 65 - 90 for A-Z and 97 - 122 for a-z 95 
 if (!((code >= 65 && code <= 90) || !(code >= 97 && code <= 122) )
 {
  e.preventDefault();
 }
});

and for your text limit

<input id="youTextFieldId" type="text" maxlength="30" style="text-transform:uppercase">

answered Apr 17, 2017 at 18:08

adam

1931 silver badge9 bronze badges

1 Comment

Hassen Ch. Over a year ago

this is a partial answer. I want the validation to occur only when my model formField.CustomFieldName=="Nickname". in your solution the uppercase will apply to everything, but I want it to be performed only for that condition

sumit chauhan · Accepted Answer · 2017-04-17 19:18:39Z

0

try to use ng-pattern=you pattern with maxlength in your text field. for eg:

<input type="text" ng-pattern="/^[a-zA-Z0-9]*$/" maxlength="30">

The /^[a-zA-Z0-9]*$/ will allow you to enter only character and numbers only. not any special characters.

answered Apr 17, 2017 at 19:18

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

Comments

Sagar · Accepted Answer · 2017-04-17 19:44:09Z

0

Use https://github.com/candreoliveira/ngMask with a little study of documentation your pattern is very easy to create and it will also force that the user inputs the desired pattern only and on top of that you can just write maxlength="30" ,input type="text"

Look out at this example for better understanding in the demo of the ngMask ngMask String Example Demo

answered Apr 17, 2017 at 19:44

Sagar

4932 silver badges8 bronze badges

Comments

HassenCh · Accepted Answer · 2017-04-18 17:16:07Z

So this is the solution to this problem.

I hope it helps someone. I made a fiddle for this: http://jsfiddle.net/m152d0t9/

var app = angular.module("myApp", []);

function Fiddle($scope) {}

app.directive('customInputFormat', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    scope: {
      customInputFormat: '='
    },
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) {
        return;
      }

      scope.$watch(attr.ngModel, function(newVal, oldVal) {
        if (!scope.customInputFormat) {
          return;
        }
        if (newVal && newVal.length) {
          var newStr = newVal.replace(/[^a-zA-Z0-9\s]*/g, '').toUpperCase();
          if (newStr.length > 20) {
            newStr = newStr.substring(0, 20);
          }
          ctrl.$setViewValue(newStr);
          ctrl.$render();
        }
      })
    }
  };
});

And for the HTML:

<ul ng-controller="Fiddle">
  <li>
    <label data-ng-init="condition = true;" for="foobar"> Input text</label>
    <input custom-input-format="condition" id="foobar" name="foobar" type="text" ng-model="foo" required />
  </li>
</ul>

Collectives™ on Stack Overflow

Force pattern on input Angular

6 Answers 6

5 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related