How can we temporarily exclude a model property in AngularJS when a form field is disabled?

Question

How can we temporarily exclude a model property in AngularJS when a form field is disabled?

Take a look at this example:

I'm working on a form similar to the one in the example where users can opt out of entering certain data by clicking a checkbox. I am using ng-disabled to disable the relevant field ("Age" in my case) when the checkbox is checked.

It works well if they click the checkbox before entering data into the field. However, if they enter data first and then click the checkbox to disable it, the data remains in both the model and the view; it is just locked from changes.

Here's what I want to achieve:

Even if the user enters data into a field that they later disable, remove that data from the model. For instance, if the checkbox is checked and both "Name" and "Age" are filled out, I would like the user object to only be:
```
{ "name": "John" }
```
instead of:
```
{ "name": "John", "age": 35 }
```

Additionally, I would like to:

Clear the data from the view as well (emptying the "Age" field).
Make the data removal reversible. If a user enters their age as 35, then checks the checkbox to disable it, the "Age" field should empty (and the user model should lose the age property). When they uncheck the checkbox, the value 35 should return to both the "Age" field and the model. In other words, preserving their work if they change their mind.
Implement this approach at scale with a reusable directive or a simple expression, as my form is complex with many instances of this behavior and there will be more similar forms in the future.

My initial idea was to either:

Set ng-model for the "Age" field conditionally based on the checkbox state
Unbind the "Age" field when the checkbox is checked and re-bind it when unchecked

But how can I accomplish this? Is there a simpler method?

I have tried various combinations of directives but haven't found a solution yet. I am now exploring the documentation, but would appreciate some guidance. Thank you!

javascript angularjs forms angularjs-directive angularjs-scope

Answer 1

Answer №1

I propose utilizing a directive for handling both the checkbox and textbox elements.

After reviewing your code pen, I have formulated the age control directive below:

angular
  .module('example', [])
  .controller('exampleController', function($scope) {
    $scope.user = {};
  }).directive('ageControl',
    function() {
        return {
            template: '<input type="checkbox" ng-model="hideAge" ng-click="setAge()" />Hide Age<br />Age: <input type="text" ng-model="age" ng-disabled="hideAge" />',
            scope: {
              age: "="
            },
            link: function (scope, elem, attr) {
              var lastAge = null

              scope.setAge = function() {
                if (scope.hideAge) {
                lastAge = scope.age;
                scope.age = undefined;
              }  else {
                if (lastAge) {
                    scope.age = lastAge;
                }
              }
           }
        }
      }
   });

Find the working codepen example here: http://codepen.io/anon/pen/ZYxMQL

To make this solution universally applicable, you only need to parameterize the labels accordingly.

UPDATE

Check out this sample directive that enables a checkbox to disable multiple form controls and remove their associated values from the model:

http://codepen.io/troywarr/pen/XJExaO?editors=101

Answer 2

I propose utilizing a directive for handling both the checkbox and textbox elements.

After reviewing your code pen, I have formulated the age control directive below:

angular
  .module('example', [])
  .controller('exampleController', function($scope) {
    $scope.user = {};
  }).directive('ageControl',
    function() {
        return {
            template: '<input type="checkbox" ng-model="hideAge" ng-click="setAge()" />Hide Age<br />Age: <input type="text" ng-model="age" ng-disabled="hideAge" />',
            scope: {
              age: "="
            },
            link: function (scope, elem, attr) {
              var lastAge = null

              scope.setAge = function() {
                if (scope.hideAge) {
                lastAge = scope.age;
                scope.age = undefined;
              }  else {
                if (lastAge) {
                    scope.age = lastAge;
                }
              }
           }
        }
      }
   });

Find the working codepen example here: http://codepen.io/anon/pen/ZYxMQL

To make this solution universally applicable, you only need to parameterize the labels accordingly.

UPDATE

Check out this sample directive that enables a checkbox to disable multiple form controls and remove their associated values from the model:

http://codepen.io/troywarr/pen/XJExaO?editors=101

Answer 3

Answer №2

A great way to handle this is by utilizing the angular.copy() method. Simply store the array or object in a $scope variable when hiding, and then restore it when unhiding. For a hands-on example, you can check out this demo.

Answer 4

A great way to handle this is by utilizing the angular.copy() method. Simply store the array or object in a $scope variable when hiding, and then restore it when unhiding. For a hands-on example, you can check out this demo.

How can we temporarily exclude a model property in AngularJS when a form field is disabled?

Answer №1

Answer №2

Similar questions

receiving an error message due to attempting to access an

Guide to building interactive dropdown menus in Angular 8

Problem encountered with sending automated responses in Discord bot for updates on current events

Adjusting AJAX Parameters with Form.serialize() Before Sending Using jQuery

Exploring the functionality of Next.js with Links and routes

What causes Next.JS to automatically strip out CSS during the production build process?

Looking to implement pagination in Vue.js - what steps should I take?

Unable to display a cube using Three.js on a custom WebGL layer in Mapbox GL JS

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Traversing an array of objects in TypeScript and appending to a separate array if not already present

Displaying events in the all-day section can be achieved by setting the defaultView of fullCalendar.js to 'agendaDay'

Changing an object to an array in Angular

Angular code is malfunctioning and not delivering the expected results

Deliver JavaScript and HTML through an HTTP response using Node.js

Tips for organizing JSON data in AngularJS are as follows:

Exploring the method to retrieve data on the server side through Express when it is shared by the client within a put request

Utilize NodeJS API to convert a base64 data string into a downloadable PDF file

Using localStorage in Next.js, Redux, and TypeScript may lead to errors as it is not defined

Changing the color of a marker on hover in Mapbox using leaflet.js

Can you explain the significance of this HTML code?