First time blur update unique to each user

Question

First time blur update unique to each user

By using

ng-model-options="{ updateOn: 'blur' }"

, I can delay model updating until the user clicks out of an input field. This helps prevent constantly changing validation states while initially entering data. However, if a user revisits a field with failed validation and makes corrections, the 'blur' option prevents the validation state from updating before they move to another field.

Is there a way to reset the updateOn setting after one blur so that it returns to the default model update schedule?

javascript angularjs

Answer 1

Answer №1

ngModelOptions directive does not watch for changes in the value it evaluates. So, attempting to achieve a specific outcome with code like this won't work:

<input ng-model="foo" ng-model-options="fooOptions">

Even if you try to alter it in the controller:

$scope.fooOptions = {updateOn: "blur"};
$scope.changeOptions = function(){
  $scope.fooOptions = {updateOn: "default"};
}

In simpler scenarios, you might use an additional variable to control how validation messages are displayed:

<form name="form1">
   <input name="foo"
          ng-model="foo" ng-model-options="{updateOn: 'default'}"
          ng-blur="startShowingErrors = true" minlength="3">

   <span ng-show="startShowingErrors && form1.foo.$invalid">invalid entry</span>
</form>

But if you don't want the actual form state to update, you would have to create another directive as a facade to ngModelOptions to trigger a $compile on every change.

Answer 2

ngModelOptions directive does not watch for changes in the value it evaluates. So, attempting to achieve a specific outcome with code like this won't work:

<input ng-model="foo" ng-model-options="fooOptions">

Even if you try to alter it in the controller:

$scope.fooOptions = {updateOn: "blur"};
$scope.changeOptions = function(){
  $scope.fooOptions = {updateOn: "default"};
}

In simpler scenarios, you might use an additional variable to control how validation messages are displayed:

<form name="form1">
   <input name="foo"
          ng-model="foo" ng-model-options="{updateOn: 'default'}"
          ng-blur="startShowingErrors = true" minlength="3">

   <span ng-show="startShowingErrors && form1.foo.$invalid">invalid entry</span>
</form>

But if you don't want the actual form state to update, you would have to create another directive as a facade to ngModelOptions to trigger a $compile on every change.

First time blur update unique to each user

Answer №1

Similar questions

The process on how to access dynamic object properties within a parent component while using v-for in a child component

Adjust the browser zoom level to default when navigating to a new page

Steps for Disabling Autocomplete in a JSP Page

The npm postinstall script is functional, however, it does not complete successfully and ends

What are some effective ways to address conflicts between select2 versions 3.5 and 4.0?

Discover the method to adjust the position of elements, such as images, using radio buttons

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

Testing RESTful APIs in Node.js

"Enhance the functionality of material-table by incorporating a multi-select feature

Having trouble with a basic API Get request?

Challenge encountered with AJAX request

retrieving an element from a collection of objects

How to incorporate a JavaScript variable into an ERB tag

Storing geographic locations in a variable by inputting an address

Create a form in a PHP file containing a pair of buttons for selecting a specific action

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Transmit data via AJAX to the RequestBody

Express.js post method malfunctioning for BMI calculation

Tips for sending a URL in form-data as a file with JavaScript or Axios

Chrome experiences a hidden stalling issue due to a large WebGL texture