What is the best way to transfer address or any other information from one field to another in angular-formly?

I'm currently exploring ways to automatically copy the primary email to an alternate email field when a user clicks a checkbox. I am utilizing the angular-formly directive within Angular for this task, but I have encountered some challenges with this implementation.

Feel free to check out the code on this Plunkr.

Your assistance and guidance on this matter would be greatly appreciated.

Answer №1

The most straightforward approach is to implement a watch on the checkbox and then assign the alternative email to the email address.

$scope.formFields = [
  {
    "key": "firstName",
    "type": "text",
    "label": "First Name",
    "placeholder": "Jane",
    "required":true
},{
    "key": "email",
    ...
},
{
    "key": "altEmail",  
    "type": "email",
    "label":"Alternate Email",
    ...
},
// ...

$scope.$watch('result.sameAsPrimary', function(newValue) {
  if (newValue) {
    $scope.result.altEmail = $scope.result.email;
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting the inserted object in AngularJS using $resource

After inserting an object, I need to immediately retrieve it. However, I am facing a challenge with Angularjs $resource. module.factory('SearchQueries', function($resource){ return $resource('/instances/searches/:_id', {_id: ...

Is there a way to dynamically insert my own <divs> into a container?

I've been doing a lot of research on this issue, but I haven't come across any solutions that have been helpful so far. The problem I'm facing is that I have a div with an id that is supposed to act as a container (#cont_seguim). On the rig ...

Utilizing AngularJs to differentiate between arrays and strings within an HTML template

I'm currently facing a challenge with creating a dynamic HTML template. In order to present data in a table, I need to distinguish between a regular String and an Array. Firstly, the HTML template is embedded within another template using the data-ng- ...

Generate a segment of HTML content dynamically

My front-end HTML has a section that is dynamically loaded based on the number of entities in the backend. For example, if there are 5 entities in the backend, the div will be repeated 5 times. Currently, this repetition logic is handled by JavaScript. Her ...

Performing an AJAX call every half-hour using JavaScript

I am looking to implement an ajax request every 30 minutes using JavaScript. Specifically, for the user currently logged in, I aim to retrieve any notifications that have a start date matching the current time. These notifications are set by the user with ...

Retrieving information from MongoDB for a specific ObjectID associated with the current authenticated user

Having two collections in my MongoDB structured as follows: Data User: id: ObjectId ("5fb39e3d11eaad3e30cfb1b0") userName: "Tobias" password: "yyy" id: ObjectId ("5fb3c83fb774ff3340482250") userName: "Thor&qu ...

Utilizing JavaScript to access and parse an XML file within a client-side environment

I've recently started learning JavaScript and I'm facing some challenges while trying to reference an xml file uploaded by a user. My goal is to eventually parse the XML contents, update them, and allow users to download the modified file. Here ...

Unexpected loading glitches occurring in vue-material components

I recently delved into the world of Vue.js and VueMaterial, which has been a refreshing and new experience for me since I've mostly focused on Native Android development in the past. Currently, I'm facing an unusual issue that seems to stem from ...

Can an ng-switch be implemented directly on a select dropdown option?

Has anyone tried implementing an ng-switch with a <select> -> <option> set up like this before?: <select ng-model="form.permitLocality" ng-switch on="localityTypeRadio"> <option ng-switch-when="County" ng-repeat="county in coun ...

React Native doesn't display any elements on the screen after the component

I am currently working on a React Native project where I need to display a list of PropertyTile components on the home screen. However, I have encountered an issue where only the first instance of the PropertyTile is rendering, while the subsequent ones ar ...

Locating Mongoose for discovering and generating arrays with multiple dimensions

I am attempting to retrieve the userid and the array object that contains a specific location within locations. My goal is as follows: The query should return the result of the array location. If the userid does not exist at all, I want to create it and ...

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

What can be done to prevent an image from vanishing along with its containing div?

I recently created a website/application where users can interact with elements by dragging them around the page. However, I encountered an issue where one element disappears when dragged outside of its original container. How can I prevent this from happe ...

Showing feedback upon Ajax completion

I've got this snippet of javascript that sends data to my database and then shows a success message. Currently, when the operation is successful, the button fades out and hides correctly. However, the success message doesn't appear. $(document) ...

Accessing the Bootstrap tab form from an external source

I currently have Bootstrap tabs on a page and they are functioning correctly. However, I am looking to open these tabs from an external page. Is this feasible? <div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> ...

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

How can you troubleshoot a PWA white screen issue caused by a loss of internet connection?

I have successfully developed a PWA Application using Angular. It functions properly. However, there is an issue: When a user installs the PWA on their desktop or adds it to the home screen on iOS, everything works smoothly. But if the internet connectio ...

PHP: Using Jquery or Ajax, learn the technique of initializing a variable first and then using it in PHP

Currently, I am working on an HTML file within a PHP environment. My goal is to display the value of $count in the HTML using a for each loop later on. How can I achieve this? Here is the code snippet: <div>Total class: <span>$count</span&g ...

"Use the data-attribute to dynamically append a child element to the

Here are a couple of divs that look like this: <div id="thisisme" data-order="1"> <div id="thisisme" data-order="2"> I am looking to insert some content into the specific div with data-order = 1. The following Javascript code is what I have t ...

Discord JS - Issue with bot not sending embeds

Hey there, I could really use some assistance with an error I'm encountering in my bot. It seems that 'yourid', 'productownerid', and 'productname' are not defined in the last steps of the code. I've tried various so ...