Tips for sending just the updated section of the form

Question

Tips for sending just the updated section of the form

I am working with a form group where I map the values from the form to an object type in order to make a request to edit the item.

This is my form structure:

  public companyForm = new FormGroup(
    {
      generalInfo: new FormGroup({
        name: new FormControl('', [Validators.required, Validators.maxLength(this.maxLength)]),
        active: new FormControl(false)
      }),
      address: new FormGroup({
        street: new FormControl('', [Validators.required, Validators.maxLength(this.maxLength)]),
        streetNumber: new FormControl('', [Validators.required]),
        postalCode: new FormControl('', [Validators.required]),
        city: new FormControl('', [Validators.required]),
        country: new FormControl('', [Validators.required])
      })
   })

Here is the CompanyEdit object structure:

      name: formValue.generalInfo.name,
      active: formValue.generalInfo.active,
      address: {
        street: formValue.address.street,
        city: formValue.address.city,
        streetNumber: formValue.address.streetNumber,
        postalCode: formValue.address.postalCode
      },
      country: formValue.address.country

The field names and nesting structure do not align. When editing, I need to send only the changed controls on the form. Is there a recommended way to identify the dirty controls and map them to my object type?

angular typescript angular-forms

Answer 1

Answer №1

If you want to see if there are any dirty values in a formGroup, you can easily check for them.

I came across a solution to a similar issue on stackoverflow here. I have included the code snippet below for your reference.

  function findDirtyValues(form: any) {
        let dirtyValues = {};

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

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

        return dirtyValues;
}

Answer 2

If you want to see if there are any dirty values in a formGroup, you can easily check for them.

I came across a solution to a similar issue on stackoverflow here. I have included the code snippet below for your reference.

  function findDirtyValues(form: any) {
        let dirtyValues = {};

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

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

        return dirtyValues;
}

Tips for sending just the updated section of the form

Answer №1

Similar questions

Comparison between TypeScript's variable scope and JavaScript's variable scope

In React Typescript, there is an issue with react-router v4 where the Route component does not pass its props to the specified component

Can a type be established that references a type parameter from a different line?

TypeORM does not have the capability to specify the database setting within the entity decorator

I am able to view the node-express server response, but unfortunately I am unable to effectively utilize it within my Angular2 promise

Is it possible to pass a variable to a text constant in Angular?

Is there a way to replicate the tree structure of an array of objects into a different one while modifying the copied attributes?

Struggling to get the bindings to work in my Angular 2 single-page application template project

Issue with Bootstrap Angular dropdown menu malfunctioning within ChildRoute

Tips for dismissing loader in Ionic 4

Optimal approach for securely managing API credentials within Angular 2+ applications

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

Best Practices for Updating UI State in Client Components Using NextJS and Server Actions

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

Leverage TypeScript to enforce the value of a property based on the keys of another property

Form appears outside the modal window

NgFor is designed to bind only to Iterables like Arrays

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Error encountered in azure devops preventing successful execution: "npm ERR! code ELIFECYCLE"

Implement a conditional block in my form validation process