Angular 7 - How do I get the edited fields from a form

Question

I have created a Form with few fields as 'Input type Text' and the values to text box are populated from Back end. This form is an Edit Page where the user will edit the required fields alone. I am using submit type button where the enitre form is submitted to the Angular Component. Along with that, I need to track which fields are edited in this form.

Followig is the code of the Angular Form I created.

<form [formGroup]="form" (ngSubmit)="edit()">
    <div class="container-fluid">
            <div class="row">
              <div class="col-12 edit-branch-block"> 
                <tr>
                    <td>Attribute_Name_1</td>
                    <td><input type="text" formControlName="Attribute_Name_1" disabled></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_2</td>
                    <td><input type="text" formControlName="Attribute_Name_2"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_3</td>
                    <td><input type="text" formControlName="Attribute_Name_3"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_4</td>
                    <td><input type="text" formControlName="Attribute_Name_4"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_5</td>
                    <td><input type="text" formControlName="Attribute_Name_5"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_6</td>
                    <td><input type="text" formControlName="Attribute_Name_6"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>Attribute_Name_7</td>
                    <td><input type="text" formControlName="Attribute_Name_7"></td>
                </tr>  
                <tr></tr>
                <button type="submit" style="margin-left: 10px; background-color:burlywood;"  class="edit-branch-button"> Edit </button>            
            </div>
        </div>
    </div>
</form>

If user has edited only two fields, I need to track which fields are edited. Can anybody help me on this?

Does this answer your question? [Angular 5 Form dirty check](https://stackoverflow.com/questions/50405358/angular-5-form-dirty-check) — GreyBeardedGeek, Mar 12 '20 at 03:23

score 1 · Accepted Answer · answered Mar 12 '20 at 08:22

You want to know which fields have changed before you submit a form. You could use .dirty on each form control, but this would only tell you if the value has been amended at some point. .dirty would still return true if the value was changed and then reverted.

Unfortunately, there's no built-in way to get a list of the form values have changed. For good reasons. Form structures can be very complex, and form values may not have a simple equality check.

I will demonstrate how I would approach this with a manual check. Maybe you can use this as a starting point and adapt it to your needs.

My approach

As with everything in Angular components, everything should come from your model. As long as we have a copy of our model, we can compare against it.

Once you have your model, you build your form using its values.

When the form is submitted, you can then check the values of the posted form against the original model, checking for differences. How you then use those differences is up to you.

Given the following model:

model = {
  first: 'first',
  second: 'second'
};

I am going to build the following form:

this.form = this.formBuilder.group({
  first: this.formBuilder.control(this.model.first),
  second: this.formBuilder.control(this.model.second)
});

When the form is submitted, I can compare the current form values against the model:

const dirtyFields = {
  first: this.form.value.first !== this.model.first,
  second: this.form.value.second !== this.model.second
};

This could probably be made generic with a lot of effort, but understanding how it works manually is a good starting point.

If you don't care that a value has changed and then been reverted, you could always just check the dirty flag on the form controls. This is still a manual check though, so you might as well check the values themselves.

DEMO: https://stackblitz.com/edit/angular-sb7r1k

Thank you so much! I will take this as starting point and implement it as per my needs. — code-geek, Mar 16 '20 at 03:43

Angular 7 - How do I get the edited fields from a form

1 Answers1

My approach