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

Top solution for maintaining smooth navigation across web pages

Getting Rid of Angular Material Suggestions: A Step-by-Step Guide

Can anyone point out where the mistake lies in my if statement code?

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

Angular 2 encountering an error with the HTTP GET request

Command for DiscordJS to verify users

unable to adjust the maximum height limit

Save the retrieved data in a variable and pass the entire JSON object as a prop to a React component

Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

What is the best way to extract a specific value from a JSON object?

Dealing with a throw er; uncaught 'err' event while configuring a server with nodemon

Customizing Attribute for Material UI TextField

Using Javascript to attach <head> elements can be accomplished with the .innerHTML property, however, it does not work with XML child nodes

Setting up a retrieval callback in mongoose and storing it in a global variable

ngModel.$setValidity is a one-time operation

Is using the new Date function as a key prop in React a good

Issue with displaying jqplot in a jQuery page

Looking for a resolution with NicEditor - Seeking advice on incorporating custom select options

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

What method can we use to temporarily route traffic from one URL to another URL for a specific amount of time?