setting a maskDefinitions item in ui-mask - angularjs

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.

Related

Mask MUI input to be able to add one or two digit number

I am implementing an input, where the user should type number in the following format: 12/34/56. I have found that react-input-mask allows to do so. But my question now is how to make the mask either require the user to fully enter the number (to remove such cases 1_/3_/_5) or add zeros where the number wasn't entered.
Also, another thing I think of is to allow either one or two digits, but I haven't seen documentation on this in react-input-mask
I am willing to choose another mask library, if you know it can be done so.
I figured it out. There is a property called maskChar, if you set it to null, e.g <InputMask maskChar={null} mask="99/99/99" /> won't allow user to proceed to second number, without filling both digits.

Regex without spaces [duplicate]

I am writing a regular expression(regex) for adding multiple email ids in an input box with following conditions:
Multiple email ids must be separated with comma ,
Need to have atleast one email id
There should not be any whitespaces in input field.
So i created this regex:
^(([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([,.](([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$
I tested it in regex101.com and its working like a charm https://regex101.com/r/bU7rU8/1
But when i integrate it with code, it works, but fails on leading and trailing whitespace.
Here is the demo link: http://jsfiddle.net/2G8gA/330/
AngularJS trims the input by default, so you need to use ng-trim="false" in order to pass leading and trailing whitespace to your pattern regex.
See documentation:
ngTrim (optional)
If set to false Angular will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input.
(default: true)
Do you want leading/trailing spaces allowed on the whole string, or around each individual address?
For the former your regex should be
/^(\s*([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([,.](([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+\s*)*$/
and for the latter
/^(\s*([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25}\s*)+([,.](\s*([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+\s*)*$/

Regular Expression Generation for AngularJS ng-pattern

I'm using a regex to validate a form input. So basically a user can input "SELECT some_name of select_match".
So far I have the regex: \bSELECT\b \bof select_match\b
The last part is the middle part, which I think should be [a-zA-Z] but I'm not sure how to place it in the middle. I've read multiple pages but can't get it to work.
Also preferably I'd like the regex to ignore spaces between "SELECT" and of "select_match". Meaning that SELECT blabla of select_match and SELECT blabla of select_match would both be validated as correct.
Can anyone tell me how to do this? Thank you.
If I understood you correctly, this should work:
/^SELECT\s+(\w+)\s+of select_match$/
Notes:
This allows any number of spaces between "SELECT" and the match_name; and between the match_name and the "of" (but, at least 1. To change to at least 0, change the \s+ to a \s*)
After that, the rest of the string must be exactly like that (same spaces and words exactly).
The match_name will be in match group 1.
If this doesn't work, show a bit of your code (where you use it) and we can try to find the problem.
Note: If you are using it in ng-pattern lose the "/"s (being the pattern: ^SELECT\s+(\w+)\s+of select_match$).
Note2: If you are using it in a string, remember you might need to escape every "\" (making it a "\", and the result: ^SELECT\\s+(\\w+)\\s+of select_match$

Decimal as first character in a number input field

I have a <input type="number"></input> field and when I try to put in a decimal as the first character, it comes up as invalid (I have an ng-change firing).
.5 won't work, but 0.5 is valid. Is there something I can do about this?
Per the HTML spec, .5 is valid for <input type="number">.
So, you’re right, and the tool (browser? Angular?) that validation error’s originating from is wrong.
As far as how to deal with it—how to work around it—I don’t know what to suggest, but as someone who actually works on the specs for this stuff, I would like to ask you to please at least file a bug against whatever tool is (mis)performing the actual validation that’s causing you to see that message. If nobody takes time to report spec-conformance bugs like this (but instead everybody works around it by just putting, e.g., 0.5 to get past it), then the bugs never get fixed.
Anyway as far as evidence for my assertion that .5 is in fact valid: The HTML spec is pretty clear on this; see the section defining what a valid floating-point number is:
A string is a valid floating-point number if it consists of:
Optionally, a U+002D HYPHEN-MINUS character (-).
One or both of the following, in the given order:
A series of one or more ASCII digits.
Both of the following, in the given order:
A single U+002E FULL STOP character (.).
A series of one or more ASCII digits.
Optionally:
Either a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E).
Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B PLUS SIGN character (+).
A series of one or more ASCII digits.
Along with that evidence from the spec itself, here’s a record of other supporting evidence: There was in fact a time when the HTML spec didn’t allow .5 but instead required it to be written as 0.5; however, after a “Floating point numbers beginning with a dot should be valid and parsed correctly” bug was raised against the spec, the spec was subsequently changed (in 2011) to state what it currently states (that is, too allow, e.g., .5).
So, any tool that’s flagging .5 as an error likely has not been updated in this regard since 2011, and so it regardless is in need of its maintainer(s) to go back into their code & evaluate their code against the current spec requirements, to make sure they are conforming to the current spec.
I hope the above provides enough ammunition to use in raising a bug against the responsible tool.
If you want all the input numbers to be valid then you can set in your input field step to "any". It works all integers and decimals numbers. Like -
<input type="number" step="any" />

WPF Flowdocument - Prevent line break before % sign

I've got a FlowDocument generating a document for a client, and it's getting a line break that they don't like. Is there any way to mark a section of text that it should avoid line breaks? Something like this:
<Paragraph>Here is a paragraph where there should be <span NoLineBreak=True>no line break</span> in a certain part.</Paragraph>
Obviously, a Span doesn't have a NoLineBreak property, but I'm wondering if there's some equivilant functionality available, or if someone can get me started on a way of implementing a SpanWithNoLineBreak class or RunWithNoLineBreak class?
UPDATE
Actually, one issue I'm having is with a percent sign, where there isn't even a space:
<Paragraph>When I print and ½% I want the one-half and '%' symbols to not line break between them.</Paragraph>
The & #x00BD; is the unicode for a ½ symbol. I'm getting a line wrap between the 1/2 and the % even though there's no space between them.
The Unicode character "Word Joiner" (U+2060) is intended for just this purpose. It "does not normally produce any space but prohibits a line break on either side of it" (Wikipedia). You place it between U+00BD and '%' to prevent a line break between them.
Unfortunately, WPF (or perhaps the typical fonts supplied with Windows) don't support it properly, and instead render it as a square box. As an alternative, you could use U+FEFF; the use of this character as a zero-width non-breaking space is now deprecated (it's reserved for use as a byte-order mark), but it worked as a line-break-preventer for me.
Finally, there are some other characters that can also be used for this purpose: U+202F (narrow no-break space) also prevents breaking, but also renders as a very thin space. U+00A0 (no-break space) prevents breaking and displays as a normal space.
Try replacing the spaces with non-breaking spaces.
EDIT: Well there's always the backup plan of just putting in TextBlocks in your FlowDocument with TextWrapping=NoWrap, but I'd try to find a better way...

Resources