Ionic 5 Angular - Reactive Form inside of Ionic Modal

Issue

current State

I have a ionic tabbed app. One of the tabs opens a modal with multiple <ion-input>s.

What I expect to happen

To be able to use ReactiveForms to retrieve values of form fields in a modal. (First only to the modals module. The API will be called from the modals module)

What actually happens

Subscribing to the valueChanges of the FormGroup, the callback isn't called when typing into the inputs. The values also stay at their initial value/undefined;

sidenote: Even when supplying an invalid formGroup to the forms formGroupthere is no error in the console. (Which would be expected)

My current code

import {ModalPage} from '...'
...
async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
    });
    return await modal.present();
}
...

In this ModalPage's module I have imported the ReactiveFormsModule.

In the template I have multiple ion-inputs

ex.:

<form [formGroup]="someFormgroup"
    <ion-item>
        <ion-input placeholder="Title" formControlName="someFormControlName"></ion-input>
    </ion-item>
</form>

and in the matching .ts file I have someFormgroup:

ngOnInit() {
...
    this.someFormgroup = this.fb.group({
        meetName: ['', [Validators.required]],
    });
}
...

What I tried

I tried importing the reactiveForms module in both the modals page module and the tab its called from's module. I also tried switching to template driven forms wo/ success.

Solution

Looks like you assigned the formGroup to the formControl-input of the form. The group should be assigned to [formGroup].

<form [formGroup]="someFormgroup">
    <ion-item>
        <ion-input placeholder="Title" formControlName="meetName"></ion-input>
    </ion-item>
</form>

EDIT: Answer in Comments. Real issue was that the component shown in the Modal was not in the declarations of the Module that opens the Modal.

Answered By - funkizer