在Ionic弹窗中触发ngSubmit函数的实现问题

我明白你的困扰——你想让弹窗里的“不，保存数据”按钮触发表单的ngSubmit逻辑，但弹窗函数和表单没有直接关联，不知道怎么传递数据和触发提交。下面是具体的解决步骤：

1. 在组件类中获取表单的引用 #

首先，我们需要在TypeScript文件里拿到模板中表单的实例，这样就能直接访问表单数据、触发提交逻辑。在组件类中添加@ViewChild来获取#observeForm的引用：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AlertController } from '@ionic/angular';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  tester: any; // 用于存储表单数据的变量
  timer: number = 0;

  // 获取模板中表单的引用
  @ViewChild('observeForm') observeForm!: NgForm;

  constructor(private alertController: AlertController) {}

  // 你的表单提交函数
  onSubmit(formData: any) {
    this.tester = formData; // 将表单数据赋值给tester变量
    console.log('表单提交数据:', formData);
    // 这里添加你的提交逻辑，比如发送API请求等
  }

  // 弹窗函数
  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Time Out!',
      message: 'Do you want to add more observe time?',
      buttons: [
        {
          text: 'Yes',
          cssClass: 'secondary',
          handler: () => {
            this.startTimer();
            console.log('Add time Okay');
          }
        },
        {
          text: 'No and save data',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            this.timer = 0;
            // 直接调用提交函数，传入当前表单数据
            this.onSubmit(this.observeForm.value);
            // 如果你需要严格触发ngSubmit事件（比如触发表单验证），可以用下面的代码：
            // this.observeForm.onSubmit(new Event('submit'));
          }
        }
      ]
    });
    await alert.present();
  }

  startTimer() {
    // 你的计时器逻辑
  }
}

2. 修正HTML中的错误绑定 #

注意你原HTML代码里有个无效绑定：[(observeForm.value)]="tester"是错误的，因为NgForm的value是只读属性，不能用双向绑定语法。你需要去掉这个绑定，转而在onSubmit函数里把表单数据赋值给tester（就像上面代码中做的那样）。修正后的HTML代码：

<form #observeForm="ngForm" (ngSubmit)="onSubmit(observeForm.value)">
  <!-- 你的表单控件示例：
  <ion-input name="username" ngModel placeholder="Username"></ion-input>
  <ion-input name="email" ngModel placeholder="Email"></ion-input>
  -->
  <ion-button margin-top="auto" expand="block" type="submit" routerDirection="backforward">Confirm</ion-button>
</form>

原理说明 #

• 通过@ViewChild('observeForm')我们拿到了模板中表单的NgForm实例，这样就能在弹窗的handler里直接访问表单的value（即用户输入的所有数据）。
• 调用this.onSubmit(this.observeForm.value)和点击表单的Confirm按钮触发ngSubmit的效果完全一致，会执行你定义的所有提交逻辑。
• 如果你的表单包含验证规则，想要严格触发ngSubmit事件（比如更新表单的验证状态），可以使用this.observeForm.onSubmit(new Event('submit'))，它会模拟用户点击提交按钮的行为。

内容的提问来源于stack exchange，提问作者l.gloria