Develop Reference

ReactiveForms valueChanges in dom vs component

I'm wonder if there's a way to know the difference whether valueChanges on a FormControl was triggered from the dom or the component itself. My use case is I need to do stuff() when the user changes the value, but I don't want to do stuff() if the value changed as a result of something else. Any thoughts?

with the control ".touched"
EXAMPLE:
YourModelForm.get('YourField').touched
the value becomes true when the user enters a value (first click on the field, enter the value, tab or click out of the field).
I tried with a call rest and the value remains to false, try it if you can possibly it works for your situation. :-)

Thanks to #Nobady, who inspired the idea. I found there's actually an option for setValue on the formControl called emitEvent. Using this, I can make it so if I update the value programmatically I can bypass the valueChanges getting called.

using $(this) to get data attribute doesnt return the actual result

Im new to javascript/jquery, I've been searching all over the web but haven't got a satisfying answer. (I will delete it if someone can point out a similar question)
In the hmtl I have
Submit
In the console, I tried this
$('.btn-place-order').data("confirm-modal")
--> it returned "myModal"
But when I tried
$(".btn-place-order").on("click", function(e){ $(this).data("confirm-modal"); });
--> it return the whole object [a.btn-place-order]
Why ?

This behavior is exactly correct. If you take a look at the jQuery documentation you will see:
jQuery on:
.on( events [, selector ] [, data ], handler(eventObject) )
Returns: jQuery
jQuery data:
.data( key )
Returns: Object
This means that when you call var myObject = $('.btn-place-order').data("confirm-modal"); will contain the value of the data- attribute.
However, when you call $(".btn-place-order").on("click", function(e){ $(this).data("confirm-modal"); }); you get a jQuery object returned. This jQuery object is the same one that $(".btn-place-order") already returns, which is very important to make jQuery's concept of chaining work.
Chaining allows you to execute several methods in order, without getting the original jQuery object over and over. For example $(".btn-place-order").on('click',...).on('hover',...); would allow you to attach two handlers (a click and a hover) to the same element.
It also wouldn't make sense for on to return anything else, since it just attaches a handler to an element. It really doesn't give you any value just because you attach an event handler.
Now, if you want to take any action when the event is fired, you will need to take that action inside of the handler's callback function. E.g.
$(".btn-place-order").on("click", function(e){ alert($(this).data("confirm-modal");) });
will alert the user of the data-confirm-modal attribute value of the element that was clicked on. However, without the alert() part (i.e. the way your original code was written), the value is just read, but nothing is ever done with it.

JavaScript code explanation (events + canvas) [sigma.js]

Here is some code that I have from sigma.js:
function f(event)
{
sigInst.iterNodes(function(n){
node = n;
},[event.content[0]]);
alert();
}
sigInst.bind('click',f).bind('outnodes',f).draw();
I don't understand this:
from where function f gets the event? no one passes it.
line },[event.content[0]]);
Can I add events to canvas elements? sigma.js draws a canvas and then (I don't understand how) there is an event listeners on click and outnodes. How does this happens?
Thanks

from where function f gets the event? no one passes it.
it is sent automatically by the bind function - when the handler is executed.
line },[event.content[0]]);
It's just an argument for the iterNodes function which is an array of size 1 which has the value of a property named content which is also an array , so it takes its first cell.

Sigma uses its own custom events dispatcher. As you can see here:
https://github.com/jacomyal/sigma.js/blob/master/src/classes/eventdispatcher.js#L129
It dispatches events with certain parameters of its own. When you bind to something, it always is executed through some sort of dispatch/trigger. The dispatch/trigger, as seen in the link, adds custom parameters which is why you're able to access content.

JavaScript watch event not working on DOM element objects?

