ngx-form-draft

Zero-dependency Angular form draft auto-save and restore. Works with Angular 14-20.

Features

• Auto-saves form values to localStorage
• Restores drafts on page reload
• Works with Reactive and Template-driven forms
• Handles nested FormGroups and FormArrays
• Visual banner with discard option
• 7-day draft expiration
• Zero external dependencies
• No Angular animations required (pure CSS)

Requirements

• Angular 14-20
• TypeScript 4.7+

Note: Angular 21+ support is not yet tested. The package uses stable Angular APIs that should work, but may require updates for newer versions. Please report any issues.

Installation

npm install ngx-form-draft

Setup

1. Import the module

import { NgxFormDraftModule } from 'ngx-form-draft';

@NgModule({
  imports: [NgxFormDraftModule]
})
export class AppModule {}

Usage

Reactive Forms

<form [formGroup]="myForm" ngxFormDraft="uniqueFormId">
  <input formControlName="name">
  <input formControlName="email">
</form>

Template-driven Forms

<form #myForm="ngForm" ngxFormDraft="uniqueFormId">
  <input name="name" [(ngModel)]="model.name">
  <input name="email" [(ngModel)]="model.email">
</form>

Scoped drafts (per entity)

<!-- Reactive -->
<form [formGroup]="editForm" [ngxFormDraft]="'edit_' + userId">

<!-- Template-driven -->
<form #editForm="ngForm" [ngxFormDraft]="'edit_' + userId">

Options

Reactive Forms

<form 
  [formGroup]="myForm"
  [ngxFormDraft]="'myForm_' + entityId"
  [draftDebounce]="1000"
  [draftExcludeFields]="['password', 'confirmPassword']"
  [draftShowOnChange]="true"
  [draftRestoredText]="'Draft restored'"
  [draftSavedText]="'Draft saved'"
  [draftSavedLabel]="'saved'"
  [draftDiscardText]="'Discard'">
</form>

Template-driven Forms

<form 
  #myForm="ngForm"
  [ngxFormDraft]="'myForm_' + entityId"
  [draftDebounce]="1000"
  [draftExcludeFields]="['password', 'confirmPassword']"
  [draftShowOnChange]="true"
  [draftRestoredText]="'Draft restored'"
  [draftSavedText]="'Draft saved'"
  [draftSavedLabel]="'saved'"
  [draftDiscardText]="'Discard'">
</form>

Input Properties

• ngxFormDraft (string): Unique form identifier
• draftDebounce (number): Debounce time in ms (default: 800)
• draftExcludeFields (string[]): Fields to exclude from draft
• draftShowOnChange (boolean): Show banner immediately on change (default: false)
• draftRestoredText (string): Banner text for restored draft
• draftSavedText (string): Banner text for saved draft
• draftSavedLabel (string): Label before timestamp
• draftDiscardText (string): Discard button text

Internationalization (i18n)

The package has zero dependencies and supports any i18n solution. Just pass translated strings via inputs:

With ngx-translate:

<form 
  [formGroup]="myForm"
  ngxFormDraft="myForm"
  [draftRestoredText]="'form_draft.restored' | translate"
  [draftSavedText]="'form_draft.saved' | translate"
  [draftSavedLabel]="'form_draft.saved_label' | translate"
  [draftDiscardText]="'form_draft.discard' | translate">
</form>

With Angular i18n:

<form 
  [formGroup]="myForm"
  ngxFormDraft="myForm"
  [draftRestoredText]="restoredText"
  [draftSavedText]="savedText"
  [draftDiscardText]="discardText"
  i18n-draftRestoredText="@@formDraftRestored"
  i18n-draftSavedText="@@formDraftSaved"
  i18n-draftDiscardText="@@formDraftDiscard">
</form>

With component properties:

// component.ts
export class MyComponent {
  draftTexts = {
    restored: 'Brouillon restauré',
    saved: 'Brouillon sauvegardé',
    savedLabel: 'sauvegardé',
    discard: 'Supprimer'
  };
}

<!-- template.html -->
<form 
  [formGroup]="myForm"
  ngxFormDraft="myForm"
  [draftRestoredText]="draftTexts.restored"
  [draftSavedText]="draftTexts.saved"
  [draftSavedLabel]="draftTexts.savedLabel"
  [draftDiscardText]="draftTexts.discard">
</form>

Default English text:

If you don't provide any text inputs, defaults are:

• draftRestoredText: "Draft restored"
• draftSavedText: "Draft saved"
• draftSavedLabel: "saved"
• draftDiscardText: "Discard"

License

MIT