AngularJS set global ngModelOptions

angularjs configuration angular-ngmodel
jacob picture jacob · Jul 12, 2014 · Viewed 9.4k times · Source

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).

Answer

Angad picture Angad · Oct 25, 2014

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

Related questions

AngularJS - Unknown provider configuring $httpProvider

In the following code example: myApp.config(['$httpProvider', function($httpProvider, $cookieStore) { $httpProvider.defaults.withCredentials = true; $httpProvider.defaults.headers.get['Authorization'] = 'Basic '+ $cookieStore.get('myToken'); return JSON.stringify(data); }]); I get an angularjs error like 'Unknown provider $cookieStore'. 'myApp' …

Read More
Angular JS custom delimiter

How do I use a custom delimiter for angular JS? I'd like to change from the {{ var }} syntax to [[ var ]]. Can somebody show me a complete example on how to implement this with Angular?

Read More
How to defer routes definition in Angular.js?

I have configured some basic routes that are available for all users before they log in: App.config(function ($routeProvider) { $routeProvider. when('/login', { templateUrl: 'views/login.html', controller: PageStartCtrl.Controller }). otherwise({ redirectTo: '/login' }); }); So the only thing user …

Read More