Ionic 5 Angular - Ionic Modal 内部的反应形式

Question

当前状态

我有一个离子标签应用程序。其中一个选项卡打开一个包含多个 <ion-input>s.

的模式

我期望发生的事情

能够使用 ReactiveForms 在模式中检索表单字段的值。 （首先只到模态模块。API将从模态模块调用）

实际发生了什么

订阅 FormGroup 的 valueChanges，在输入输入时不会调用回调。这些值也保持在初始值 value/undefined;

旁注： 即使向表单 formGroup 提供无效的 formGroup，控制台也没有错误。 （这是意料之中的）

我当前的代码

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

在这个 ModalPage 的模块中，我导入了 ReactiveFormsModule。

在模板中我有多个ion-inputs

例如：

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

在匹配的 .ts 文件中我有 someFormgroup:

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

我试过的

我尝试在模态页面模块和从其调用的模块中导入 reactiveForms 模块。我也试过切换到模板驱动的形式 wo/ success.

Answer 1

您似乎已将 formGroup 分配给表单的 formControl-input。该组应分配给 [formGroup]。

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

编辑： 在评论中回答。真正的问题是 Modal 中显示的组件不在打开 Modal 的 Module 的声明中。