How can I get all the "dirty" (changed) fields using angular2 forms?

Question

I can’t find out how to get all fields changed by user using angular2 forms. I did some research here and in the official docs of angular2, and I could not find such information.

Here is how I do it using jQuery:

this.isFormDirty = function (form) { var changeNames = []; $(form).find(":input:not(:button):not([type=hidden])").each(function () { if ((this.type == "text" || this.type == "textarea" || this.type == "number" || this.type == "hidden" || this.type == "file") && this.defaultValue != this.value) { changeNames.push(this.name); } else { if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) { changeNames.push(this.name); } else { if ((this.type == "select-one" || this.type == "select-multiple")) { for (var x = 0; x < this.length; x++) { if (this.options[x].selected != this.options[x].defaultSelected) { changeNames.push(this.name); } } } } } }); return changeNames; }; 

Is there a way to do this using angular2 forms? I thought I would have some kind of changeValues ​​property, but I can't find it.

EDIT

This is how my form is created: (Form permission is of type FormGroup)

 this.permissionForm = this.fb.group({ FullUrl: ['', Validators.required], Area: ['', Validators.required], Controller: ['', Validators.required], Action: ['', Validators.required], Name: ['', Validators.required], Description: ['', Validators.required], ParentPermissionId: ['', Validators.required], ShowInMenu: ['', Validators.required], Order: ['', Validators.required], Icon: ['', Validators.required] }); 

Answer 1

Well, this is how I am going now:

 private getChangedProperties(): string[] { let changedProperties = []; Object.keys(this.permissionForm.controls).forEach((name) => { let currentControl = this.permissionForm.controls[name]; if (currentControl.dirty) changedProperties.push(name); }); return changedProperties; } 

I really hoped that angular2 forms would have simple ownership with this information. Please write another answer if there is a better way to do this.

Answer 2

You can achieve this using Observables:

 Observable.from(Object.values(this.permissionForm.controls)) .filter(control => control.dirty) .subscribe(control => { // Here doing stuff with all your dirty control }) 

You can also subscribe to control changes:

 this.permissionForm .valueChanges .subscribe(control => { // Here doing stuff with your control // like checking if control is dirty and append it to an array }); 

Answer 3

You can use this helper method to get the form dirty:

 function getDirtyState(form: FormGroup): Object { return Object.keys(form.controls).reduce<Object>((dirtyState, controlKey) => { const control = form.controls[controlKey]; if (!control.dirty) { return dirtyState; } if (control instanceof FormGroup) { return { ...dirtyState, [controlKey]: getDirtyState(control), }; } return { ...dirtyState, [controlKey]: control.value, }; }, {}); } 

It also processes nested formGroup and returns a value object with the same structure as the whole form.