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;
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.value;
this.telephone=this.Form.tel.value;
}
ionViewDidLoad() {
console.log('ionViewDidLoad SettingsPage');
}
setValue()
{
this.storage.set("mail",this.mail).then((successData)=>{
console.log("Data Stored");
console.log(successData);
})
this.storage.set("tel",this.tel).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);
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