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

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>

Solution

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