Save Data in Local Storage

If you want to save data in studentObj and you are using Reactive Forms, you can do something like this:

import { FormGroup, FormControl } from '@angular/forms';

// Assuming you have a Student class
export class Student {
  name: string;
  age: number;
  // add other properties as needed
}

// Your component
export class YourComponent implements OnInit {
  studentObj: Student = new Student();
  studentList: Student[] = [];
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(''),
      age: new FormControl(''),
      // add other controls as needed
    });
  }

  get f() {
    return this.form.controls;
  }

  saveData() {
    this.studentObj = this.form.value; // This will save form data to studentObj
    this.studentList.push(this.studentObj); // This will add the studentObj to studentList
  }
}

 

In the above code, ngOnInit is used to initialize the form with FormControl for each field. The saveData method is used to save the form data to studentObj and then push studentObj to studentList.

Remember to call saveData method when you want to save the data, for example, on a button click.

Please replace 'name', 'age' and other properties with your actual Student class properties. Also, don’t forget to import FormGroup and FormControl from @angular/forms.

thanks

Hello Ramco

You can use the localStorage to store the data in local storage.

please check-out the below code.

To set the value:

JSON.stringify() is needed if you are storing an object.

localStorage.setItem('form-data', JSON.stringify(this.testform.value));

To get the stored object from localStorage:

let formValue = JSON.parse(localStorage.getItem('form-data'))

Thanks

Vishal Joshi

Hello Ramco,

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

class Student {
  // Define all your form properties of Student here
  constructor(
    public id?: number,
    public name?: string,
    public age?: number
  ) {}
}

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
  form: FormGroup;
  studentObj: Student = new Student();
  studentList: Student[] = [];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      // Define your form controls here with all properties , e.g.:
      id: [''],
      name: [''],
      age: ['']
    });
  }

  ngOnInit(): void {
    this.loadStudentData();
  }

  get f() {
    return this.form.controls;
  }

  loadStudentData(): void {
    // Load data from local storage name with "studentObj"
    const studentData = localStorage.getItem('studentObj');
    const studentListData = localStorage.getItem('studentList');

    if (studentData) {
      this.studentObj = JSON.parse(studentData);
	  
      // Set the form values with the data from local storage
      this.form.patchValue(this.studentObj);
    }

    if (studentListData) {
      this.studentList = JSON.parse(studentListData);
    }
  }

  saveStudentData(): void {
    // Get data from the form and save it to studentObj
    this.studentObj = this.form.value;

    // Save studentObj and studentList to local storage
    localStorage.setItem('studentObj', JSON.stringify(this.studentObj));
    localStorage.setItem('studentList', JSON.stringify(this.studentList));
  }

  addStudentToList(): void {
    // Now you can add the current studentObj to the studentList
    this.studentList.push(this.studentObj);

    // Save the updated studentList to local storage with new student details
    localStorage.setItem('studentList', JSON.stringify(this.studentList));
  }
}