Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngneat/dirty-check-forms
🐬Detect Unsaved Changes in Angular Forms
https://github.com/ngneat/dirty-check-forms
angular beforeunload dirty-check forms guard reactive reactive-forms
Last synced: about 1 month ago
JSON representation
🐬Detect Unsaved Changes in Angular Forms
- Host: GitHub
- URL: https://github.com/ngneat/dirty-check-forms
- Owner: ngneat
- License: mit
- Created: 2020-03-19T08:58:35.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T16:12:57.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T21:34:40.360Z (about 2 months ago)
- Topics: angular, beforeunload, dirty-check, forms, guard, reactive, reactive-forms
- Language: TypeScript
- Homepage: https://netbasal.com/detect-unsaved-changes-in-angular-forms-75fd8f5f1fa6
- Size: 2.66 MB
- Stars: 199
- Watchers: 9
- Forks: 15
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-opensource-israel - @ngneat/dirty-check-forms - 🐬Detect Unsaved Changes in Angular Forms    (Projects by main language / angular)
README
[]()
[]()
[]()
[](https://github.com/prettier/prettier)
[](#contributors-)
[](https://github.com/ngneat/)
[]()
> The cleanest way to do the dirty job
Detect Unsaved Changes in Angular Forms
## Features
- ✅ Dirty Check Forms!
- ✅ Support In-App Navigation
- ✅ Support Form Departure
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [In-App Navigation](#In-App-Navigation)
## Installation
`npm install @ngneat/dirty-check-forms`
## Usage
Call the `dirtyCheck` function, which accepts three arguments:
1. AbstractControl (`FormControl`, `FormGroup`, `FormArray`)
2. A stream with the original value to compare
3. Config:
- `debounce` - debounce time of `valueChanges`. Defaults to 300
- `withDisabled` - whether to include disable fields (by using control's `getRawValue`) or not. Defaults to `true`.
- `useBeforeunloadEvent` - enable or disable `onbeforeunload` event handling. Defaults to `true`.
The function returns an `Observable`, which notifies whether the form is dirty. Furthermore, it also hooks on the browser's `beforeunload` event to confirm upon refreshing/closing the tab when needed.
For example:
```ts
import { dirtyCheck } from '@ngneat/dirty-check-forms';
@Component({ ... })
export class SettingsComponent {
storeSub: Subscription;
settings = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl('')
});
isDirty$: Observable;
constructor(private store: Store) {}
ngOnInit() {
// Update the form with the current store value
this.storeSub = this.store.selectSettings()
.subscribe(state => this.settings.patchValue(state, { emitEvent: false }));
// Initialize dirtyCheck
this.isDirty$ = dirtyCheck(this.settings, this.store.selectSettings());
}
ngOnDestroy() {
this.storeSub && this.storeSub.unsubscribe();
}
}
```
```html
Submit
```
### In-App Navigation:
Create a guard that extends `DirtyCheckGuard`, and provide the `confirmChanges` method:
```ts
import { Injectable } from "@angular/core";
import { DirtyCheckGuard } from "@ngneat/dirty-check-forms";
import { Observable } from "rxjs";
@Injectable()
export class DirtyGuard extends DirtyCheckGuard {
constructor() {
super();
}
confirmChanges(): Observable | boolean {
return confirm('Are you sure you want to discard changes?');
}
}
```
Note that when using a guard, your component **must** implement the `DirtyComponent` interface:
```ts
import { dirtyCheck, DirtyComponent } from '@ngneat/dirty-check-forms';
@Component({ ... })
export class SettingsComponent implements DirtyComponent { ... }
```
The last step is to activate the `DirtyCheckGuard`:
```ts
const routes: Routes = [
{
path: 'settings',
component: SettingsComponent,
canDeactivate: [DirtyCheckGuard],
},
];
```
You can find a complete example [here](https://github.com/ngneat/dirty-check-forms/tree/master/apps/playground).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Dan Roujinsky
💻 📖 💡 🤔 📆
Netanel Basal
📝 💻 🖋 🎨 📖 💡 🚇 🚧 📆 ⚠️
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!