I am a newbie in angular 2 here. Just want to ask if how can I bind the [ngFormControl] value inside a directive? I tried using#HostBinding('value') get value {return this.el.value} but it just updates the nativeElement's value, not the [ngFormControl]'s value.
I am creating a number only directive wherein it accepts a configuration on what type of number to accept (e.g negative or positive, with or without decimal). If negative is allowed, I will allow the dash symbol (-) to be inputted. But when the user only inputs a dash and no tailing numbers, once the input loses its focus (blur event fires), I updated the nativeElement's value with empty string. The view is blank but the [ngFormControl] still has the value of '-'.
Here is my code for blur event:
#HostListener('blur', ['$event']) onBlur($event){
if(isNaN(this.el.value)){
this.el.value = '';
}
}
What I want to accomplish is for the directive to edit or modify or update the value of the [ngFormControl] from where the directive is attached to.
Thank you! =)
Related
I have a model, and it can take one of two forms:
{
"x-position" : "center"
}
or
{
"x-position" : 20
}
Notice how in the first example, x-position is a string, while in the second it is an integer. These values are bound to an HTML input of type text. I can't use input of type "number" because then it would error if it tried to interpret "center". Therefore, I must use text.
If we look at the second example, if the user changes the value to 25, since the input html element is of type text, my model is now:
{
"x-position" : "25"
}
The issue is the text input has now changed the value type of x-position in my model from an integer to a string (20 to "25"), which is undesirable. This is because I'm forced to set the input type to "text", even though I want to allow both text and number, which is impossible. I wouldn't mind accepting only string, as long as I'm able to manipulate the string somehow and convert it to number before passing it back to my model.
Is it possible for me to add an additional layer of logic between the view and model, such that if a user inputs a value "25px", I can then strip out the "px", and then parseInt("25"), then pass this value into my model as an integer...does such a thing in Angular exist?
One approach that I've tried was I set up a $watch on x-coordinate, and added some logic when the value changes via user input. This works on a small scale for predictable data. However, the issue with this is that my model is dynamic, constantly changing, and it could have hundreds of "x-positions" that I would have to watch. Adding a watch to such a large amount of dynamic data seems unfeasible to me...unless I'm mistaken.
Thanks
I think you have 2 approaches here:
If you only need to convert to a number when you save the data, then just convert it once, when you save
If you really have to convert it every time the user changes the input (although I don't see a case where it would be required), then you can either define a watch, as you already did, or you can put ng-change or ng-blur on the input. (which will eventually also define a watch, but at least that way you have more control on what you pass to the function)
I'm currently making a dynamic-sized editable list component in a form.
I have at least one input field shown which is responsible for the creation of new fields as you type. If you type anything else than a whitespace character, the value of this field is added to the model and then reseted.
On the next tick, Vue updates the view and create the new input field with the letter you typed in, and I give the focus to this field so the user can continue typing as-if nothing happened for him.
So when the field is created, the model gets a new item which has the letter you typed in as its value. The problem is that when you edit the created field, the model isn't updated.
I made a JSFiddle so you can check it by yourself
itemBlured: function (idx) {
console.log(vm.songs[idx].name); // Always print the same letter for a given field
}
The final goal of the itemBlured method is to remove the last edited entry in the model if its value is empty. But for now you can see, by opening your dev console that even if you change the value of a field, the Vue model isn't updated.
Any help or idea is welcome :)
I found the reason why the binding did not occured.
When dealing with <input> tags, you must use the v-model attribute instead of value to tell Vue.js to bind the input to your model, otherwise it just act as mustache template.
Hope it helps someone one day.
My initial idea was something like that:
$(document).on("element","event", function(e){
});
But I have some doubts about this function:
which value I should use for "element"? I could use something like this: 'input[type=text]' or I should use a class for the element (like class="validate") and use ".validate" for instance)
which value I should use for "event"? I could use onfocus from element input, or do jQuery have a particular nomenclature for this type of event?
for each key presses (which seems I should use var key = which to capture), how I could check if it's a number or a letter?
using the regex string, how I could get the type of the character in a specific position? for instance, with the regex: [0-9]{2}/[A-Z]{2}/[0-9]{4}, the position 2 should return 'number' as type, the position 3 should return letter, and the position 2 should return 'symbol'.
Anyone can give me some help here?
UPDATE
Let me try be more clear about my question:
I initially think about create this jquery function in my project:
$(document).on("element","event", function(e){
//
});
But I have no idea how "event" I should listener here (I could use the same events available for the input atribute from html?) and like to know what name use for element (I ever use the ID or class from element, and jquery examples always use on of them, but how I could use the own element name, like input - I see once this being used: input[name=something], can I use this too: input[type=text]?).
In relation to the content of the function, I imagine this pseudo-code:
1- tam = size of string (calculated based on regex - already have a function to d this).
2- model[] = array of characteres with 'tam' elements (ok to me, too).
3- initialize counter=0.
4- for each key pressed by user:
4.1- type = store the type of the character in the position 'counter' of 'model[]' - I think I can use the regex to do this, but I don't know how.
4.2- if the character has same type from 'type' variable, store it in model[counter] and increment counter.
So, basicly, my question is find a way of, given a regex, find what type of character should be in each position (I explain that with example in the item 4 above).
There are many ways in which you can restrict/validate what your users type in the input fields.
Method 1
You can use input masking, a great way to improve data validation in forms. Masking allows you to only accept data in a certain format, type. Have a look at this - https://github.com/RobinHerbots/jquery.inputmask
Masking Demo - http://robinherbots.github.io/jquery.inputmask/
This also accepts regex as you need, can be implemented using the library something like this -
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
REGEX WORKING DEMO - http://codepen.io/nitishdhar/pen/Clzem
Note - This method actually restricts the user from typing or entering anything that does not comply to your given pattern in the mask.
Method 2
You can use different input types to control the input eg. text, email, password, number etc.
Ref - https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
Note - This method just defines the type of input control that will be rendered, whether password type or a number type. Helps browsers accept data in those formats.
Hey I'm trying to create an input field in javascript with a Rails back-end.
I would like to make the input field take only currency amounts. so
$1.00
$100.24
How could i pull this off. Currently a person can put in multiple decimal points and so on.
Hopefully this question is not too vague.
Bind this function to the onchange event of your text field. This will parse the value of the field as a float and remove any number after 2 decimals.
You can also use input type="number" to prevent strings as input.
Needless to say, this will require server-side validation. The user can disable Javascript and input type fairly easily: never expect this to work if these data will get back to your server.
function check(e){
e.value = parseFloat(e.value).toFixed(2)
}
working jsfiddle: here.
input: 123456 - result: 123.456
input: 12,3456 - result: 12,34
Is there a way to apply a mask in a input using yui3 ?
Is it possible to have a field where the user can only enter a phone number?
And if so, how?
Thx a lot
I would say that your best bet is to have an onChange or onKeyup (or even onValuechange - a YUI construct) handler listening on that input. Whenever it detected a change, you would run a formatting function on the current value of the input, which formatted it in the way you wanted.
if you want to be light-handed about it, just put the dashes in where they go, for example :
"1105551212" --> "110-555-1212"
if you want to be heavy-handed about it, the event handler could literally strip out any non-numeric, or non-dash characters, which effectively prevents the user from entering bad input, though they could of course put in a non-existent phone number.
one step further: do both. strip out invalid characters, and do auto-formatting.