The data in the object bound to [ngmodel] does not update properly when changed within a method

Hello everyone,

I am in need of some assistance with a puzzling issue.

Currently, I am generating a set of inputs using JSON. When I make changes to the data in the web interface, everything works fine.

The problem arises when I try to modify the value of any input within the component itself, for instance, in a function.

The changes do not seem to be detected. I have scoured this platform for information, but unfortunately, I have yet to discover a solution.

If you would like to take a look at the code and the issue I am facing, please follow this link:

Stackblitz Project Example

angulartypescriptangular-materialangular-ngmodel

Answer №1

Ensure that the proper bindings are used within the template:

In order to assign the value 

[ngModel]="form[inputs.value.name] || inputs.value.default"
, you can utilize the default value.

To update the value, it is necessary to pay attention to the output 

(ngModelChange)="form[inputs.value.name] = $event"
.

<input
  matInput
  type="number"
  id={{inputs.value.name}}
  [ngModel]="form[inputs.value.name] || inputs.value.default"
  (ngModelChange)="form[inputs.value.name] = $event"
  placeholder={{inputs.value.minimum}}
  min={{inputs.value.minimum}}
  max={{inputs.value.maximum}}
  step={{inputs.value.step}}
  matTooltip="{{inputs.value.title}}: {{inputs.value.description}}"
  matTooltipPosition="before"
  style="text-align: right;"
/>

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

Void represents the equivalence of a textual representation

Currently, I am working with Angular and TypeScript. Here is an example of my request: getOrders(this.value.id, null, null).subscribe((response) => { this.ordersArray = response }) I am facing an issue where the value null is being converted to "nul ...

ruby-on-railsangular

Issue: MUI Autocomplete and react-hook-form failing to show the chosen option when using retrieved information

The MUI Autocomplete within a form built using react hook form is causing an issue. While filling out the form, everything works as expected. However, when trying to display the form with pre-fetched data, the Autocomplete only shows the selected option af ...

reactjstypescriptreact-hooksmaterial-uireact-hook-form

module 'next/router' cannot be located or its associated type declarations are missing

Running into some issues with my NextJS application. An unusual error message is appearing, even though my code is functioning smoothly without any errors. import { useRouter } from 'next/router'; // Cannot find module 'next/router' or ...

javascripttypescriptnext.js

Getting into nested information in a JSON string using TypeScript

I need help accessing the data values (data1, data2, and date) from this JSON structure. I would like to store these values in an array that can be sorted by date: { "07" : { "07" : { "data1" : "-1", "data2" : "test", "date" : "1995-07-07" ...

jsontypescript

Detecting the language of a browser

In my Angular2 application, I am looking to identify the browser language and use that information to send a request to the backend REST API with localization settings and variable IDs that require translation. Once the request is processed, I will receive ...

angulartypescripttranslatelanguage-detection

Is there a way to set the size of my unique carousel design?

Having some trouble with my modal image carousel; the dimensions keep shifting for different image sizes. Image 1 Image 2 ...

htmlcssangularuser-interfacecarousel

Error: The TypeScript aliases defined in tsconfig.json cannot be located

Having trouble finding the user-defined paths in tsconfig.json – TypeScript keeps throwing errors... Tried resetting the entire project, using default ts configs, double-checked all settings, and made sure everything was up-to-date. But still no luck. H ...

node.jsjsontypescript

Extract image file name and date information (day, month, year) from an HTML form using Angular

The content of the register.component.ts file can be found below: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: [&apo ...

javascripthtmlangular

tips for sending types as properties in a versatile component

I am facing a challenge with passing types as props to a reusable component. I have a component where I pass rows and headings as props, but I need to find a way to pass types as props as well. Below is the code for my reusable component: import { TableCe ...

javascriptreactjstypescript

Turning XSD into TypeScript code

Stumbling upon this tool called CXSD, I was intrigued. The documentation describes cxsd as a streaming XSD parser and XML parser generator designed for Node.js and TypeScript (optional but highly recommended). It seemed like the perfect solution for my ne ...

xmltypescriptxsdschema

I encountered a problem while trying to install Angular Material within my Nx workspace

Currently in the process of setting up an Angular and React project within a Nx monorepo workspace. Encountering trouble while attempting to install Angular Material using npm i @angular/material I'm running Angular v16. Below is the specific error me ...

angularangular-materialnrwl-nxnx-workspace

Cannot access assets: Angular 8 deployment on Tomcat 9.0.30 is prevented due to an invalid MIME type ("text/html")

I am currently working on a project that involves an angular 8 user interface and a springboot java backend. The project is structured as a multi module project, with the angular portion in a separate module. To build the angular code into a single executa ...

angularspringspring-bootangular8tomcat9

React Typescript does not support the use of React-Router

I'm currently working on a React app that utilizes Typescript. The React version is set to "react": "^16.9.0", and the React-Router version is "react-router-dom": "^5.1.2". Within my App.tsx file, the structure looks like this: const App: React.FC ...

reactjstypescriptreact-routerreact-router-v4

Angular: detecting mobile status within template

Often in my templates, I find myself repeating this type of code: <custom-button [align]="isMobile() ? 'center' : 'left'"></custom-button> This also requires me to include a method in each component to determine w ...

angulartypescript

"Organize your files with React and TypeScript using a file list

interface IVideos { lastModified: number, name: string, path: string, size: number, type: string, webkitRelativePath: string } const [videos, setVideos] = useState<IVideos[] | null>([]); <input type="file" onChange={(event) => ...

reactjstypescripttypes

Encountering a Pulumi problem during infrastructure packaging: Unable to utilize an import statement beyond a module

I am experimenting with a new approach in Pulumi: bundling the infrastructure. My approach involves deploying a simple S3 bucket by leveraging an npm package. Here is the content of my bucket npm package: index.ts import * as aws from "@pulumi/aws&q ...

node.jstypescriptamazon-s3npmpulumi

Having trouble reading properties of undefined (specifically 'listen') during testing with Jest, Supertest, Express, Typescript

Issue: While running jest and supertest, I encounter an error before it even gets to the tests I have defined. The server works fine when using the start script, and the app is clearly defined. However, when running the test script, the app becomes undefi ...

node.jstypescriptexpressjestjssupertest

Issue with data updating in Angular rxjs with share, map, and filter functions

After gathering search criteria from a form, I have developed a method that retrieves an observable of talents. fetchTalents(searchCriteria) { return this._allUsers$.pipe( tap((talents) => console.log(talents)), map((tale ...

javascriptangularrxjsrxjs-observablesrxjs-pipeable-operators

Using Vuetify to filter items in a v-data-table upon clicking a button

My table structure is similar to this, I am looking to implement a functionality where clicking on the Filter Button will filter out all items that are both male and valid with a value of true. users = [ { name: 'ali', male: true, valid: ...

typescriptvue.jsnuxt.jsvuetify.js

Displaying an element in Angular 2 based on the selected option value

Looking for the most efficient method to display an element based on a selection from a dropdown menu in Angular 2. Despite trying various techniques, I have been unsuccessful in achieving the desired outcome! Below is the current implementation: HTML: ...

angularangular2-ngmodel