Angular - The connections between deeply nested object models are established

I have an Angular application that is used to display company and contact person information in a text box format. Here is the code for displaying the Company Email address:

   <label> Company Email address</label>
   <input type="text" class="form-control" [(ngModel)]="companyInfo.contactInfo.email" value="{{ companyInfo?.contactInfo?.email }}">

Additionally, here is the code for displaying the Contact Person Email address:

  <label>Contact Email address</label>
  <input type="email" class="form-control" [(ngModel)]="companyInfo.contactPerson.contactInfo.email" value="{{ companyInfo?.contactPerson?.contactInfo?.email }}">

Even though the component assignment seems to be working correctly, there is an issue where typing in the email address for the company also displays the same email address for the contact person. Is there something obvious that I am missing in the code causing this mirroring effect to occur?

javascripthtmlcssangularangular2-ngmodel

Answer №1

Hey there, I see your inquiry is related to the concept of two-way binding. Although ngModel facilitates 2-way data binding, it appears that the values are inconsistent in this scenario. Please double-check the names or consider explaining your issue on stackblitz.

Alternatively, you can tackle this by defining 2 variables in the .ts class and aligning their names as follows.

   .ts class

    companyEmail: any;
    contactEmail: any;
    this.companyEmail = companyInfo.contactInfo.email;
    this.contactEmail = companyInfo.contactPerson.contactInfo.email;

    .html
<-- For Company Email -->
   <input type="text" class="form-control" [(ngModel)]="companyEmail" value="{{ companyEmail }}">

<-- For Contact Email -->

<input type="email" class="form-control" [(ngModel)]="contactEmail" value="{{ contactEmail }}">

Answer №2

I am not completely certain about the structure of your object, Nevertheless, I have created an object based on my interpretation of your query and have provided the example below.

Example Link

However, I have noticed that the second value does not seem to change when I modify the first value in the user interface. Despite this, its overall behavior appears to be functioning correctly (Please refer to the console for confirmation - I am displaying both values during the change event).

Answer №3

Identified the issue as being caused by referencing the same object while resetting the fields in order to generate a new company form //during the reset process

newCompany: Company = new Company(companyName, this.contactInfo, new ContactPerson(lastName, firstName, this.contactInfo))

updated to

newCompany: Company = new Company(companyName, ._cloneDeep(this.contactInfo), new ContactPerson(lastName, firstName, ._cloneDeep(this.contactInfo)))

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

Create a PHP file with various functions and access them using jquery.post or jquery.get in a separate JavaScript file

