Something missing me in local storage please help ! i tried all my best but still i am missing something

@Fares95 wrote:

i have a form and i wanted to store the values of the data after submitting it
after i tested it there was error

my ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, NgForm, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';
import { ToastController } from 'ionic-angular';
import { EspaceAgentPage } from '../espace-agent/espace-agent';
import { EspaceCitoyenPage } from '../espace-citoyen/espace-citoyen';
import { ChangePasswordPage } from '../change-password/change-password';
import { Storage } from '@ionic/storage';
import { PasswordService } from '../services/password.service';
import { NgModule } from '@angular/core';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage {
private Form : FormGroup;
public mail;
public tel;

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, private formBuilder: FormBuilder, public storage: Storage)
  {
    this.Form = formBuilder.group({
    mailadress: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'),Validators.email])],
    telephone: ['', Validators.compose([ Validators.pattern('[0-9]*'), Validators.minLength(8), Validators.maxLength(8)])],
});
this.mail=this.Form.mail;
this.telephone=this.Form.tel;
}

  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingsPage');
  }

  setValue()
  {
     this.storage.set("mail",this.Form).then((successData)=>{
       console.log("Data Stored");
       console.log(successData);
     })

   }

   getValue()
   {
     this.storage.get("mail").then((data)=>{
       console.log(data);
     })
     this.storage.get("tel").then((data)=>{
       console.log(data);
     })
   }
onChangepassword()
{
  this.navCtrl.push(ChangePasswordPage);
}

onSubmit(form: NgForm)
  {
  this.navCtrl.push(EspaceCitoyenPage);
  console.log(form.value);
    this.setValue();
  const toast = this.toastCtrl.create({
  message: 'Modifications Enregistrées !',
  duration: 4000
    });
    toast.present();
}


 }

the error :
ouldn’t convert value into a JSON string: FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
serialize @ localforage.js:1581
(anonymous) @ localforage.js:1821
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4751
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
c @ polyfills.js:3
(anonymous) @ polyfills.js:3
(anonymous) @ localforage.js:1698
SQLStatement (async)
createDbTable @ localforage.js:1668
(anonymous) @ localforage.js:1696
SQLTransaction (async)
(anonymous) @ localforage.js:1695
t @ polyfills.js:3
_initStorage$1 @ localforage.js:1685
extendSelfWithDriver @ localforage.js:2694
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4751
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Converting circular structure to JSON
TypeError: Converting circular structure to JSON
at JSON.stringify ()
at Object.serialize (VM2504 vendor.js:132955)
at VM2504 vendor.js:133197
at t.invoke (polyfills.js:3)
at Object.onInvoke (VM2504 vendor.js:5445)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (VM2504 vendor.js:5436)
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (VM2504 vendor.js:5436)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
defaultErrorLogger @ core.js:1449
ErrorHandler.handleError @ core.js:1510
IonicErrorHandler.handleError @ ionic-error-handler.js:61
next @ core.js:5508
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4322
(anonymous) @ core.js:4782
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4708
onHandleError @ core.js:4782
t.handleError @ polyfills.js:3
r.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
c @ polyfills.js:3
(anonymous) @ polyfills.js:3
(anonymous) @ localforage.js:1698
SQLStatement (async)
createDbTable @ localforage.js:1668
(anonymous) @ localforage.js:1696
SQLTransaction (async)
(anonymous) @ localforage.js:1695
t @ polyfills.js:3
_initStorage$1 @ localforage.js:1685
extendSelfWithDriver @ localforage.js:2694
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4751
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2

Posts: 1

Participants: 1

Read full topic