Record modified fields using Angular Reactive Forms and store them in a list

Is there a method available that can identify and return the fields that have been modified within a form? I am looking to generate a list of string values for the changed fields.

I am dealing with a complex form containing approximately 30 different fields.

Manually scrolling through each field is cumbersome, especially considering some keys contain objects while others hold lists of objects.

An ideal solution would involve a function that could automatically detect and return all modified fields and objects in my form.

How can this be achieved effectively using Angular's Reactive Forms?

If possible, please provide code snippets or suggestions on how to implement validation for changed fields within my form.

StackBlitz: https://stackblitz.com/edit/angular-khiusf

angulartypescriptangular-reactive-forms

Answer №1

To retrieve a list of values that have been changed, use the following method:

getDirtyValuesForForm(form: any) {
        let dirtyValues = {};

        Object.keys(form.controls)
            .forEach(key => {
                let currentControl = form.controls[key];

                if (currentControl.dirty) {
                    if (currentControl.controls)
                        dirtyValues[key] = this.getDirtyValues(currentControl);
                    else
                        dirtyValues[key] = currentControl.value;
                }
            });

        return dirtyValues;
}

You can check controls for the dirty flag by visiting https://angular.io/api/forms/FormControl.

Answer №2

By preserving the original form input, you'll be able to identify any modifications made.

To see a live demonstration, check out this example.

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

Unable to access default root folder after renaming wwwroot in Web API .NET Core

I have made some changes to my .net core web api application. I decided to rename the wwwroot folder to "clientapp" and use that folder as the output destination for an angular application build. Whenever I run the command: ng build it now compiles the f ...

angularasp.net-coreasp.net-web-api.net-coreasp.net-core-webapi

Deducting days, hours, and more from the current time using Angular 2

I am attempting to calculate the difference in days, hours, and minutes from the current time. Following the instructions on npmjs website, I have successfully installed the necessary package using the command: npm install --save add-subtract-date. Next, ...

angulardatenpm

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

I'm attempting to create a checkbox that, when selected, should also select everything else. I followed the code example provided in this tutorial for angular 2. However, I encountered an error: "ERROR TypeError: Cannot set property 'IS_CHECK&ap ...

htmlangulartypescript

Unable to change the directory for angular2/core - having issues with updating

Whenever I include the following code in my app.component.ts: import {Component} from 'angular2/core'; My application runs successfully, but the compiler throws an error saying Error:(1, 25) TS2307: Cannot find module 'angular2/core', ...

typescriptangular

Angular 7 - ngForm and ngSubmit: Resubmitting outdated data

I have a form in Angular 7 set up like this: <form #payForm="ngForm" (ngSubmit)="onSubmit(payForm, $event)" method="POST" action="POST URL HERE"> <input type="hidden" name="requestParameter" [value]="stringToSend" /> <div class= ...

angularangular7

Loop through the coefficients of a polynomial created from a string using JavaScript

Summary: Seeking a method to generate a polynomial from specified coordinates, enabling coefficient iteration and optional point evaluation I am currently developing a basic JavaScript/TypeScript algorithm for KZG commitments, which involves multiplying c ...

javascripttypescriptalgorithmpolynomialselliptic-curve

I'm having trouble accessing my namespace in TypeScript because it hasn't been properly

After obtaining Visual Studio Community 2015 along with Node.js Tools, I decided to create a "Blank Node.js Console Application" Typescript project. Within this project, I added another TypeScript file named TypeScript1.ts. In this file, I defined the fol ...

node.jsvisual-studionamespacestypescript

JavaScript: Transform an Array of Strings into an Array of Objects

Here is an array containing different strings: let myArray : ["AA","BB" , "CC" ...] My goal is to transform it into an array of objects: myArray = [{"id":1 , "value": "AAA"},{"id":2 , "value": "BBB"},{"id":3 , "value": "CCC"}...] I attempted to achiev ...

javascriptangulartypescriptprototype

Eliminate redundant template code for Angular 2 components

Currently, I am developing a project using Angular 2 with the user-friendly Gentallela Alela HTML template. In many of my views, there are several components that share similar markup in their template files: <div class="col-md-12 col-sm-12 col-xs-12"& ...

angularangular2-template

Utilizing statuses in Typescript React for conditional rendering instead of manually checking each individual variable

It's common for developers, myself included, to perform conditional rendering by checking variable values like this: import React, { useState, useMemo } from 'react' const Page = () => { const [data, setData] = useState<any[]>() ...

reactjstypescript

Connect the backend with the frontend using React.js

I am currently faced with the task of developing the front end for an existing backend project. The original front end was built using Angular, but I am opting to recreate it using React. However, I am unsure about how to establish a connection between t ...

reactjsangulartoken

Currently working on building an ecommerce application through a Udemy course but encountering some challenges with Spring Security implementation

I have a file called SecurityConfiguration.java in my project package com.luv2code.ecommerce.config; import org.springframework.context.annotation.Bean; import com.okta.spring.boot.oauth.Okta; import org.springframework.context.annotation.Configuration; i ...

angularspring-bootspring-securityapplication.properties

Using Angular 2 to trigger an event when a native DOM element is loaded

I am working towards my main objective of having a textarea element automatically focused upon creation. I recently came up with an idea to use e.target.focus() on the onload event. It would look something like this: <textarea rows="8" col="60" (load)= ...

javascripthtmlangular

Exploring the latest features of Angular 13 alongside a useful NPM module that utilizes

I have encountered an issue with my date-picker module for Angular that involves importing moment.js. The problem arises when I import the NPM package moment-es6, which imports moment.js in the following way: import * as moment from "moment"; ...

angulartsconfig

Using Azure AD for authentication: Implementing Msal authentication in a React Next.js application with TypeScript and App Router

Working on a React Next.js web application with Microsoft Authentication Library (MSAL) login integration, using Azure. The app utilizes Next.js with the App Router for routing. But encountering an error when attempting to run the app: createContext only w ...

reactjstypescriptnext.jsazure-ad-msal

Printing the default value set in the constructor using HTML

I'm encountering an issue while trying to set a default value from the constructor parameters and display it in HTML. The error message I'm receiving is: No suitable injection token for parameter 'name' of class 'AppComponent' ...

angular

Leverage dependency injection with vue / vitest to enhance modularity and

My Software Configuration Developing a Vue 3 application Utilizing Pinia stores Initiating a plugin in my main.ts by using app.use(myPlugin) Creating and providing a repository (MyRepo) in MyPlugin.ts based on specific environment conditions. This reposi ...

typescriptvue.jsdependency-injectionpiniavitest

Angular2 TimeChooser

Currently, I am searching for alternatives to the clockpicker tool that is compatible with a web app built using Angular 2. Something similar to , for example. I have done some research but it seems difficult to find an easy setup solution. Has anyone ...

angulartimepickerclockpicker

Encountering a problem when attempting to add ngrx to an Angular project

I'm currently in the process of setting up ngrx in my Angular application. After running the command ng add @ngrx/store@latest An error occurred with the following details: npm resolution error report 2022-07-07T20:36:16.089Z While resolving: [em ...

angularngrxngrx-store

What might be causing the excessive margins in my Bootstrap grid layout?

I've recently integrated Bootstrap into my Angular project using npm, but I'm facing an issue with excessive margins on the sides. Can anyone provide assistance? Below is the code snippet: <div class="container"> <div class="row"> ...

htmlangulartwitter-bootstrapbootstrap-4