Can't retrieve data from local storage (Angular 8)

Question

now i want the validation to work when user click on the input field, because it already shows the condition "please fill"

 > import { Component, OnInit, Input } from '@angular/core'; import { > Router } from '@angular/router'; import { FormBuilder, FormGroup, > FormArray } from '@angular/forms'; import { Validators } from > '@angular/forms'; > > > > @Component({ selector: 'todo-app', templateUrl: > './todo-app.component.html', styleUrls: ['./todo-app.component.css'] > }) export class TodoAppComponent implements OnInit { > > myForm: FormGroup; todoitems = []; todolist; submitted = false; > > > constructor(private router:Router, private formBuilder: FormBuilder > ) { } > > > ngOnInit() { > this.myForm = this.formBuilder.group({ > 'todoitems': [this.todolist,Validators.compose([Validators.required,Validators.minLength(3)])] > > }) > > this.todoitems = JSON.parse(localStorage.getItem('todoitems')); } > > get todoForms() { > return this.myForm.get('todoitems') as FormArray } > > addTodo(todolist) { > > if(this.myForm.invalid){ > return; > } > if (this.todoitems) { > this.todoitems.push(todolist); > if (this.myForm.valid) { > console.log("Form Submitted!"); > this.myForm.reset(); > } > localStorage.setItem('todoitems', JSON.stringify(this.todoitems)); > } } > > > deletetodo(index){ > this.todoitems.splice(index, 1); > localStorage.setItem('todoitems', JSON.stringify(this.todoitems)); > > > > > > } get f() { return this.myForm.controls; } > > } 

 < form [formGroup]="myForm" > <div class="input"> <input formControlName="todoitems" [(ngModel)]="todolist" name="todoitems" > <div *ngIf="myForm.controls.todoitems.errors"> <div *ngIf="myForm.controls.todoitems.errors.required"> please fill</div> <div *ngIf="myForm.controls.todoitems.errors.minlength">min 3</div> <div *ngIf="submitted && f.todoitems.errors.apply(this.submitted)"> <div *ngIf="f.todoitems.errors.required">First Name is required</div> </div> </div> <button type="submit" (click)="addTodo(todolist)">Add</button > <table style="width:50%"> <tr *ngFor="let todoitem of todoitems; let i = index"> <td>{{ todoitem }}</td> <td> <button (click)="deletetodo(i)">Delete</button> </td> </tr> </table> </div> </form> 

Answer 1

You can try in this way:

https://www.npmjs.com/package/ngx-webstorage-service

import { SESSION_STORAGE, StorageService } from 'ngx-webstorage-service';

in your ts file, where you imported the storage objects:

Answer 2

You are storing the data in the localStorage but you are never retrieving that stored data. So to retrieve data you can use localStorage.getItem('key') .

(This solution is without any third-party library)

this.todoitems = JSON.parse(localStorage.getItem('todoitems'));

TS ngOnInit() Code:

ngOnInit() {
  this.myForm = this.formBuilder.group({
    'todoitem': this.todolist
  })

  this.todoitems = JSON.parse(localStorage.getItem('todoitems')); -- this line
} 

Working-Demo