Menu
The default behaviour for updating ngModel (and subsequently validation) is on change; I would like to change that to on blur. The docs only explain how to do this on a case-by-case basis via: <ANY ng-model-options="{ updateOn: 'blur' }"></ANY>. I went so far as to look thru the source code, but somehow neither ngModelOptions nor ng-model-options is found (despite both occurring in the documentation, which is scraped from the source code).
848
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.
[ngModelOptions]="{standalone: true}" checks all the checkbox for angular 6. 0. 5. 1. Conflict using name and value property in input simulty.
The ngInit directive allows you to evaluate an expression in the current scope. This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit : aliasing special properties of ngRepeat , as seen in the demo below.
While the ngModel decorators written by Jon/John provide a good behind the scene solution, one must also be aware that declaratively, ngModelOptions need not have to be declared at the individual input field level but can be declared at the module level.
<body ng-app = "myApp" ng-model-options="{ updateOn: 'blur' }"> Doing the above would have all the input fields in myApp module inherit the ng-model-options. These can then be overriden in specific input fields if required (eg. search filters).
This plunker demonstrates: http://plnkr.co/edit/2L1arGgHJwK82xVucJ4p?p=preview
187
As @Angad mentions you can set ng-model-options on any element, and it will be applied to all its descendants. However, the problem with this is that if you set it like this, radios and checkboxes stop working as expected:
<body ng-app="myApp" ng-model-options="{ updateOn: 'blur' }"> This can be circumvented by adding change and click to the updateOn:
<body ng-app="myApp" ng-model-options="{ updateOn: 'change click blur' }"> If you would also want to update after a certain delay after typing you could use the following:
<body ng-app="myApp" ng-model-options="{ updateOn: 'keyup change click blur', debounce: { keyup: 500, click: 0, change: 0, blur: 0 } }"> I tested these techniques in Firefox, Chome, Internet Explorer (10, 11) and Safari. If you use other events then these, be sure to test it cross browser, for example radios fire change directly after clicking, on all browsers except IE.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
