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

What is the best way to extract the ID from an event in TypeScript?

HTML Code: <ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event)" ></ion-checkbox> TypeScript Code: onTap(e) { console.log(e); console.log(e.checked); } I am trying to retrieve the id of the checkbox. H ...

javascriptangulartypescriptionic2

Retrieving information from a JSON object in Angular using a specific key

After receiving JSON data from the server, I currently have a variable public checkId: any = 54 How can I extract the data corresponding to ID = 54 from the provided JSON below? I am specifically looking to extract the values associated with KEY 54 " ...

javascriptarraysjsonangulartypescript

Exploring Angular's ability to utilize the Map and Subscribe functions within an

I could use some assistance with RxJS. I have a piece of code that is supposed to fetch an API and then, for each returned element, retrieve the type of that element from another API. The code is functioning properly, but it returns an Observable for the ...

angularrxjs

Customizing the like button functionality for individual elements, with the ability to unlike, utilizing Angular

I am looking to implement a Like button feature that increments the counter when clicked once, and decrements it on another click. I have multiple elements with the like button and I want them to function independently from each other. Please note that ...

angular

There was an error in processing node npm due to Z_DATA_ERROR with error code errno -3, indicating an

When attempting to run my TypeScript project using tsc, I encountered the following error: Found 181 errors in 4 files. Errors Files 1 node_modules/@types/eslint-scope/node_modules/@types/eslint/helpers.d.ts:1 1 node_modules/@types/eslint/hel ...

node.jstypescript

Is there a way to locate all items that satisfy a specific criterion within JSON Data?

Utilizing data from an API-Call, I have established a many-to-many relationship - illustrated with the examples of people and movies. Multiple individuals can watch one movie, and one person can view several movies. In the Angular Frontend, when a person ...

javascriptarraysjsonangularloops

I'm currently working on building a fresh window with Tauri 1.2, combining the powers of Rust, React, and Typescript. However, I've encountered a few

Utilizing Tauri's WindowBuilder in Rust, I attempted to create a new window. Despite successfully generating a blank window, I encountered challenges: The inability to display any content on the window The failure to close the window Being relativel ...

reactjstypescriptrusttauri

Is there a way to verify in Angular whether an image link has a width and height exceeding 1000?

I'm currently working on a function that checks if an image linked in an input field has a width and height greater than 1000 pixels, and is in JPG format. Here's my approach: HTML: <input (change)="checkValidImage(1, product.main_photo)" [ ...

angulartypescript

Ways to attach an event listener to a useRef hook within a useEffect hook

As I work on creating a custom hook, I am faced with the task of adding an event listener to a ref. However, I am uncertain about how to properly handle cleaning up the event listener since both listRef and listRef.current may potentially be null: const ...

reactjstypescriptreact-hooks

Using React to make an API call without utilizing hooks

Hello, I am currently working on developing a webpart using SharePoint and React. However, I am facing some issues with fetching data from a simple API. export default class Testing100 extends React.Component<ITesting100Props, {}> { constructor(p ...

reactjstypescriptsharepointweb-parts

Enhancing DOM Elements in a React Application Using TypeScript and Styled-Components with Click Event

I've been working on an app using React, Typescript, and styled components (still a beginner with typescript and styled components). I'm trying to create a simple click event that toggles between which of the two child components is visible insid ...

reactjstypescriptonclickdom-eventsstyled-components

having difficulty accessing the value within the Angular constructor

My current issue arises when I click on a button and set a value within the button click method. Despite declaring the variable in the constructor, I am unable to retrieve that value. The code snippet below demonstrates this problem as I keep getting &apos ...

javascriptangulartypescript

An empty constant object can trigger an endless cycle of re-rendering

Consider this simplified scenario: export function myCustomHook<TData = Record<string,string>> (data?: TData) { const [output, setOutput] = useState<number>(); const customFunction(data?: TData) { //In a real scenario : p ...

reactjstypescriptreact-hooks

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

Many examples use the Observable.subscribe() function in AngularIO. However, I have only seen anonymous functions being used like this: bar().subscribe(data => this.data = data, ...); When I try to use a function from the same class like this: update ...

javascriptangulartypescriptthissubscribe

Retrieve a single document using Angularfire2 without setting up a listener

I'm facing an issue with angularfire2 v6 and angular 11. Specifically, I am attempting to retrieve a single document from the users collection based on their email without utilizing valueChanges() or snapshotChanges(). Realtime updates are not necessa ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Having trouble with Angular redirecting to the incorrect URL?

Currently delving into the world of Angular, I am eager to create a straightforward application where users can effortlessly switch between two components. The issue arises when attempting to navigate back from the navbar to the login component: <a rout ...

angular

The comparison between using Reflect.decorate and manual decorating in TypeScript

Here are two different decorators that I am using: import "reflect-metadata"; const enum MetadataTypes { Type = "design:type", Paramtypes = "design:paramtypes", ReturnType = "design:returntype" } function DecoratorA(target: any, key: string): void ...

typescriptmetaprogramming

Troubles with Typescript typings when including an empty object in an array with specific typings

, I am facing a dilemma with displaying houses in a cart. Each house has an image, but since they load asynchronously, I need to show empty cards until the data is fetched. Initially, I added empty objects to the array representing the houses, which worked ...

angulartypescript

Building a user interface in Angular2 that consists of multiple components and utilizes

What is the recommended structure for an Angular2 (beta3) application with routing when incorporating a parent/child multi-component setup? When dealing with individual tables, I have set up the following structure: https://i.stack.imgur.com/BYqGU.jpg I ...

angular

Implementing express-openid-connect in a TypeScript project

Trying to incorporate the express-openid-connect library for authentication backend setup with a "simple configuration," an issue arises when attempting to access the oidc object from express.Request: app.get("/", (req: express.Request, res: express.Respon ...

node.jstypescriptexpressauth0