Updating FormGroup Value in Angular When Value Changes

I am working on a project where I need to dynamically set a value for a formControl within a formGroup based on changes to another formControl in the same formGroup.

However, when I attempted to implement this, I encountered an error stating: 

maximum call stack size exceeded angular
:

this.formGroup.get('DepreciationConfigInfo')
      ?.valueChanges.pipe(takeUntil(this.destroy$))
        .subscribe((depreciationConfigInfo) => {
          this.formGroup.get('DepreciationConfigInfo')
          ?.get('DepreciationEnd')?.setValue(5)
        })

I am focusing on the FormGroup and trying to listen for changes to the DepreciationPeriod or DepreciationStart event:

DepreciationConfigInfo: new UntypedFormGroup({
  DepreciationPeriod: new UntypedFormControl(),
  DepreciationStart: new UntypedFormControl(),
  DepreciationEnd: new UntypedFormControl({value: '', disabled: true}),
 
}),

Thank you for any assistance.

angulartypescriptobservableangular-reactive-formsformgroups

Answer №1

this.formGroup.get('DepreciationConfigInfo')
      ?.valueChanges.pipe(unsubscribeAfter(this.destroy$))
        .subscribe((depreciationConfigInfo) => {
          this.formGroup.get('DepreciationConfigInfo')
          ?.get('DepreciationEnd')?.setValue(5, { triggerEvent: false })
        })

By avoiding the event trigger, the form control remains unaffected by the change.

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 implement a dynamic mask using imask in a React

I have a question regarding the implementation of two masks based on the number of digits. While visually they work correctly, when I submit the form, the first mask is always selected. How can I resolve this issue? My solution involves using imask-react ...

reactjstypescriptnext.jsimaskjs

The Google OAuth profile response is lacking the Profile ID - NextAuth

I've been diving into a helpful tutorial on implementing roles in the next-auth session. However, I've encountered an issue where adding the profile property results in unexpected behavior with the profile being undefined. Additionally, there are ...

typescriptnext.jsprismanext-autht3

Guide on converting any object with keys of type string to a generic type

I'm grappling with a function that yields an Output generic type. In this function, I initiate an API request that responds with a json object. My aim is to have the function return this json object in the Output Generic type format Take a look at th ...

typescript

Removing a selected row from a data table using an HTTP request in Angular 2

I am working with a table that has data retrieved from the server. I need to delete a row by selecting the checkboxes and then clicking the delete button to remove it. Here is the code snippet: ...

javascriptangularjsangular

Verify the login details of a distant website using Angular

Currently, I am in the process of developing a user interface for Hacker News using Angular 7. Typically, I rely on public APIs for various functionalities, but unfortunately, login services are not accessible through these APIs. In order to address this ...

angularrestpostpostmanhacker-news-api

Configuration of Routes in Angular 2

I am interested in dynamically creating RouteConfig as shown below: for (let route of routes) { { path: route.name , component: route.component } } Instead of hardcoding it like this: { path: '', redirectTo: 'Home', pathMatch: &a ...

angular

Display the HTML string as regular text in an Angular application

I'm working on a blog project with Angular. I need to display HTML content retrieved from the database as plain text for each blog post preview. The HTML formatting was done with ngx-quill. While I can render the rich text using <quill-view [conte ...

angularquillngx-quill

Facing issues with building Angular 7 and Ionic 4 - getting error message "TypeError: Cannot read properties of undefined (reading 'kind')"

I need assistance with a problem I am encountering while building my Angular 7 & Ionic 4 application... When I run the ng build --prod command, I encounter the following error: ERROR in ./node_modules/ionic4-auto-complete/fesm5/ionic4-auto-complete.js ...

javascriptangularcordovaionic-framework

Loop through a FormArray containing FormGroups

I'm struggling with the functionality of my form array containing form groups. My goal is to loop through the form array and display the input fields within each form group. However, when I use addExercise(), the new form group that I add to the arra ...

angularionic-frameworkangular-reactive-formsformarrayformgroups

Encountering an error in TypeScript: Attempting to define type files for a third-party library triggers the TS2709 error when attempting to use the 'Optional' namespace as a type

Currently, I'm in the process of creating type files for a third-party library called optional-js. The structure is as follows: index.js var Optional = require('./lib/optional.js'); module.exports = { empty: function empty() { ...

typescript

Two storage locations exhibit distinct behavior when it comes to the favicon

After moving my repository to a new origin and pulling it into a different directory on my computer, I encountered an issue with my .NET Core API and Angular client. The problem is that the new instance of the repository, after being built, does not disp ...

angular.net-corefavicon

Create a reusable React component in Typescript that can handle and display different types of data within the same

I have a requirement to display four different charts with varying data types. For instance, interface dataA{ name: string, amount: number } interface dataB{ title: string, amount: number } interface dataC{ author: string, amount: ...

reactjstypescriptgenerics

What is the process for importing a package in AtmosphereJS?

Despite following the steps outlined in this guide for using atmosphere packages in my meteor project, I am encountering errors when I run meteor. One specific issue I am facing is with the vsivsi:job-collection package. When I try to reference it like th ...

angulartypescriptmeteoratmosphere.js

Guide to incorporating Bootstrap icons into an Angular application through programming techniques

Have you checked out the official bootstrap documentation for information on how to use their icons? https://i.stack.imgur.com/N4z2R.png I'm currently trying to understand the package and its usage. However, none of the options in the documentation ...

angulartypescriptbootstrap-4icons

Tips for adjusting the size of Angular Material elements

In the midst of my work on an Angular application, I have been utilizing angular material components. However, as I delved into styling the application, I encountered difficulties in styling the angular material component, particularly in enlarging a dropd ...

cssangularangular-material

Sample Angular component showcasing arguments and content within a storybook MDX preview

We showcase our angular components using Storybook and typically utilize the MDX format for this purpose When dealing with an angular component that needs content and accepts properties (via the "Controls" Plugin), I am facing difficulties in implementing ...

angularstorybookmdxjsangular-storybook

Can content projection be utilized from a child component in Angular?

Keep in mind, this example could be achieved without using content projection. I am just showing a simplified version here. Imagine having a component that displays lists of names in two separate elements: import { Component } from '@angular/core&ap ...

htmlangulartypescript

Bringing in CSS variables to a Typescript document

In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files. However, some of our older code follows a similar structure bu ...

javascriptcssreactjstypescriptmobx

When using Styled Components with TypeScript, you may encounter the error message "No overload matches

Recently, I've delved into Style Components in my journey to create a weather app using React Native. In the past, I would typically resort to CSS modules for styling, but it appears that this approach is not feasible for mobile development. Below is ...

reactjstypescriptreact-nativetypeerrorstyled-components

Having trouble incorporating a variable into the Discord Client object in Typescript

As a newcomer to Typescript, I am working on creating a Discord bot using Typescript. I am trying to add a variable called "commands" to the Client object. In JavaScript, you can achieve this using the following code: Javascript const { Client } = require ...

javascriptnode.jstypescriptdiscorddiscord.js