1

I would like to know if there is any method that returns the fields that were changed in the form. I need to create a string list with the fields that have changed.

I own a very large form with about 30 fields.

One way would be to scroll through all the fields, but it would be a little painful as I have keys that hold an object and also have keys that hold a list of objects.

It would be nice if there was a function that would return all fields and objects that were changed on my form.

What is the right way to do this in Angular with Reactive Forms?

If possible write a code here, or tips on how you could be doing the validation of the fields that were changed on my form.

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

Luiz Ricardo Cardoso
  • 1,554
  • 4
  • 16
  • 37
  • What have you tried so far ? can you share stacknlitz.. – programoholic Jan 18 '19 at 07:31
  • No, there is no such thing in reactive form. You just have to look into vanilla js on how to compare two objects, here's some options: https://stackoverflow.com/questions/8572826/generic-deep-diff-between-two-objects – AT82 Jan 18 '19 at 07:34
  • At the moment I could not create any logic, I'm thinking about how to do this because I have a form with many fields, this would be a large object with keys that have another object as value. – Luiz Ricardo Cardoso Jan 18 '19 at 07:34
  • If you do: form.value.entries() and use lodash https://lodash.com/docs/#differenceBy, you can compare the form before and after changes. – Thomaz Capra Jan 18 '19 at 08:04

2 Answers2

1

Following method will return you the list of values which got changed :

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

        Object.keys(formName.controls)
            .forEach(key => {
                let currentControl = formName.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 dirty-flag. Read form here https://angular.io/api/forms/FormControl

programoholic
  • 4,830
  • 5
  • 20
  • 59
  • 1
    this doesn't cover the case that if user interacts with field, but retypes the original value. – AT82 Jan 18 '19 at 07:38
  • What would be the getDirtyValues method? – Luiz Ricardo Cardoso Jan 18 '19 at 07:43
  • This way works for FormControl-type controls, but I can not tell which fields have been changed in a control that is of the FormGroup type. – Luiz Ricardo Cardoso Jan 18 '19 at 07:52
  • `It would be nice if there was a function that would return all fields and objects that were changed on my form.` -> you can call this where you want to validate the changes – programoholic Jan 18 '19 at 07:52
  • @LuizRicardoCardoso this is generic function you can pass any form group and it will return you the values which got changed. Using this tip you can achieve your requirement – programoholic Jan 18 '19 at 07:54
  • The function you wrote only works for `FormControl` type controls, I have a form with controls of type `FormGroup` and `FormArray`. When traversing a control of type `FormGroup` the return to `currentControl` is `undefined`.... In this way I do not have access to `dirty` property – Luiz Ricardo Cardoso Jan 18 '19 at 07:58
  • Actually I only get the dirty property when the control is of type FormArray and FormControlActually I only get the dirty property when the control is of type FormArray and FormControl. – Luiz Ricardo Cardoso Jan 18 '19 at 08:00
  • Here's an example of how I'm putting together my form: https://stackblitz.com/edit/angular-khiusf – Luiz Ricardo Cardoso Jan 18 '19 at 15:41
0

If you save the initial form value, you can compare to know what changed.

You can see an example working here.

Thomaz Capra
  • 985
  • 9
  • 21
  • As you've demonstrated, you just check `FormControl`, but on my form I also need to check when a `FormGroup` or `FormArray` is changed see here: https://stackblitz.com/edit/angular-khiusf – Luiz Ricardo Cardoso Jan 18 '19 at 15:39