✨ Demo

The Storage Implementation

There are multiple types of storage that browsers support. We have local and session storage, IndexedDB, and WebSQL. We don’t want to limit ourselves to a specific storage, so we’ll create a base provider that’ll be used as our token:

Angular Forms WebStorage Persistence

This library was generated with Angular CLI version 8.1.3.

Installation - angular-forms-web-storage-persistence

bash $ npm i angular-forms-web-storage-persistence

Description

Imagine a case where a user fills out all or part of a form, and doesn’t get a chance to submit it. This could be caused by a sudden session timeout, or they hit the refresh button accidentally, or they momentarily navigated to a different page. Unless we’ve implemented persistence in our form values, such an experience can lead to a lot of frustration and even form abandonment. -This directive that seamlessly lets us persist any form value in our application via our storage. Let’s start by implementing the storage part:

Demo

• coming soon
• The following steps is required to use this directives:
  • The module need to import

import { FormStorageDirective } from 'angular-forms-web-storage-persistence';

Example 🚀

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { FormStorageDirective } from 'angular-forms-web-storage-persistence';

@NgModule({
declarations: [
AppComponent,
FormStorageDirective

],
imports: [
BrowserModule,

    ReactiveFormsModule,
    FormsModule,

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, OnDestroy } from '@angular/core';
import {
  FormGroup,
  FormControl,
  Validators,
  FormBuilder,
} from '@angular/forms';
import { StorageService } from 'projects/angular-forms-web-storage-persistence/src/public-api';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnDestroy {
  form: FormGroup;
  name = new FormControl('', Validators.required);

  constructor(fb: FormBuilder, private storage: StorageService) {
    this.form = fb.group({
      name: this.name,
      email: ['', Validators.required],
    });
  }

  onSubmitModelBased() {
    console.log('model-based form submitted');
    console.log(this.form);
  }

  ngOnDestroy() {
    sessionStorage.clear();
  }
}

app.component.html

<form [formGroup]="form" name="contact">
  <input formControlName="name">
  <input formControlName="email">
  <button type="submit">Submit</button>
</form>

Author

👤 Manvender Singh Rathore