I'm new to Angular UI-Mask and I don't understand the documentation enough to do this.
I'm trying to limit a text input to lowercase letters and numbers, no spaces should be allowed.
I tried this:
<input type="text" ng-model="path" ui-mask="[a-z0-9]">
And that didn't work.
Also if they type in an uppercase character want it to just translate to lowercase.
Related
I am developing first time in angular and my requirement is the input should take only digits up to length 10.
After lot of searches I know that I can either use input type as number which will restrict only numbers but the issue with this is it allows e character as exponential sigh and - sign for the math numbers. I do not want this. What I need is the text area should only allow numbers up to length 10 chars.
Hence I am using input type as text like below:
in my component template I defined something like below:
$
<div class="number">
<input type="text" formControlName="Q4a" maxlength="10" ng-
pattern="onlyNumbers" required /><!"/^[0-9]{1,7}$" ---->
</div>
onlyNumbers = '/^\d+$/';
$
but this does not work. The max length allowed is 10 chars but it does allow characters.
How do I achieve what I need, which is an input area that allows only digits up to 10 characters?
I want to restrict the input text field to accept only specific special characters and also the special character should not be the first character.
I have tried but could not able to find a solution for this problem.
<input type="text" ng-model="model.value" required="required" ng-pattern="/^[a-zA-Z0-9]+[^]*$/"/>
Given your attempt, I believe you want only A-Z, a-z and 0-9 for the first character, and after that, you want all characters except A-Z, a-z and 0-9.
The regex/ng-pattern for this is ^[a-zA-Z\d]+[^a-zA-Z\d]*$
So the field will be
<input type="text" ng-model="inputField" required="required" ng-pattern="/^[a-zA-Z\d]+[^a-zA-Z\d]*$/"/>
I have added a maskDefinition on ui-mask and it is working great except it only allows me to enter one character in the input box. I need to be able to enter many characters.
This is the maskDefinition (the asterix in there is my attempt to permit many characters. The result is the same with or without the asterix.)
'N': /^[a-zA-Z0-9-' ]*$/
This is how I use it:
<input data-ng-model="demogItems.firstName" ui-mask="N" name="firstName" data-ng-required="true" />
It works great allowing upper and lower case letters, numbers, and 3 special characters (hyphen, apostrophe, and space) and no other special characters. But it only allows one of any of those. Also, the requirement is that the characters are allowed or not allowed, onKeyUp, not on onBlur.
How do I get this maskDefinition to allow many characters?
Each token in maskDefinition needs to match a single character in the input field. So you cannot use '*' in the regex for your 'N' token, as that would match multiple characters.
Since you want to be able to input a variable number of characters, you must set ui-mask to something like '?N?N?N?N?N' (repeat '?N' for as many maximum characters you would like to accept).
It's an ugly solution, but I could not find a better one with ui-mask.
I suggest you take a look at ui-number-mask instead. It has it's limitations as well, but it may suit you better.
We have a zip code field. Right now we have it as type="text", but that means that phones don't use the numeric keypad. But before, when we had it as a type="number" the leading zeros would disappear - I think because of Parsley.js. Does this sound right? Is there a parsley.js option that allows us to use the number type without removing leading zeros?
I am using type="tel" plus a pattern.
It's not because of Parsley, it's because of the spec.
Use type=tel and pattern="-?\d+"
I am trying to create a Sublime Text snippet for AngularJs. This snippet should expand to AngularJs controller (or service, etc or any ng component). In the resulting code, it should construct the controller name in camelCase from the hyphenated file name.
For example:
when I type the snippets strings, say, ngctrl in an empty file called employee-benefits-controller.js, it should expand as given below:
angular.module('').controller('EmployeeBenefitsController', ['', function(){
}]);
I am trying to use the $TM_FILENAME variable by applying a regex on it to achieve this conversion. If anyone has already done this, please let us know.
You could use something like this:
<snippet>
<content><![CDATA[
angular.module('${1:moduleName}').controller('${TM_FILENAME/(^|-|\.js)(.?)|/\U\2\E/g}', ['', function(){
${2://functionCode}
}]);
]]></content>
<tabTrigger>ngctrl</tabTrigger>
</snippet>
Notes:
Note 1: maybe you want to change the scope so that the snippet its only triggered in javascript context.
Note 2: I'm not familiar with angularjs, so I don't know its naming conventions (I have supposed that an uppercase letter its needed after a hyphen [-] character and at the begining of the name, but I don't know if a uppercase character its needed after a dot character for example). So, you'll probablly have to adapt the snippet.
Note 3: expression explained:
${TM_FILENAME/(^|-|.js)(.?)/\U\2\E/g}
TM_FILENAME its the var_name item
(^|-|.js)(.?) its the regex (the parts of the variable we select).
\U\2\E its the format_string (how we format what we have selected).
g its the options (g means globally, so every time something its selected the format its given).
TM_FILENAME: the file name with the extension included.
\U => init uppercase conversion. \E => finish uppercase conversion. \2 => second group, i.e. second parénthesis, (.?), its a single char or an empty string.
(^|-|.js)(.?) First we look for the beginning of the word (^), or for a hypen character (-), or for the extension (.js).
(.?) Then we select in a parenthesis group (second group) the character (if any) after that hypen (or at the beginning of the word or after the extension).
Finally we use the uppercase conversion over that selected character as explained. Note that as there is not character after the extension, we are simply removing the extension from the output.
Note 4: as you probablly know, using ${1:moduleName} and ${2://functionCode} allows you to quickly move (using tab) and edit the important parts of the snippet once it has been triggered, such as the module or the function code.