I have a dynamic regExp and dynamic masks for each input. For example: regExp is [0-9]{9,9} and mask is XXX-XX-XX-XX. Of course for angular's pattern validation it is incorrect.
Is it possible, that angular somehow deem this value correct? For example: 222-22-22-22
If i understand your problem correctly , you can use ui-mask for this .
<input id='ui-mask' name="date" ng-model="date" required autocomplete='off' ui-mask='"99-99-9999"'>
This would mask the input as the given pattern of number. Here is a jsfiddle sample . Hope this would help you.
If you are using HTML5, you can use the "pattern" attribute for input and let the browser do the rest. Obviously, with AngularJS, you can let this attribute to be dynamic. Look at the code above:
<input type="text" pattern="{{mc.pattern}}" ng-model="mc.model">
If the user inputs an invalid text then the input (and form) will be not valid.
Let me know if I can help you better.
Bye
Related
I need to validate user input with below validations and shoulw not allow user to submit the form untill the validation error messages are cleared
Below are the validations my code need to perform.
1)String will be a alphanumeric.
2)String Length should not be more than 7
3)String should be either of theses patterns "w123456"(w followed by 6 numbers) or "df12345"(df followed by 5 numbers)
Can someone help me how to validate this?
Contact: <textarea required ngModel name="contacts" #contacts='ngModel' placeholder="Enter Valid contactid" ngModel name="contacts" #contacts="ngModel" rows="10" cols="15"></textarea>
I've provide a JSFiddle link below.
https://jsfiddle.net/sonyjammie/sx4rv8ne/4/
You can try to use compose validator of RxwebValidators for using multiple validators. You can refer [https://stackblitz.com/edit/angular-48jrxb?file=src%2Fapp%2Falpha-numeric-add.component.ts] for your reference.
Typically you would validate this with either some validate() function on the submit button, or alternatively, if using the RXJS library, you can assign an [array of Validators] as a second #parameter to a FormControl object.
Also check out the official documentation on Form Validation from Angular.
In Angular6, you would keep the form's submit button disabled by using the [disabled] attribute on the button element, and assigning your specific conditions to said element's [disabled] attribute.
name:['',[Validators.required,Validators.minLength(3),Validators.maxLength(15),Validators.pattern('[A-Za-z]')]],
Im using an angular 1 app.
I have this field:
<input type="string" maxlength="4" ng-model="account.myNumber" />
This field should only accept integers. I think that if I use "type=number" some browser will display the field in a strange way with some kind of selectbox to change the numbers in the field. So I think it's best to have a regex to only allow numbers.
However, this field has a maxlength of 4 characters ONLY IF the first character is not equal to 0.
If the first entered character is 0, then the maxlength should be 5.
What I wonder if there is some regex to solve this. Or should I let the controller check this? I think it would be neater with a regex if it is possible to let it calculate that.
You can use the HTML5 pattern attribute to accomplish this:
<input type="string" pattern="^0?[0-9]{0,4}$" ng-model="account.myNumber" />
I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:
<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">
But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.
How can I achieve what I want with html5?
So you can totally do that by adding type="number" to your input field, It'll work in most browsers.
I'd recommend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.
var phone_input = document.getElementById('contact_phone');
function validDigits(n){
return n.replace(/[^0-9]+/g, '');
}
phone_input.addEventListener('keyup', function(){
var field = phone_input.value;
phone_input.value = validDigits(field);
});
Here's a quick codepen
I'd also put a bit of validation on the model, just in case someone bypasses the JS.
I think it won't work with plain html5 since the pattern goes into affect after you submitted the form (It will make validation fail). But since you are already using js, you can just do it with for example the jQuery.keypress() function.
i am using ReactJS and ReduxJS to construct my application .
I created my form using Redux-Form and there are many text input and for one of them ,i am using onkeyDown event to increase and decrease number in my text
so when i click up arrow or enter first digit the text is auto
completed with previous date entered(history) that disturb when i
click another up arrow
[Hint] I tried AutoComplete=off and did not work
You just have the attribute cased incorrectly. You can use the following 3 attributes on the input:
autoComplete="off"
autoCorrect="off"
spellCheck="off"
Notice that each are camel case.
Seems like autoComplete="off" no longer works in Chrome. A workaround is to either set autoComplete="new-password" or a value not supported: autoComplete="something-unsupported".
i have tried all of the above example but this one is worked for me autoComplete="off"
I have an input in my form where the user have to write an amount to pay. The problem is that the user have different ways to do it, it could be 1,350.55 (this is he correct one), but it could be something like this 1.350,55 or 1.350. So, is there any way to parse the amount to my correct form?
Thanks!
You want to parse the input, right?
Why not try to make the input a currency field?
And then parse it into a container through angular, so that customers may see the value and then work with the angular filtered value.
Here is a fiddle:
http://jsfiddle.net/lacrioque/vouLmrac/
<p><label for='numberinput'>Your Price here: </label><input type='number' name='numberinput' ng-model='numbertofilter' placeholder="1,350.99"/></p>
<p>Price: <span>{{numbertofilter | currency }}</span></p>
If you don't know the format, how would you parse 13.995? Would it be "13955" (an integer) or the float one?
You may instead want to mask the format and avoid thousand separators entirely. And tell the user not to use them.
Use ng-pattern
Attach ng-pattern to your input and feed it a RegEx of your required pattern. This way people will only be able to input in the correct way and you can avoid bad data.
Please check out this link for more information on input formatting.
Example
Here I have an example for any whole number up to 9999999 its very simple if you understand RegEx
<input type="number" ng-model="price" name="price_field"
ng-pattern="/^[0-9]{1,7}$/" required>
Note
You can check your RegEx here.