I know I can use watch to bind a callback that will be triggered when object property changes. And this does work on generic objects like:
{'a':1, 'b':'7'}
So, I thought that I can simply do this to bind a callback that will trigger when input field value changes:
var inputDomElement = document.getElementById('someInputElement');
inputDomElement.watch('value',function (id, oldval, newval) {
alert(oldval);
alert(newval);
});
But this doesn't work. Simply doesn't trigger. No alert boxes. I've tried it in Firefox 5 and Google Chrome (latest).
Is this not how watch works? Is watch simply doesn't work on DOM elements? I thought that they're simply objects - aren't they?
UPDATE 1:
Here's MDN info about what watch is:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch
UPDATE 2:
I cannot use change event. because change only triggers when text element catches blur. Meaning that it'll only trigger when user switches from this textfield to another one. It's not in any way dynamic for when for example checking if this username or email address already taken which I'd like to happen on each distinct change.

The DOM is written in C/C++ where the concept of getting and setting a Javascript variable doesn't exist as you or I would often imagine it. You probably imagined the code to be implemented similar to what is below. Unfortunately Object.watch is never initiated because the DOM isn't constantly updating the Javascipt value, but Javascript is requesting an update from the DOM.
input.onuserchangevalue = function(){
input.value = 'new user input'
}
Thinking how the DOM commonly works, each element has dozens of potential properties.
innerHTML,value,style.cssText,name,id,style.background,style.backgroundColor
Imagine if the DOM underlining code had to constantly update every DOM elements Javascript properties %) Memory and CPU cycles would go through the roof having to ensure the properties matched the display value. The DOM's internals would also have to check if the Javascript value has potentially changed.
Reality - Red Pill
Basically the DOM isn't giving info to javascript, but Javascript is requesting the info from the DOM. This is a decent Javascript interpretation of what is going on underneath.
Object.defineProperty(input, "value", {
get : function(){ /* get C/C++ DOM value */ },
set : function(){ /* change C/C++ DOM value */ }
});
This explains why the DOM is often the bottleneck for Javascript. Javascript has to request/set the internal DOM values every time you interface with the DOM.

You need to use jQuery Objects, not DOM Objects. There is a difference.
document.getElementById("someID") //returns DOM Object
$('#someId') //returns jQuery Object
Note: you could doe something strange like this:
$(document.getElementById("someID")) //returns a jQuery Object
this would work
$('#someInputElement').watch('value',function (id, oldval, newval) {
alert(oldval);
alert(newval);
});

if you want to track changes on a text element, why not just use the .change() method?
http://jsfiddle.net/rkw79/qTTsH/
$('input').change(function(e) {
$('div').html('old value: ' + e.target.defaultValue + '<br/>'
+ 'new value: ' + e.target.value);
})
For instant change, use .keyup(): http://jsfiddle.net/rkw79/qTTsH/1/

How can I monitor the value of a hidden input element?

I have a SELECT element which adds its value to a hidden INPUT via JavaScript every time an OPTION is clicked (along with a visual representation of each selection) and I'd like to be able to monitor changes for another JavaScript function. For the sake of modularity, I can't integrate the second function into the first one. I would also rather not poll the hidden INPUT's value to avoid hacks. Currently I am using the onclick event on the DIV that contains both the SELECT and the hidden INPUT, but that's also quite hack-ish. Do you know a way to monitor a hidden INPUT element for changes?

So, you have:
Function A, which updates the hidden INPUT.
Function B, which should be called when the INPUT is updated.
Why not create an "event" of your own that that function A calls/dispatches whenever it is done working?
I believe most Javascript frameworks support the concept of custom events pretty easily, but it's just a series of function calls.
For example, create some object D which represents the dispatcher for a single event. Yes this is silly, but I'm trying to keep the concept simple. This object D, holds a list of functions which have "registered" for its event, and when the event is dispatched, it calls those functions.
Something like:
var d = (function() {
var funcs = [];
function fire() {
for (var i=0; i<funcs.length; ++i) {
funcs[i].call();
}
}
function register(newfunc) {
funcs.push(newfunc);
}
return {
fire: fire,
register: register
};
})();
You just have two things left to do - make function A fire the event:
function A() {
// do stuff to update the INPUT
d.fire();
}
and also, onload, "register" function B to be called when the event happens:
d.register(B);
This approach maintains the seperation-of-modules principle (or whatever its called) since A and B know nothing of each other, and only need to know about a third object.