Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the complete list of events supported by angular's updateOn property of ngModelOptions?

The docs say

updateOn: string specifying which event should the input be bound to. You can set several events using an space delimited list. There is a special event called default that matches the default events belonging of the control.

The page mentions a few events: blur, default, submit. Are there any others? Is the full list documented anywhere?

like image 646
tom Avatar asked Aug 14 '15 22:08

tom


People also ask

What is ngModelOptions ]= standalone true?

[ngModelOptions]="{standalone: true}" checks all the checkbox for angular 6. 0.

What is the use of ngModelOptions in angular?

The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope. You can specify that the binding should wait for a specific event to occur, or wait a specific number of milliseconds, and more, see the legal values listed in the parameter values below.

Which property of NG model is set to true when an input value is modified by user?

Model updates and validation By setting the allowInvalid property to true, the model will still be updated even if the value is invalid.


2 Answers

You can now control for a form (or single form elements) when the value or the validity is updated. This feature has been available in AngularJS 1.x but missed in Angular 2+ so far. The following update options can now be used in Angular 5 forms:

change: change is the default mode. By using this update option the form / form control is updated after every single change.

blur: the blur change mode is only updated the from values / validity status after a form control lost the focus.

submit: updates are only done after form submit.

Full source is here.

like image 188
Lastsword Avatar answered Oct 20 '22 12:10

Lastsword


As far as i know, you can bind any available DOM event to the updateOn property. see a full list here.

Having a look at the Source of ngModel, you can see that the options passed to updateOn will get bound to the actual element itself.

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js#L1188

Angular Source:

if (modelCtrl.$options.getOption('updateOn')) {
  element.on(modelCtrl.$options.getOption('updateOn'), function(ev) {
    modelCtrl.$$debounceViewValueCommit(ev && ev.type);
  });
}
like image 40
Founded1898 Avatar answered Oct 20 '22 14:10

Founded1898