Kevin Powell - Community•2y ago

Not able to display data in local storage to form

I was creating a way to save form data even when navigating to another component. The data gets saved to local storage but I'm not able to pre-fill the form using the data stored in local storage. It was working yesterday but today it is'nt working. Can anyone show me what I'm doing wrong. Here is the code for it.

  ngOnInit() {
    this.createRegForm();

    // predraft form retrieved from local storage
    const draft = localStorage.getItem('STEP_1');

    if (draft) {
      this.formData.setValue(JSON.parse(draft));
    }
    // predraft form saved to local storage
    this.formData.valueChanges
      .pipe(filter(() => this.formData.valid))
      .subscribe((val) => localStorage.setItem('STEP_1', JSON.stringify(val)));
  }

  ngOnInit() {
    this.createRegForm();

    // predraft form retrieved from local storage
    const draft = localStorage.getItem('STEP_1');

    if (draft) {
      this.formData.setValue(JSON.parse(draft));
    }
    // predraft form saved to local storage
    this.formData.valueChanges
      .pipe(filter(() => this.formData.valid))
      .subscribe((val) => localStorage.setItem('STEP_1', JSON.stringify(val)));
  }

17 Replies

MarkBoots•2y ago

Are you getting errors in the console. Try to log the values draft and val. Can you see the data in Developer Tools > Storage > Local Storage?

AdarshOP•2y ago

AdarshOP•2y ago

@markboots. Yeah i can see the values in local storage

MarkBoots•2y ago

okay, here you going wrong this.formData.setValue(JSON.parse(draft)); I do not know what library you are using, but i think you are missing the formData field name. I think setValue needs the name of the input & the value

AdarshOP•2y ago

yeah I did that but still not working @markboots.

MarkBoots•2y ago

Ah ok, it not just 1 value, it is the complete form. Im not familiar with Angular, but I'll do some searching

AdarshOP•2y ago

yeah the complete form data should be repopulated

MarkBoots•2y ago

in regular JS it would be formData.set("name", value) for each field. so looping over the object. I read the docs, it should indeed work like that. FormData.setValue indeed takes an object (had to confirm it formyself). Is your codesnippet above still the same? because i see you call it STEP_1 while in the storage screenshot it is step. Can you update it Also the error says this.formData.value , not setValue

AdarshOP•2y ago

ngOnInit() {
    this.createRegForm();

    let draft = window.localStorage.getItem('step');
    console.log(draft);
    if (draft) {
      this.formData.setValue(JSON.parse(draft));
    }

    this.formData.valueChanges
      .pipe(filter(() => this.formData.valid))
      .subscribe((val) =>
        window.localStorage.setItem('step', JSON.stringify(val))
      );

ngOnInit() {
    this.createRegForm();

    let draft = window.localStorage.getItem('step');
    console.log(draft);
    if (draft) {
      this.formData.setValue(JSON.parse(draft));
    }

    this.formData.valueChanges
      .pipe(filter(() => this.formData.valid))
      .subscribe((val) =>
        window.localStorage.setItem('step', JSON.stringify(val))
      );

I tried to add window before local storage @markboots.

MarkBoots•2y ago

window should not be necessary. can you console.log this.formData in the if statement, before you set it

AdarshOP•2y ago

Here is the object which the console is returning @markboots.

MarkBoots•2y ago

can you open the Prototypes? So we can see all the methods

AdarshOP•2y ago

Here it is @markboots.

MarkBoots•2y ago

hm, so we are missing the setValue method. Im out of ideas now. If you have some time, we better wait for someone with Angular experience. Maybe we are missing something obvious

AdarshOP•2y ago

Okay @jochemm do you have any idea why I cant retrive the data?

Jochem•2y ago

nope, sorry, never really used Angular

AdarshOP•2y ago

Oh okay

Gaming

Programming

Not able to display data in local storage to form