We Keep Coding

How to make dirty or touched input programmatically in Angular2?

I needs to use one jquery plugin with Angular2.In General terms, this plugin creates a copy of a piece of html, which has inputs.When data changes, angular2 rerenders it with all the errors etc.But Jquery must pass data back to angular2 when something changes.I did it through the
ControlGroup.controls['control_id'].updateValue(value,{emitEvent,emitModelToViewChange}).
All is well,data comes.But angular2 input in which jquery passes data doesn't become dirty or touched, but I need it to display errors.How to force the input to be touched or dirty? Thanks in advance.
P.S: I know that all this is bad, but I have no choice

There is a pull request to make these properties available https://github.com/angular/angular/pull/7288/files
Currently it is marked
- touched when the input emits the blur event
- changed when the input emits the input event
These events probably vary between different types of input controls.
See also https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/default_value_accessor.ts

I would use the updateValueAndValidity after calling the updateValue one:
var ctrl = ControlGroup.controls['control_id'];
ctrl.updateValue(value,{emitEvent,emitModelToViewChange});
ctrl.updateValueAndValidity();

What is the best way to handle events in AngularJS in this case?

I am absolutly new in AngularJS and I have the following doubt about how to handle event in Angular.
So I know if in a view I have something like this:
<input type="text" ng-model="handle" />
it means that exist a 2 way binding between this input element in the dom and an handle variable into the Angular $scope, for example:
$scope.handle = '';
So any change that happen into this input object implies a change of the handle property in the $scope and vice-versa.
So, into the Angular applcation, I can explicitly declare a whatcher
// I explicitly declare a whatcher on the handle property: when the value of this propertu change the function() is performed:
$scope.$watch('handle', function(newValue, oldValue) {
console.info('Changed!');
console.log('Old:' + oldValue);
console.log('New:' + newValue);
});
So it should have the same meaning of manually adding a classic vanilla JavaScript EventListener (by the addEventListener() on the object that I want to observe in a classic old vanilla JavaScript application (that don't use Angular).
When something change on the input value the function associated to the whatcher is performed.
Ok it is pretty clear for me.
Now I say that I can also do something like this.
Into the HTML code I can have something like:
<input type="button" value="Click Me" ng-click="alertClick()" />
And in the Angular controller I will have something like:
$scope.alertClick = function() {
alert("Clicked !!!");
}
So it seems like the ng-Click directive perform a function that is a $scope field when there is the click event on the button.
But can I do the same operation as done in the first example? Can I do it declaring a whatcher on the button if it is associated to a model object by the ng-model="handle" directive?
When is better use the first method and when is better the second method to handle events in AngularJS?

ngModel is used to bind an imput form the UI to your controller
ngClick is just a regular javascript expression that have access to your controller scope that will be executed at the click event.
Here you have to use ng-click.
With angular a good practice is to avoid using function like addEventListener() or Jquery other function...
Because AngularJS wrap all this functionality and will run digest loop or other voodoo magic if necessary.

Use the click event. $scope.$watch should be used watching when something changes instead of things that are better for event handlers.

The tow "methods" you pointed out are not the same thing. At all.
The first, $watch, is intended to listen to the $scope changes. You can specify which property of the scope you want to watch, and when a change occur it will call you callback function. For more details, see the Digest cycle documentation.
The second, ng-click attribute directive, listen to the DOM events and evaluate the expression you pass in when the event occur.
In your case, for the button, you have two options. You can use the ng-click attribute directive to trigger a function in your scope OR use the ng-submit attribute directive in the form html tag of your inputs. That way you can trigger the form validation with the button or when the Enter is pressed.
See the documentation for ngSubmit.

ngModel applies to specific elements such as input,select, and textarea. As the result, you cannot use ngModel on a button. That is why you use ngClick to get the click event.

Submit form when contents of MVC3 Html.TextBoxFor changes

This should be fairly easy but I've tried a few things with no luck.
I have a series of Html.TextBoxFor fields on a page, each inside their own Ajax.BeginRouteForm. Next to each box I have a submit button, and this, when clicked, performs the Ajax update as desired.
I'd like to automate this so that when the user changes a value in a field (the onchange event) the form is submitted the same way it currently using using the submit button.
I tried using the htmlattributes to assign a JavaScript function to the onchange event (as shown below) and this causes the form to submit, but it redirects the page instead of working in the ajax fashion (as opposed to clicking the submit button which works correctly).
#(Html.TextBoxFor(model => answer.Value, new { onchange = "document.forms[" + answer.AnswerID + "].submit()" }));
(fortunately my answer.AnswerID is numeric and matches up with the numeric position of the appropriate form in the forms collection; I was referencing them by name but Razor (or something) was htmlencoding my JavaScript code...)
My only guess is that I'm breaking something by attaching code directly to the onchange event, but I'm at a loss as to the "right" way to hook into that event chain.

If you're willing to use JQuery, it's very simple to do:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Calling submit() on a form will ignore any submit event handlers, as seen here. You can either
call the event handler directly, or
call click() on the submit button for the form.
The former works best if you use onsubmit and return false instead of using the event argument to the callback, because otherwise you need to pass another messy object or something.

set event on dynamically changed data in field via jquery

I have several field
$("#a1").change(function(){
console.log('fire'); });
but when value change not user event not work
form[0].val = 100;
event not work
how can i catch this change data ?
ps data changes from different places not my code suggestions like trigger('change') not good idea

I do not think that events will fire when you set the value in that fashion.
Does it work when you set the value of the element in the browser?
What you can do is call form[0].change(), and it should work.

Changing the value property will not fire the change event.
In fact, your code should be changing value and not val.
You could call it explicitly after updating it.
form[0].value = 100;
form.change();
But you mention that is not an option.
The only other way is to poll for changes.

You could define a way of working with the controls inside your form. Create a javascript function that external developers can call to set the value of a given field and make them use that method. Then you can fire change or do whatever you want to your hearts content.

How to stop onChange in JavaScript

In one of my selection boxes, I have an onChange="..." specified...
because I want to change some other form value after any selection changes.
However, in the same page, some weird case I have to manually set the value.
So I have to use some JavaScript to set the value of the selection combobox, but in this case, I don't want that onChange event to be fired.
How can I walk around it?
Forgot to mention that I am actually using dijit.form.comboBox.
For normal HTML form comboBox, it won't cause any issue.
Only I use the dijit comboBox, and I try to set the value to some other value, dojo will trigger the onChange.

If you are using Dijit, then you can pass an additional false flag at the end of the set() method that will prevent the widget from firing the onChange event.
For example:
dijit.byId(myComboBox).set("value","Choose an option...",false);

Found this answer from Paul Christopher at http://dojo-toolkit.33424.n3.nabble.com/onchange-event-firing-when-setting-value-of-a-Select-programmatically-td3985692.html. It worked perfectly!
myDigit._lastValueReported = myValue;
myDigit.set('value', myValue);

You don't need to do anything. Setting the value with Javascript will not fire your onchange event handler.

In general, setting the value with JavaScript won't fire onchange. If you're dealing with a strange browser that does fire it, you could remove the onChange (element.onchange = null), change the value, then add it back (element.onchange = functionname) afterwards.

FYI, this answer is not fully correct. It is true that simply setting the value does not trigger the onChange event, BUT as soon as the control loses focus, the change will be detected and onChange will be fired.
So delaying onChange is not really the same as preventing onChange - which is what I need to do!
I could temporarily remove the event, blur and refocus the field, and then restore the event, but this is an ugly hack. It is complicated by dynamicaly added events like jQuery. so really what I'd like is to set the 'focus value' to the 'new value', but haven't been able to find this. I could try setting the defaultValue, but this would prevent a correct form.reset().