How to use local storage to save this form data?

@Fares95 wrote:

I have this code in .html :

<ion-header>

  <ion-navbar color="tertiary" hideBackButton *navbar>
    <ion-buttons left>
      <button ion-button icon-only menuToggle="left">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Paramètres</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>

    <p align="center">
      Modifier vos informations
    </p>
      <ion-row justify-content-center align-items-center style="height: 100%">
    <form #f="ngForm"  (ngSubmit)="onSubmit(f)" [formGroup]="Form" text-center center >

      <ion-item>
        <ion-label stacked> Email :  </ion-label>
        <ion-input  name="mailadress" type="email" formControlName="mailadress" placeholder="abir.tounsi@gmail.com " clearInput ngModel ></ion-input>
      </ion-item>

      <ion-item class="error" *ngIf="!Form.controls.mailadress.valid  && (Form.controls.mailadress.dirty)">

        <div class="error">
          Non valide
        </div>
      </ion-item>

      <ion-item>
        <ion-label  stacked>Téléphone</ion-label>
        <ion-input type="tel" formControlName="telephone" placeholder="+216" clearInput></ion-input>
      </ion-item>

      <ion-item class="error" *ngIf="!Form.controls.telephone.valid  && (Form.controls.telephone.dirty )">

        <div class="error">
          Non valide
        </div>
      </ion-item>

      <ion-col text-center>
        <button ion-button block type="submit" color="success">
          Enregistrer
        </button>
      </ion-col>
    </form>

      <ion-col text-center>
      <button ion-button color="tertiary" (click)="onChangepassword()" > Changer mot de passe </button>
      </ion-col>

  </ion-row>
</ion-content>

<style type="text/css">
  .error
  {
    color:red;
  }
</style>

in 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;


  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)])],
});
}

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

onChangepassword()
{
  this.navCtrl.push(ChangePasswordPage);
}

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


 }

i want to store every input of that form in local storage
and get them l

Posts: 1

Participants: 1

Read full topic