Hi , i had a form that i wanted to store each value of it but when i display on console
the get results show that the get process is wrong
my file 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 ngModel></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>
my file 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: any;
public tel: any;
public data: any;
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');
}
// set a key/value
setValue(key: string, value: any)
{
this.storage.set(key, value).then((response) => {
console.log('set' + key + ' ', response);
}).catch((error) => {
console.log('set error for ' + key + ' ', error);
});
}
// get a key/value pair
getValue(key: string) {
this.storage.get(key).then((val) => {
console.log('get ' + key + ' ', val);
this.data[key] = "";
this.data[key] = val;
}).catch((error) => {
console.log('get error for ' + key + '', error);
});
}
onChangepassword()
{
this.navCtrl.push(ChangePasswordPage);
}
onSubmit(form: NgForm)
{
this.mail=this.Form.get('mailadress').value;
this.tel=this.Form.get('telephone').value;
console.log(form.value);
this.setValue("stoker",this.mail);
this.setValue("stoker",this.tel);
this.getValue("stoker");
this.navCtrl.push(EspaceCitoyenPage);
const toast = this.toastCtrl.create({
message: 'Modifications Enregistrées !',
duration: 4000
});
toast.present();
}
}