Is there a way to call multiple PHP functions from my JavaScript file using Jquery.post? Typically, we use Jquery.post to call a PHP file and pass various values as post data. function new_user(auth_type, tr_id, user_name, email) { $.post("bookmark.p ...

phpjavascriptjqueryajax

How can you fix the "bad value" response in mongodb when utilizing query parameters in the url?

{ "ok": 0, "code": 2, "codeName": "BadValue", "name": "MongoError" } Whenever I attempt to use query parameters skip and limit in the url, this error message pops up. localhost:5 ...

javascriptnode.jsmongodbexpressmongoose

JavaScript on the client side or the server side?

I am faced with a challenge on my report page where I need to filter customers based on specific criteria and highlight certain details if their registration date falls after a specified date, such as 1st January 2011. With around 800 records to showcase, ...

javascriptclient-sideserver-side

What is the best method for combining this function?

Currently, I am working on a code snippet that generates a sitemap.xml file when the /sitemap.xml endpoint is accessed. database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); fu ...

javascriptangularjsarraysnode.jsexpress

"afterAll encountered an error: [ErrorEvent object] was thrown" - Testing Angular 4 Components

During my work on Angular 4 unit tests, I encountered an error on one of the pages that utilizes Google Maps and the AGM package: An error was thrown in afterAll\n[object ErrorEvent] thrown Has anyone experienced this issue before and knows how to re ...

angularangular-unit-test

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

cssinternet-explorer-7

Is it possible for me to determine whether a javascript file has been executed?

I am currently working with an express framework on Node.js and I have a requirement to dynamically change the value (increase or decrease) of a variable in my testing module every time the module is executed. Is there a way to determine if the file has ...

javascriptnode.jsexpress

Exploring the potential of jQuery and AJAX for dynamic content generation:

I have developed a jQuery plugin that pulls data from a JSON feed (specifically YouTube) and then presents the results in a DIV. Everything is working well until I need to display the results with different configurations, such as more videos or from anoth ...

javascriptjqueryajaxplugins

I am attempting to create a password validation system without the need for a database, using only a single

Help Needed: Trying to Create a Password Validation Website <script language="Javascript"> function checkPassword(x){ if (x == "HI"){ alert("Just Press Ok to Continue..."); } else { alert("Nope... not gonna happen"); } } ...

javascript

JavaScript tutorial: Locate a specific word in a file and display the subsequent word

Seeking assistance with a task: I need to open a locally stored server file, search for a specific word, and then print the next word after finding the specified one. I have managed to write code that successfully opens the file, but it currently prints e ...

javascripthtmlajaxstring

Creating a GIF file using Node.js leads to a corrupted image

I have been experimenting with creating a simple GIF. I followed the example provided in this NPM library for guidance. Despite my efforts, every time I generate the GIF, it appears as a corrupted image file. CODE const CanvasGifEncoder = require('ca ...

javascriptnode.jsnpmgif

JavaScript: Creating Custom IDs for Element Generation

I've been developing a jeopardy-style web application and I have a feature where users can create multiple teams with custom names. HTML <!--Score Boards--> <div id="teamBoards"> <div id="teams"> ...

javascriptjqueryhtml

Retrieving data from JavaScript global variables within an HTML document using PhantomJS

Recently, I encountered an interesting piece of HTML code that sparked my curiosity: <html> <body> <script> var foo = { bar: [] }; </script> </body> </html> This led me to wonder how I c ...

javascriptjquerynode.jsweb-scrapingphantomjs

What is the solution to prevent background-attachment:fixed; from distorting the image?

Looking to create a scrolling background image that doesn't stretch? Typically, using background-attachment: fixed; works, but it's causing the image to stretch and lose positioning capabilities. If you want to see the issue in action, check out ...

htmlcssbackground-imagestretch

Unsupported server component type: undefined in Next.js version 13 is not recognized by the server

Encountered some unusual behavior in Next.js 13 while attempting a simple action. I have provided a basic example demonstrating the issue. Seeking assistance in understanding why this is occurring. This scenario involves 3 components: page: import {Conta ...

javascriptreactjsnext.jsserver-side-rendering

Exploring the world of jQuery: Toggling radio buttons with variables on click

On the right side, there is a table of data that initially contains certain values, but can be modified using radio buttons and a slider on the left. If you select the first radio button for the "pay in full" option, it will increase the estimated discoun ...

javascriptjqueryradio-button

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

javascriptjquerycssecmascript-6

Simple steps to convert Redux state to Redux Persist with the help of 'combineReducers' function

I'm facing a challenge trying to implement Redux-Persist with my Redux state, particularly because I am using combineReducers. Here is the structure of my store: import { createStore, combineReducers } from 'redux' import { usersReducer } fr ...

javascriptreactjsreduxredux-persist

Passing PHP array to JavaScript and selecting random images from the array

Check out my PHP script below: <?php $all_images = glob("Images/Classes/{*.png, *.PNG}", GLOB_BRACE); echo json_encode($all_images); shuffle($all_images); ?> Here's the JavaScript code I'm using: functio ...

javascriptphpjqueryjson

What sets React$Element apart from ReactElement?

Attempting to implement flow with ReactJS and needing to specify types for prop children. The article on Flow + React does not provide any information. Despite encountering examples using ReactElement (e.g), I received an error message from flow stating i ...

javascriptreactjsflowtypeflow-typed