reactive Form does not show values on Ionic Modal's view

Question

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?

Digitizer Digitizer · Accepted Answer · 2020-08-22T02:53:51

Looks like you need a getter for each of those fields

get email(): AbstractControl {
    return this.userEditForm.get('email');
}

get username(): AbstractControl {
    return this.userEditForm.get('username');
}

reactive Form does not show values on Ionic Modal's view

1 Answers