https://github.com/iliaidakiev/form-control-change-tracker
Angular Form Control Change Tracker
https://github.com/iliaidakiev/form-control-change-tracker
angular angular-forms change-tracking form-control-change-tracking has-changes has-form-changes
Last synced: 8 months ago
JSON representation
Angular Form Control Change Tracker
- Host: GitHub
- URL: https://github.com/iliaidakiev/form-control-change-tracker
- Owner: IliaIdakiev
- Created: 2020-05-15T14:07:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T08:16:49.000Z (almost 3 years ago)
- Last Synced: 2025-04-25T19:48:57.719Z (9 months ago)
- Topics: angular, angular-forms, change-tracking, form-control-change-tracking, has-changes, has-form-changes
- Language: TypeScript
- Size: 508 KB
- Stars: 5
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Form Control Change Tracker
Very often when developers need to know if there were any changes inside the a form in order to present a unsaved changes confirmation dialog when navigating away or in order to disable the save button when there is nothing new to save. The `FormControlChangeTrackerModule` provides two things:
* The `ChangeTrackerDirective (hgChangeTracker)` that can be set on the individual form controls in order to track if any changes are made
* And the `@hasChanges()` decorator that is applied over the `ChangeTrackerDirective` directives in order to provide you a boolean value indicating if there are any changes or not.
## Usage:
1. Import the module
your.module.ts
```typescript
@NgModule({
...
imports: [
...
FormControlChangeTrackerModule
]
})
export class AppModule { }
```
2. Add the directives and bind the initial value for each one.(the current example is using reactive forms but the module can be used with template driven forms as well. [Check out the demo app](https://stackblitz.com/github/IliaIdakiev/form-control-change-tracker))
your.component.html
```html
First Name
Last Name
Submit
```
3. Get the `hasFormChanges` value
your.component.ts
```typescript
@Component({
...
})
export class TemplateFromComponent {
@ViewChildren(ChangeTrackerDirective) @hasChanges() hasFormChanges: boolean;
...
}
```
**[Check out the demo app](https://stackblitz.com/github/IliaIdakiev/form-control-change-tracker)**
4. More configurations
### Decorator configuration
your.component.ts
```typescript
@Component({
...
})
export class TemplateFromComponent {
// ChangesWithValues { hasChanges: boolean; values: { [P in keyof T]: { current: T[P]; initial: T[P]; }; }; } (very useful for debugging)
@ViewChildren(ChangeTrackerDirective) @hasChanges({ includeChangedValues: true }) formChangesData: ChangesWithValues;
...
}
```
### Inputs
change-tracker.directive
```typescript
@Directive({
selector: '[ngModel][hgChangeTracker],[formControl][hgChangeTracker],[formControlName][hgChangeTracker]',
exportAs: 'hgChangeTracker'
})
export class ChangeTrackerDirective {
@Input() multiInitialValue = false; // used for multiple initial values
@Input() autoInitialValueSync = true; // it can be used to disable the auto syncing of initialValue input
// whenever the auto sync is disabled this method needs to be manually called in order for the new initial value to be set
// keep in mind that the newValue is optional and if omitted the last change of the initialValue binding will be the new initial value
resetInitialValue(newValue?: T) { ... }
}
```