在 ionic 4 中提交表单

Question

我正在使用 ionic 4.12。我有以下表格代码：

<ion-content padding>
    <form  #form="ngForm" (ngSubmit)="submitForm(form)">
      <ion-item>
        <ion-label>Guest Name</ion-label>
        <ion-input  name="guestname" type="text" placeholder="Guest Name" ngModel></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Host Name</ion-label>
        <ion-input  name="host_name" type="text" placeholder="Host Name" ngModel></ion-input>
      </ion-item>
      <button type="submit" block ion-button>Register Guest</button>
    </form>
</ion-content>

这里是 ts 文件：

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-register-guest',
  templateUrl: 'register-guest.html',
})
export class RegisterGuestPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }
  public submitForm(form){
    console.log("form submitted YAY");
  }
}

按下提交按钮时，控制台中没有任何记录。我认为 ts 文件中的 maybe 方法在视图中不可访问。当我尝试 <button (click)="test">test</button> 并将名为 test 的方法设置为 console.log 时，没有任何反应。我应该如何解决这个问题？

Answer 1

我会尝试的几件事：在您的@Component 中，我将更改为：

@Component({
  selector: 'page-register-guest',
  templateUrl: './register-guest.html',
})

同时删除 @IonicPage() 和 import { IonicPage, NavController, NavParams } from '@ionic/angular';

进一步将您的按钮更改为：

<ion-button type="submit" expand="block">Register Guest</ion-button>

在 ionic 4 中提交表单

submitting a form in ionic 4

ionic-framework

angular

ionic4