Kevin Powell - Community•16mo 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•16mo 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?

Adarsh•16mo ago

Adarsh•16mo ago

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

MarkBoots•16mo 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

Adarsh•16mo ago

yeah I did that but still not working @markboots.

MarkBoots•16mo ago

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

Adarsh•16mo ago

yeah the complete form data should be repopulated

MarkBoots•16mo 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

Adarsh•16mo 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•16mo ago

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

Adarsh•16mo ago

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

MarkBoots•16mo ago

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

Adarsh•16mo ago

Here it is @markboots.

MarkBoots•16mo 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

Adarsh•16mo ago

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

Jochem•16mo ago

nope, sorry, never really used Angular

Adarsh•16mo ago

Oh okay

Gaming

Programming

Not able to display data in local storage to form