EDIT : Solved ! i just forgot to import modal's module in setting page module...
I did an account setting on my app, and I want to let the user change his email and username.
In the settings page, I show actual email and username in a reactive form disabled with an edit button which opens a modal with another reactive form in a modal page. The form on the parent page works fine and shows the values correctly. But the modal's form is not showing values.
parent TS settings page:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, EmailValidator } from '@angular/forms';
import { OverlayEventDetail } from '@ionic/core';
import { ApiService } from '../services/api.service';
import { ActivatedRoute, Router } from '@angular/router';
import { User } from '../models/user';
import { AuthService } from '../services/auth.service';
import { ModalController } from '@ionic/angular';
import { EditUserAccountPage } from './edit-user-account/edit-user-account.page';
@Component({
selector: 'app-tab3',
templateUrl: 'tab3.page.html',
styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {
userAccountForm: FormGroup;
currentUser: User;
showEditButton = false;
constructor(
private fb: FormBuilder,
private apiService: ApiService,
private route: ActivatedRoute,
private authService: AuthService,
private modalController: ModalController
) { }
ngOnInit() {
this.getCurrentUser();
this.createForm();
}
getCurrentUser() {
this.route.data.subscribe((data: { user: User }) => {
this.currentUser = data.user;
console.log(this.currentUser);
});
}
get f() { return this.userAccountForm.controls; }
createForm() {
this.userAccountForm = this.fb.group({
email: new FormControl({ value: this.currentUser.email, disabled: true }, Validators.required),
username: new FormControl({ value: this.currentUser.username, disabled: true }, Validators.required),
});
}
async openModal() {
const modal: HTMLIonModalElement =
await this.modalController.create({
component: EditUserAccountPage,
componentProps: {
email: this.currentUser.email,
username: this.currentUser.username
}
});
modal.onDidDismiss().then((detail: OverlayEventDetail) => {
if (detail !== null) {
console.log('The result:', detail.data);
this.currentUser.email = detail.data.newEmail;
this.currentUser.username = detail.data.newUsername;
this.apiService.updateUserById(this.currentUser._id, this.currentUser).subscribe();
this.authService.storeUsername(this.currentUser.username);
}
});
await modal.present();
}
}
Parent View settings page :
<ion-content [fullscreen]="true">
<ion-item>
<h3>Paramètres compte</h3>
</ion-item>
<form [formGroup]="userAccountForm">
<ion-item>
<ion-label position="floating">E-Mail</ion-label>
<ion-input required formControlName="email" type="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Nom d'utilisateur</ion-label>
<ion-input required formControlName="username" type="text"></ion-input>
</ion-item>
<ion-button block color="primary" type="button" (click)="openModal()" expand="block">
Modifier
</ion-button>
</form>
</ion-content>
Child Modal TS page :
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-edit-user-account',
templateUrl: './edit-user-account.page.html',
styleUrls: ['./edit-user-account.page.scss'],
})
export class EditUserAccountPage implements OnInit {
userEditForm: FormGroup;
currentUserEmail: string;
currentUserUsername: string;
isFormLoaded = false;
constructor(
private fb: FormBuilder,
private modalController: ModalController,
private navParams: NavParams
) { }
ngOnInit() {
this.currentUserEmail = this.navParams.get('email');
console.log('ngOnInit');
this.currentUserUsername = this.navParams.get('username');
this.createForm();
this.userEditForm.patchValue({ email: this.currentUserEmail, username: this.currentUserUsername });
}
createForm() {
console.log('currentUserEmail1', this.currentUserEmail);
console.log('currentUserUsername1', this.currentUserUsername);
this.userEditForm = this.fb.group({
email: new FormControl({ value: this.currentUserEmail, disabled: true }, Validators.required),
username: new FormControl({ value: this.currentUserUsername, disabled: true }, Validators.required),
});
console.log('this.f.email.value', this.f.email.value);
console.log('this.f.username.value', this.f.username.value);
}
get f() { return this.userEditForm.controls; }
onSubmit() {
this.currentUserEmail = this.f.email.value;
this.currentUserUsername = this.f.username.value;
console.log('mail modifié', this.currentUserEmail);
console.log('username modifié', this.currentUserUsername);
this.myDismiss();
}
ionViewWillEnter() {
console.log('willEnter');
}
ionViewDidEnter() {
console.log('didEnter');
}
async myDismiss() {
console.log('mail modifié', this.currentUserEmail);
console.log('username modifié', this.currentUserUsername);
const newEmail = this.currentUserEmail;
const newUsername = this.currentUserUsername;
await this.modalController.dismiss(newEmail);
}
}
Child Modal View page :
<ion-header>
<ion-toolbar>
<ion-title>Modifier compte</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form [formGroup]="userEditForm" (ngSubmit)="onSubmit()">
<ion-item>
<ion-label position="floating">E-Mail</ion-label>
<ion-input formControlName="email" type="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Nom d'utilisateur</ion-label>
<ion-input formControlName="username" type="text"></ion-input>
</ion-item>
<ion-button block color="primary" type="submit" [disabled]="userEditForm.invalid" expand="block">
Enregistrer
</ion-button>
</form>
</ion-content>
And this is the chrome console :
ngOnInit
edit-user-account.page.ts:31 currentUserEmail1 [email protected]
edit-user-account.page.ts:32 currentUserUsername1 Bertrand
edit-user-account.page.ts:37 this.f.email.value [email protected]
edit-user-account.page.ts:38 this.f.username.value Bertrand
edit-user-account.page.ts:52 willEnter
edit-user-account.page.ts:57 didEnter
It seems data is well stored, but is not displayed. Why?