[]() []() []() [](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 two arguments: 1. AbstractControl (`FormControl`, `FormGroup`, `FormArray`) 2. A stream with the original value to compare 3. Config 3.1 `debounce` - debounce time of `valueChanges`. Defaults to 300 3.2 `withDisabled` - whether to include disable fields (by using control's `getRawValue`) or not. 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!