Avoid updating the input from ng-model while it is being edited

Question

Avoid updating the input from ng-model while it is being edited

There are times when my model.field can be altered by both user input into an input field and by other functions running in the background. However, I want to handle situations where changes made by the user take precedence over modifications made by those background functions. For instance:

$scope.model = {
    field: 'val1'
}

This is the HTML code:

<input ng-model="model.field" ...>

For example:

The initial value of model.field is 'val1'
The user begins editing the input (it becomes active)
While the user is typing, the model updates to 'val2' through a background function
Despite the change in the model, the input still displays 'val1'
Any key pressed by the user during this time (from 1 to A) replaces the current content in model.field.
As a result, the new value of model.field becomes 'valA'

javascript angularjs binding

Answer 1

Answer №1

A $formatter can be added to handle ignoring the model when the element is in focus and it seems to be effective:

angular.module('myApp').directive('ngModelIgnoreWhenActive', function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, element, attributes, ngModelCtrl) {

            //Keeping track if the element has focus
            scope.hasFocus = false;
            element.on('focus', function(event) {
                scope.hasFocus = true;
            });
            element.on('blur', function(event) {
                scope.hasFocus = false;
            });

            //Formatting value before displaying it
            // If focused, maintain current value
            var myFormatter = function(newValue) {
                return scope.hasFocus && element && element[0] ? element[0].value : newValue;
            }

            ngModelCtrl.$formatters.push(myFormatter);
        }
    };
});

The directive can then be applied to relevant input fields like this:

<input ng-model="model.field" ng-model-ignore-when-active>

This code was inspired by the extends-ng-model timestamp formatter provided at: https://github.com/Plippe/extends-ng-model/blob/master/src/extends-ng-model/ng-model-formatter-parser/ng-model-timestamp.js

Answer 2

A $formatter can be added to handle ignoring the model when the element is in focus and it seems to be effective:

angular.module('myApp').directive('ngModelIgnoreWhenActive', function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, element, attributes, ngModelCtrl) {

            //Keeping track if the element has focus
            scope.hasFocus = false;
            element.on('focus', function(event) {
                scope.hasFocus = true;
            });
            element.on('blur', function(event) {
                scope.hasFocus = false;
            });

            //Formatting value before displaying it
            // If focused, maintain current value
            var myFormatter = function(newValue) {
                return scope.hasFocus && element && element[0] ? element[0].value : newValue;
            }

            ngModelCtrl.$formatters.push(myFormatter);
        }
    };
});

The directive can then be applied to relevant input fields like this:

<input ng-model="model.field" ng-model-ignore-when-active>

This code was inspired by the extends-ng-model timestamp formatter provided at: https://github.com/Plippe/extends-ng-model/blob/master/src/extends-ng-model/ng-model-formatter-parser/ng-model-timestamp.js

Avoid updating the input from ng-model while it is being edited

Answer №1

Similar questions

New button attribute incorporated in AJAX response automatically

Is it possible to alter the page color using radio buttons and Vue.js?

"Retrieving the most recent data within an ng-repeat directive using AngularJS

Combining PHP, Javascript, and Ajax all in one powerful code snippet

Display the initial x list items without utilizing ngFor in Angular 2

Troubleshooting a Form Validation Issue with React's useState Hook

"Refreshing UI-View with AngularJS and UI-Router: A Guide on Reloading Your

What led the Typescript Team to decide against making === the default option?

Unraveling unicode escape sequences in JavaScript strings

Obtaining variable content from a JavaScript function

JavaScript appendChild method not functioning properly with dynamically created image elements in JavaScript code

Show information from JSON based on the provided parameter

What is the best way to eliminate duplicate values within a v-for array?

Utilizing functions as arguments in AngularJS 1.5 directives

Calculating every number within a range of dates and storing them in the format of [day, hour]

The property 'get' cannot be accessed due to its undefined or null reference

Is it possible for Vue js to display an image from the /dist/ directory even if it is not present?

Passing predefined functions to asynchronous functions can be achieved by simply defining the

Parameters for MongoDB search queries

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide